O que é CLS? Significado, cálculo e como corrigir

12 de outubro de 2026Última atualização em 9 de novembro de 20266 min de leitura

CLS (Cumulative Layout Shift) é a métrica das Core Web Vitals que mede a estabilidade visual da página, ou seja, o quanto os elementos saem do lugar sem que o usuário tenha pedido. A nota é um número sem unidade: até 0,1 é boa, até 0,25 precisa de melhoria e acima disso é ruim.

Você já sentiu o CLS na prática: começou a ler um texto, um banner apareceu e a linha sumiu da tela, ou tentou tocar em um link e acabou tocando em um anúncio que surgiu naquele instante. O CLS transforma esse incômodo em número.

Como funciona o CLS

O navegador registra uma mudança de layout quando um elemento visível altera sua posição inicial entre dois quadros. Elemento novo adicionado à página não conta, a menos que empurre outros elementos que já estavam visíveis.

Cada mudança recebe uma pontuação com esta fórmula: fração de impacto multiplicada pela fração de distância.

Fração de impacto: a porção da tela ocupada pelos elementos instáveis, somando a área antes e depois do movimento.
Fração de distância: o maior deslocamento de um elemento instável, dividido pela maior dimensão da tela.

As mudanças são agrupadas em janelas de sessão: sequências com menos de 1 segundo entre uma mudança e outra, com no máximo 5 segundos no total. O CLS da página é a soma da pior janela. Para avaliação, vale o percentil 75 das visitas, com celular e computador separados.

Mudanças nos 500 milissegundos depois de um clique, toque ou tecla são tratadas como esperadas e ficam de fora. Rolar a página, arrastar e dar zoom não entram nessa exceção.

Exemplo de cálculo

Considere um celular com tela de 390 por 800 pixels e um artigo que ocupa a tela inteira. Depois do carregamento, um aviso de 120 pixels de altura surge no topo e empurra todo o conteúdo para baixo.

A área afetada cobre a tela inteira, então a fração de impacto é 1.
O conteúdo desceu 120 pixels em uma tela de 800, então a fração de distância é 0,15.
A pontuação é 1 multiplicado por 0,15, igual a 0,15.

Essa única mudança já coloca a visita na faixa que precisa de melhoria. Reservar os 120 pixels desde o início da página leva a pontuação a zero, sem remover o aviso.

Principais causas de CLS alto

Imagens e vídeos sem dimensões definidas. O navegador só descobre o tamanho depois de baixar o arquivo e reposiciona o texto.
Anúncios, embeds e iframes sem espaço reservado.
Conteúdo inserido dinamicamente, como banners e formulários que aparecem acima do que o usuário está lendo.
Fontes da web que trocam a fonte provisória por outra de tamanho diferente.
Animações em propriedades de layout, como top, left, width e height.

Por que o CLS importa para SEO

O CLS é uma das três Core Web Vitals, ao lado do LCP e do INP. O Google recomenda bons resultados nessas métricas e afirma que eles estão alinhados ao que seus sistemas de ranqueamento querem recompensar, sem publicar peso. Conteúdo relevante continua decidindo primeiro.

O impacto no usuário é direto: toques errados em botões, perda do ponto de leitura e sensação de site pouco confiável. Em lojas virtuais, um botão de compra que muda de lugar no momento do toque custa uma venda. O celular concentra o problema, e o mobile-first index torna essa versão a referência para o Google.

Nos dados do SE Ranking para o Brasil, em novembro de 2026, "cls" tem 5.400 pesquisas por mês, mas a sigla também nomeia outras coisas, como um modelo da Mercedes-Benz. As buscas claramente ligadas ao tema são menores: "o que é cls" tem 110 e "cumulative layout shift" tem 90.

Como medir e corrigir o CLS

Consulte os dados de campo no PageSpeed Insights e o relatório Core Web Vitals do Search Console. Eles mostram a experiência real, inclusive mudanças que ocorrem depois do carregamento.
Localize o elemento culpado no Chrome DevTools: no painel Performance, a faixa Layout shifts destaca cada mudança e o que se moveu.
Declare as dimensões das mídias: <img src="capa.jpg" width="1200" height="630" alt="Capa">. O navegador calcula a proporção antes de baixar a imagem. Em CSS, use aspect-ratio: 16 / 9.
Reserve espaço para anúncios e embeds com min-height e mantenha o espaço quando nenhum anúncio for exibido.
Insira banners sem empurrar conteúdo. Use um espaço já reservado ou uma sobreposição fixa.
Trate as fontes: use font-display: optional, faça o pré-carregamento das fontes críticas e ajuste a fonte provisória com size-adjust.
Anime com transformações: troque top e left por transform: translate(), e width e height por transform: scale().
Mantenha o site compatível com o bfcache, o cache de voltar e avançar do navegador. Páginas restauradas dele aparecem prontas, sem novas mudanças.

Se você quer saber quais templates do seu site causam mais instabilidade, o diagnóstico de SEO gratuito da ASM Digital mostra por onde começar.

Erros comuns

Confiar apenas no teste de laboratório. O Lighthouse só vê as mudanças do carregamento. Rolagem com carregamento tardio e banners atrasados só aparecem nos dados de campo.
Testar só com internet rápida. Em conexões lentas, as imagens chegam depois, e as mudanças ficam maiores.
Colapsar o espaço do anúncio quando nenhuma campanha é entregue. O conteúdo sobe, e a mudança é contabilizada.
Definir só a largura da imagem. Sem altura ou proporção, o navegador não reserva o espaço correto.
Carregar conteúdo acima da dobra sem marcador de posição. Em sites com muito JavaScript, uma estrutura provisória com o mesmo tamanho resolve o salto.

CLS vs INP

Os dois avaliam a experiência depois que a página aparece, mas medem coisas diferentes. O INP mede o tempo de resposta a uma ação do usuário e é dado em milissegundos. O CLS mede a movimentação inesperada dos elementos e é uma pontuação sem unidade. Uma página responde rápido aos cliques e mesmo assim tem elementos que saltam, e o inverso também acontece. Por isso, cada métrica pede um diagnóstico próprio.

Perguntas frequentes

Qual é um bom valor de CLS?

Até 0,1 no percentil 75 das visitas. Entre 0,1 e 0,25 o resultado precisa de melhoria, e acima de 0,25 é ruim.

O CLS afeta o ranqueamento?

O Google recomenda bons resultados nas Core Web Vitals e os associa ao que seus sistemas de ranqueamento recompensam, sem divulgar peso. Um CLS bom não compensa conteúdo fraco, mas evita desvantagem entre páginas parecidas.

Por que o CLS está diferente no PageSpeed Insights e no Search Console?

O bloco de laboratório do PageSpeed simula uma carga única e não captura a visita inteira. Os dados de campo refletem usuários reais, e o Search Console agrupa URLs parecidas. Para decidir, use os dados de campo.

Clicar em um botão que abre um menu aumenta o CLS?

Não, se a mudança começar nos 500 milissegundos depois do clique. Quando a resposta depende de uma requisição mais lenta, reserve o espaço logo após o clique para que a mudança não seja contabilizada.

Termos relacionados

Quer eliminar os saltos de layout que atrapalham o seu site? Conheça o serviço de SEO técnico da ASM Digital.

← Voltar ao blog