CLS: como medir e corrigir mudanças inesperadas de layout

Exemplo de aplicação

CLS (Cumulative Layout Shift) é a métrica das Core Web Vitals que representa a estabilidade visual de uma página. Ela considera deslocamentos inesperados de elementos visíveis: por exemplo, quando um botão muda de lugar depois que um anúncio ou uma imagem carrega e a pessoa toca no local onde o botão estava.

O CLS não mede velocidade em segundos. Ele combina a área afetada pelo deslocamento com a distância percorrida. Um valor maior indica mais instabilidade, mas precisa ser investigado junto à página e às condições de uso; o número sozinho não identifica o elemento causador.

Quais valores de CLS são considerados bons

Como orientação para as Core Web Vitals, o Google classifica como bom um CLS de até 0,1, precisa de melhoria acima de 0,1 até 0,25 e ruim acima de 0,25. A avaliação de campo considera o percentil 75 das visitas e separa celular de computador. Essas faixas ajudam a priorizar a experiência; não são promessa de posição ou tráfego.

Quando uma URL tem pouco volume de dados, o relatório pode mostrar um grupo de páginas semelhantes ou não exibir informação suficiente. A ausência de um valor no Search Console não prova que a página esteja estável para todas as pessoas.

Dados de campo e testes de laboratório

Dados de campo vêm de experiências reais agregadas, como as que alimentam o Chrome User Experience Report (CrUX) e o relatório de Core Web Vitals do Search Console. Eles ajudam a perceber quais grupos de páginas enfrentam o problema em dispositivos e condições diversas.

Um teste de laboratório, como uma execução do Lighthouse ou do PageSpeed Insights, simula uma visita em um cenário específico. Ele ajuda a reproduzir e investigar causas, mas pode não repetir o deslocamento visto por usuários em outros aparelhos, redes, sessões ou estados da página. Compare resultados de períodos e condições compatíveis.

Causas comuns de instabilidade visual

**Imagens e vídeos sem espaço reservado:** se a dimensão ou proporção não está definida, o conteúdo seguinte pode ser empurrado quando a mídia aparece.
**Anúncios, iframes e incorporações:** esses elementos podem ter altura ou tamanho desconhecido no início e deslocar o que já estava visível.
**Conteúdo inserido depois do carregamento:** avisos, banners e recomendações adicionados acima do conteúdo atual podem empurrar a leitura.
**Fontes web:** uma fonte substituta e a fonte final podem ocupar espaços diferentes, alterando quebras de linha e a posição de outros elementos.
**Elementos que mudam de tamanho ou posição:** animações de altura, margem ou posição podem causar deslocamentos que poderiam ser evitados.

Nem toda mudança na tela conta como CLS. O principal problema é o movimento inesperado de conteúdo já visível; uma ação iniciada pela pessoa pode mudar a página sem representar a mesma surpresa. Reproduza a sequência de interação ao investigar um relatório.

Como localizar o elemento que desloca a página

No Search Console, abra o relatório de Core Web Vitals, escolha dispositivo e grupo de URLs e identifique o tipo de problema.
Selecione uma URL representativa do modelo afetado e reproduza o carregamento em um teste de laboratório e em um navegador com as ferramentas de desenvolvimento.
Observe a página desde o início, inclusive depois de carregar fontes, anúncios e incorporações. Registre o momento e os elementos que se moveram.
Compare uma página estável e uma afetada do mesmo modelo. Procure diferenças em dimensões de mídia, reservas de espaço, fontes, scripts e conteúdo tardio.
Corrija uma causa por vez, repita a medição em condições equivalentes e acompanhe os dados de campo quando houver amostra suficiente.

Uma nota geral da página pode esconder um componente que só aparece em celular ou após uma interação. Não conclua que todo o site tem o mesmo problema a partir de uma única URL ou execução.

Ajustes para reduzir deslocamentos

Declare largura e altura de imagens e vídeos, ou reserve a proporção com CSS, para o navegador separar o espaço antes de carregar o arquivo.
Reserve uma área compatível com o tamanho provável de anúncios, players e incorporações. Se o tamanho variar, defina limites que reduzam o movimento do conteúdo próximo.
Evite inserir avisos acima do trecho que está sendo lido. Prefira um espaço previamente reservado ou uma interação explícita que não surpreenda a pessoa.
Ao carregar fontes, escolha alternativas com métricas semelhantes e configure a troca para evitar mudanças grandes de linha e altura.
Prefira animações que não alterem o fluxo do documento quando a intenção é apenas mover ou realçar um elemento.
Teste os modelos e dispositivos importantes, incluindo páginas com banners, menus, consentimento e ferramentas de terceiros.

O atributo `loading="lazy"` pode adiar o carregamento de imagens e iframes fora da área visível, mas não é uma correção universal de CLS. Não use carregamento tardio em uma mídia principal sem avaliar o efeito na apresentação. O espaço reservado e a sequência de renderização continuam sendo decisivos.

Checklist de revisão final

Antes de publicar ou atualizar o artigo, confirme estes pontos:

A intenção da página e o público estão definidos e refletem uma necessidade real.
Afirmações, números, condições e exemplos foram validados com fontes ou responsáveis competentes.
Título, descrição, URL, links e imagem representam o conteúdo publicado com clareza.
Leitura, navegação e ações principais funcionam em dispositivos móveis e com teclado.
Há uma pessoa responsável e uma data de revisão para manter o artigo atualizado.

Perguntas frequentes

**Qual é um bom valor de CLS?** Até 0,1 é classificado como bom. Entre 0,1 e 0,25 precisa de melhoria; acima de 0,25 é ruim, conforme os limites atuais das Core Web Vitals.
**CLS alto garante queda no Google?** Não. É uma métrica de experiência considerada entre muitos sinais, e uma alteração isolada não permite prever a classificação.
**Por que o PageSpeed e o Search Console mostram valores diferentes?** O PageSpeed pode exibir dados reais disponíveis e uma execução de laboratório. Search Console agrupa dados de campo por páginas e dispositivo; a amostra e o período podem diferir.
**Imagens sempre causam CLS?** Não. O risco aumenta quando o navegador não sabe quanto espaço reservar antes de a imagem aparecer. Dimensões e proporção ajudam a evitar esse deslocamento.
**Definir `loading="lazy"` resolve CLS?** Não por si só. Lazy loading muda quando o recurso é carregado; ainda é preciso reservar o espaço e avaliar o comportamento da mídia.

Próximo passo

Comece por um grupo de URLs afetado e reproduza o deslocamento em uma página representativa. Registre o elemento, o momento e o dispositivo antes de mudar o código; isso ajuda a equipe técnica a corrigir a causa sem remover funcionalidades importantes.