O que é CLS?
CLS, sigla de Cumulative Layout Shift (em tradução livre, deslocamento cumulativo de layout), é a métrica que mede o quanto os elementos visíveis de uma página mudam de posição de forma inesperada. O caso clássico é o texto que desce de repente porque um banner carregou em cima, fazendo o usuário clicar no lugar errado.
O CLS integra os Core Web Vitals, o conjunto de métricas de experiência de página do Google, ao lado do LCP (velocidade) e do INP (responsividade). O CLS mede estabilidade em pontos, sem unidade de tempo: quanto maior a área que se move e a distância percorrida, maior a pontuação.
Para o SEO técnico, o CLS expõe problemas de construção da página: imagens sem dimensões declaradas, anúncios que abrem espaço depois do carregamento, fontes que trocam de tamanho e conteúdo injetado por script no topo da tela.
Como calcular o CLS?
CLS = fração de impacto × fração de distância (somadas na maior janela de deslocamentos da visita)Cada deslocamento inesperado gera uma pontuação a partir de duas frações:
- Fração de impacto: a parcela da tela ocupada pelos elementos instáveis, somando a posição antes e depois do movimento.
- Fração de distância: a maior distância percorrida pelo elemento, dividida pela dimensão da tela.
Exemplo concreto: um bloco de conteúdo ocupa metade da tela e um banner carrega acima dele, empurrando-o para baixo em 25% da altura. A área afetada cobre 75% da tela, então a fração de impacto é 0,75 e a fração de distância é 0,25. A pontuação do deslocamento é 0,75 × 0,25 = 0,1875, sozinha já acima do limite de 0,1 considerado bom. O CLS final soma os deslocamentos da pior janela de movimentos, com janelas de até 5 segundos.
Movimentos iniciados pelo próprio usuário, como abrir um menu, ficam de fora. A medição de usuários reais aparece no PageSpeed Insights e no relatório de Core Web Vitals do Google Search Console.
CLS vs LCP vs INP: qual a diferença?
| Métrica | O que mede | Quando usar |
|---|---|---|
| CLS | Deslocamentos inesperados do layout | Diagnosticar conteúdo que pula na tela |
| LCP | Tempo até o maior conteúdo aparecer | Diagnosticar carregamento lento |
| INP | Latência das interações do usuário | Diagnosticar página travada ao usar |
Veredito: o CLS é a única das três que mede estabilidade visual em pontos, enquanto LCP e INP medem tempo.
Exemplos de uso
- Um portal de notícias exibe anúncios que carregam depois do texto e empurram a matéria para baixo. A reserva de espaço fixo para cada bloco derruba o CLS de 0,32 para 0,05.
- Um e-commerce publica fotos de produto sem largura e altura declaradas no HTML, e o navegador reorganiza a listagem a cada imagem carregada. A declaração das dimensões elimina os saltos.
Valores de referência
A documentação do Google define as faixas, medidas no percentil 75 dos acessos reais:
| Classificação | CLS |
|---|---|
| Bom | Até 0,1 |
| Precisa melhorar | De 0,1 a 0,25 |
| Ruim | Acima de 0,25 |
Erros comuns
- Publicar imagens e vídeos sem atributos de largura e altura, deixando o navegador adivinhar o espaço.
- Injetar banners, avisos de cookies e barras promocionais no topo da página depois do carregamento.
- Trocar fontes sem estratégia de fallback compatível, mudando o tamanho do texto renderizado.
- Testar só no desktop, quando o CLS costuma ser pior no mobile, onde a tela menor amplia o efeito dos deslocamentos.
Perguntas frequentes sobre CLS
Qual é um bom CLS?
O Google considera bom um CLS de até 0,1, medido no percentil 75 dos acessos reais. Entre 0,1 e 0,25 a página precisa melhorar, e acima de 0,25 a estabilidade é classificada como ruim. A meta prática é nenhum salto perceptível durante o carregamento.
O que mais causa CLS alto?
As causas mais comuns são imagens sem dimensões declaradas, anúncios e embeds que abrem espaço depois de carregar, conteúdo injetado dinamicamente no topo da página e fontes customizadas que trocam de tamanho na renderização. A correção passa por reservar espaço fixo para tudo que carrega de forma assíncrona.
Animações contam para o CLS?
Movimentos esperados ficam de fora quando usam propriedades de animação adequadas, como transform, que não disparam recálculo de layout. Deslocamentos que ocorrem até 500 ms depois de uma interação do usuário também são desconsiderados. O CLS pune apenas o movimento inesperado, aquele que acontece sem ação de quem navega.