CLS explicado: o que é e como melhorar essa métrica

CLS, ou Cumulative Layout Shift, mede o quanto os elementos visuais de uma página se deslocam de forma inesperada enquanto ela carrega. É a métrica por trás daquela experiência irritante de tentar clicar em um botão e, no instante do clique, um bloco de anúncio ou uma imagem carregar acima dele, empurrando tudo para baixo — e o clique acaba em outro lugar, às vezes em um link ou anúncio que o visitante nem queria abrir.

O cálculo do CLS combina duas coisas: a fração da tela que foi afetada pelo deslocamento e a distância que os elementos se moveram. Um CLS bom é abaixo de 0,1; entre 0,1 e 0,25 é "precisa melhorar"; acima de 0,25 é considerado ruim. Diferente de LCP e INP, que são medidos em tempo, o CLS é uma pontuação sem unidade — quanto mais perto de zero, mais estável é o layout.

As causas mais comuns de instabilidade

• Imagens e vídeos sem dimensões definidas no HTML — o navegador só sabe o tamanho do elemento depois que ele termina de baixar, e até lá reserva espaço zero, empurrando o conteúdo abaixo quando a imagem finalmente aparece.
• Fontes customizadas que trocam o layout quando terminam de carregar (o texto muda de largura entre a fonte padrão do navegador e a fonte definitiva do site).
• Anúncios, embeds e iframes inseridos dinamicamente sem um espaço reservado, empurrando o conteúdo ao redor quando finalmente carregam.
• Conteúdo injetado via JavaScript acima de conteúdo já visível, como banners de cookies ou notificações que aparecem no topo da página depois que o visitante já começou a ler.

Como corrigir cada caso

A correção mais eficaz e mais simples é sempre reservar o espaço com antecedência. Para imagens e vídeos, isso significa declarar os atributos width e height no HTML (ou usar aspect-ratio no CSS), para que o navegador calcule o espaço necessário antes mesmo de baixar o arquivo. Para fontes customizadas, a propriedade CSS font-display: optional ou swap combinada com fontes de fallback com métricas parecidas reduz o salto de texto. Para anúncios e embeds, reservar um contêiner com altura mínima definida evita o empurrão quando o conteúdo externo finalmente carrega. Para conteúdo dinâmico como banners, a prática recomendada é inserir esses elementos sem empurrar o conteúdo já visível — por exemplo, sobrepondo-os (overlay) em vez de empurrar o layout para baixo.

Um detalhe que passa despercebido: deslocamentos causados pelo próprio visitante

Nem todo deslocamento conta para o CLS — mudanças de layout que acontecem até 500ms depois de uma interação do próprio usuário (como abrir um menu sanduíche ou expandir um accordion) são desconsideradas, porque são esperadas e desejadas. O problema real é o deslocamento inesperado, fora do controle do visitante, que é justamente o que a métrica tenta capturar e o que vale a pena eliminar primeiro em qualquer plano de correção.

Este conteúdo tem caráter informativo e não substitui uma análise técnica personalizada do seu site.