Cumulative Layout Shift CLS
Um Core Web Vital que mede o quanto o conteúdo da página pula e se move de forma inesperada durante o carregamento — aquela experiência irritante de ir clicar e o botão sair do lugar na hora. Mede estabilidade visual. Meta: abaixo de 0,1.
O que é medido: o CLS soma todos os deslocamentos de layout inesperados (elementos que se movem depois de já terem sido renderizados), ponderados pela porção da tela que se moveu e pela distância. Causas clássicas: imagens/vídeos sem dimensões definidas (o conteúdo pula quando eles carregam — corrige-se com width/height ou aspect-ratio), anúncios/incorporações que aparecem e empurram o conteúdo para baixo, web fonts que são trocadas (FOUT com tamanho diferente), e conteúdo injetado acima do que já existe. Otimização: sempre reservar espaço para mídia e conteúdo dinâmico (aspect-ratio, dimensões fixas, placeholders tipo esqueleto), usar font-display com métricas de fallback compatíveis, e nunca inserir coisas acima do que o usuário está olhando. Um dos três Core Web Vitals. Ligado diretamente ao motivo de existir aspect-ratio e atributos de dimensão. Relacionado a Largest Contentful Paint e aspect-ratio.