CLS alto: como encontrar e corrigir mudanças inesperadas de layout

Leitura executiva

Principais conclusões

• O elemento que se move é diferente do elemento que causou o movimento.
• Defina dimensões ou proporção para imagens, vídeos e iframes.
• Reserve espaço para banners e conteúdo assíncrono.
• Teste sessões longas e interações, não apenas o carregamento inicial.

Cumulative Layout Shift (CLS) mede mudanças inesperadas de posição ao longo da visita. O problema não é simplesmente uma página que se move. É o conteúdo mudar sem aviso enquanto a pessoa lê, aponta, clica ou preenche uma tarefa.

O limite recomendado é 0,1 no percentil 75. Como deslocamentos podem acontecer depois do carregamento, um teste curto pode não capturar consentimento tardio, anúncio renovado, fonte, recomendação personalizada ou componente aberto durante a jornada.

Diferencie vítima e causa

Ferramentas costumam destacar o elemento que se moveu. Ele pode ser apenas a vítima. Se um banner é inserido acima do título, o título, o texto e o botão se deslocam, mas o causador foi o banner.

Para cada evento, registre:

• elemento deslocado;
• elemento inserido, removido ou redimensionado;
• momento;
• ação do usuário próxima;
• área afetada;
• valor do shift;
• template e dispositivo.

O painel de Performance do Chrome e a visualização de layout shifts ajudam a reproduzir a sequência.

Defina dimensões para imagens e mídia

Quando o navegador conhece largura e altura, consegue reservar a proporção antes de baixar o arquivo:

<img
  src="/produto.webp"
  width="800"
  height="600"
  alt="Produto visto de frente"
>

CSS responsivo continua possível:

img {
  max-width: 100%;
  height: auto;
}

Use o mesmo princípio em vídeo, iframe, mapa e embed. Quando a proporção varia, use contêiner com aspect-ratio coerente.

Não reserve um retângulo arbitrário apenas para zerar a métrica. Espaço vazio excessivo também prejudica a experiência.

Reserve espaço para conteúdo assíncrono

Banners de consentimento, mensagens de frete, avaliações, recomendações, anúncios e alertas podem chegar depois do conteúdo principal.

Escolha uma estratégia:

• reservar altura mínima baseada no conteúdo provável;
• usar overlay quando não cobrir controles ou conteúdo essencial;
• inserir abaixo da área já lida;
• renderizar skeleton com dimensões finais;
• substituir conteúdo dentro de um contêiner estável;
• adiar módulos não essenciais até fora do viewport.

Skeleton que muda de altura ao receber conteúdo apenas troca um shift por outro. Modele o estado final.

Não insira promoções acima do conteúdo

Uma faixa promocional injetada no topo depois do carregamento desloca toda a página. Se a campanha é necessária, renderize o espaço desde a resposta inicial ou use uma posição que não reordene o conteúdo já visível.

Cuidados semelhantes valem para:

• aviso de aplicativo;
• barra de frete;
• alerta de localização;
• pesquisa de satisfação;
• mensagem de login;
• atualização de preço.

Analise o ganho comercial do componente junto ao custo de instabilidade. A solução pode ser mudança de posição, não remoção.

Estabilize o carregamento de fontes

Fontes web podem alterar largura, altura e quebra de linha quando substituem a fonte inicial. O título cresce, um botão desce e o restante da página se move.

Reduza o risco:

• use famílias de fallback com métricas próximas;
• carregue apenas pesos necessários;
• faça subset de caracteres quando apropriado;
• sirva fontes com cache adequado;
• antecipe a fonte realmente crítica;
• use ajustes de métricas como size-adjust quando o projeto exigir;
• teste idioma, negrito e conteúdo longo.

font-display influencia quando a troca acontece, mas não elimina sozinho diferença métrica.

Evite medir layout durante mudanças

Padrões de layout thrashing alternam leitura e escrita no DOM, causando recalculações e estados intermediários. Agrupe leituras, depois escritas. Prefira classes e estilos que produzam a geometria final de uma vez.

Componentes que medem altura após montar podem piscar entre estados. Quando possível, derive dimensões do CSS ou forneça dados suficientes no servidor.

Animações e interações esperadas

Mudanças diretamente associadas a uma interação recente podem ser tratadas de forma diferente pela métrica. Isso não autoriza interfaces que fazem o usuário perder o contexto.

Um accordion pode expandir depois do clique, mas deve:

• manter foco previsível;
• não deslocar o controle para fora de alcance;
• preservar leitura;
• respeitar prefers-reduced-motion;
• usar animação que não bloqueie interação.

Para movimento visual sem recalcular layout, propriedades como transform e opacity costumam ser mais adequadas. Teste acessibilidade e composição.

Investigue anúncios e embeds

Slots de anúncio variam de tamanho e podem atualizar durante a sessão. Defina tamanhos aceitos, reserve o maior espaço razoável por breakpoint e evite colapsar o slot imediatamente quando não houver anúncio.

Embeds sociais e vídeos também chegam com dimensões próprias. Use wrapper estável e valide o estado de erro. Se o fornecedor muda o tamanho depois de carregar, considere isolamento ou alternativa de clique para carregar.

Capture shifts depois do carregamento

Teste uma jornada, não apenas a primeira dobra:

1. carregue a página;
2. aguarde consentimento e terceiros;
3. role lentamente;
4. abra menus, filtros e accordions;
5. altere orientação ou largura;
6. simule conteúdo longo;
7. espere atualizações assíncronas;
8. navegue como usuário recorrente.

Dados de campo próprios ajudam a identificar URLs e componentes que geram shifts tardios. Preserve privacidade e agregue resultados.

Evite correções cosméticas

Ocultar overflow pode impedir que o deslocamento seja visível sem resolver a causa. Fixar alturas enormes pode cortar conteúdo ou criar espaços vazios. Desativar módulos no teste e mantê-los em produção não melhora usuários reais.

A correção precisa preservar conteúdo, responsividade e acessibilidade.

Exemplo de ação verificável

Observação: após 1,5 segundo, a faixa de frete é inserida acima do título do produto e move toda a primeira dobra. Ação: renderizar o contêiner e a mensagem padrão no HTML, atualizando o texto dentro da mesma altura quando o CEP estiver disponível. Aceite: não há shift no carregamento, o conteúdo continua correto e leitores de tela recebem a atualização sem perder foco.

Depois da implementação, compare laboratório, campo e indicadores do componente. Uma faixa estável que deixa de ser compreendida não é sucesso.

CLS é uma métrica de previsibilidade. Corrigi-lo significa manter a interface coerente enquanto dados, mídia e componentes chegam — sem fazer o usuário perseguir o conteúdo pela tela.

Respostas diretas

Perguntas frequentes

Qual é um bom CLS?

A recomendação atual é CLS de até 0,1 no percentil 75 das visitas, separado entre mobile e desktop.

Toda animação aumenta CLS?

Não. Transformações e movimentos esperados após interação podem não contar da mesma forma. Ainda assim, animações precisam preservar legibilidade, foco e preferência por movimento reduzido.

width e height deixam a imagem sem responsividade?

Não. Os atributos definem a proporção intrínseca. CSS pode manter a imagem responsiva com largura máxima e altura automática.