Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) e uma metrica do Core Web Vitals que quantifica o quanto o conteudo visivel muda de posicao de forma inesperada ao longo da vida util de uma pagina. Ela captura o problema do "conteudo que pula", em que o usuario tenta tocar em um botao que se move no ultimo segundo.
Cumulative Layout Shift (CLS) e uma metrica do Core Web Vitals que quantifica o quanto o conteudo visivel muda de posicao de forma inesperada ao longo da vida util de uma pagina. Ela captura o problema do "conteudo que pula", em que o usuario tenta tocar em um botao que se move no ultimo segundo.
Por Que Importa
O CLS e um sinal de ranqueamento confirmado pelo Google e um dos tres Core Web Vitals. Os limites do Google: bom <= 0,1, precisa de melhorias 0,1-0,25, ruim > 0,25. Um CLS alto prejudica a confianca do usuario - a pesquisa do Google mostra que paginas com CLS > 0,15 tem taxas de rejeicao 24% mais altas. Tambem e o Core Web Vital mais barato de corrigir, porque quase toda causa tem um remedio simples.
Como o CLS e Calculado
Pontuacao do CLS = fracao de impacto x fracao de distancia, somada em todos os deslocamentos inesperados de layout ao longo da vida util da pagina.
- Fracao de impacto: a porcao da viewport afetada pelo elemento que se desloca (uniao do antes + depois).
- Fracao de distancia: a maior distancia que qualquer elemento percorreu, como fracao da viewport.
Desde 2021, o Chrome usa o "CLS por janela" - apenas a pior janela de 5 segundos conta, de modo que uma SPA de longa duracao nao e penalizada para sempre por um unico mau momento.
Causas Comuns
Imagens sem dimensoes: <img> sem atributos width/height forca o navegador a refazer o layout quando a imagem carrega.
Anuncios e embeds sem espaco reservado: Slots de anuncios de terceiros inseridos apos a renderizacao inicial empurram o conteudo para baixo.
Fontes web causando FOIT/FOUT: Quando uma fonte personalizada carrega, o texto refaz o layout porque a fonte de fallback tem metricas diferentes.
Conteudo injetado dinamicamente: Widgets de "voce tambem pode gostar", banners de cookies e notificacoes que aparecem acima do conteudo existente.
Animacoes que nao sao baseadas em transform: Animar top ou left aciona o layout; animar transform nao.
Como Corrigir o CLS
Defina dimensoes explicitas em imagens e videos: <img width="800" height="600"> - o navegador reserva o espaco antes de o arquivo carregar.
Reserve espaco para slots de anuncios: De aos contêineres de anuncios um min-height fixo para que os anuncios inseridos nao empurrem o conteudo.
Use font-display: optional ou faca preload das fontes web para minimizar o FOUT.
Insira novo conteudo abaixo da dobra ou na interacao do usuario, nao acima do conteudo existente.
Anime apenas com transform e opacity - eles nao acionam o layout.
Use a propriedade CSS aspect-ratio para midia responsiva sem dimensoes explicitas.
Medindo o CLS
Dados de campo: CrUX, relatorio Core Web Vitals do Search Console, secao de campo do PageSpeed Insights.
Dados de laboratorio: Lighthouse, painel Performance do Chrome DevTools. Observe que o CLS de laboratorio pode diferir do de campo, porque usuarios reais acionam posicoes de rolagem e interacoes diferentes.
O CLS e avaliado no percentil 75 dos dados de usuarios reais, portanto os dados de campo sao o que conta para o SEO.
Fontes: