O que é CLS (Cumulative Layout Shift) e como zerar o pulo de layout
CLS mede o quanto os elementos da página pulam durante o carregamento. Veja o limiar de 0,1 do Google, as causas mais comuns e como estabilizar o layout.
CLS (Cumulative Layout Shift) é a métrica de Core Web Vitals que mede a estabilidade visual: o quanto os elementos da página se deslocam sozinhos enquanto ela carrega. É o número por trás daquele momento em que você vai clicar e o botão pula para outro lugar.
Qual é um bom CLS?
O CLS não tem unidade — é uma pontuação. As faixas do Google, no percentil 75 dos acessos, são:
- Bom: até 0,1.
- Precisa melhorar: entre 0,1 e 0,25.
- Ruim: acima de 0,25.
O que causa o pulo de layout
- Imagens e vídeos sem largura e altura declaradas — o navegador não reserva o espaço e o conteúdo empurra o resto quando chega.
- Anúncios, banners e embeds que carregam depois e ocupam um espaço que não existia.
- Fontes que trocam de tamanho ao carregar (FOUT/FOIT).
- Conteúdo injetado por JavaScript acima do que o usuário já estava lendo.
Como zerar o CLS
- Sempre defina width e height (ou aspect-ratio) em imagens, vídeos e iframes.
- Reserve o espaço de banners e anúncios com um contêiner de tamanho fixo.
- Pré-carregue as fontes principais e use métricas de fallback para evitar o salto de tamanho.
- Evite inserir conteúdo acima do que já está visível; insira abaixo ou reserve o espaço antes.
Um CLS alto custa conversão: formulários enviados por engano, o produto errado no carrinho, a sensação de um site "quebrado". Estabilidade visual é confiança — e confiança é o que faz o visitante avançar.
Como medir o CLS do seu site
O Raio-X de Velocidade da First Class Dev mede o CLS junto com as demais métricas de Core Web Vitals, de graça e em segundos, usando a base oficial do Google.
Meça o seu site agora, de graça.
O Raio-X de Velocidade roda a medição oficial do Google e mostra o que corrigir primeiro.
Fazer o Raio-X grátisQual é o valor ideal de CLS?
Até 0,1 no percentil 75 dos acessos. Entre 0,1 e 0,25 precisa melhorar; acima de 0,25 é considerado ruim. Diferente do LCP, o CLS é uma pontuação sem unidade de tempo.
Por que meu site pula durante o carregamento?
Quase sempre por imagens, anúncios ou embeds sem espaço reservado: o navegador não sabe o tamanho deles até chegarem e empurra o conteúdo já visível. Declarar dimensões resolve a maioria dos casos.
CLS conta para o SEO?
Sim. É um dos três Core Web Vitals usados pelo Google como sinal de experiência de página, ao lado de LCP e INP.