CLS mede deslocamentos inesperados de conteúdo visível. Um botão que muda de posição enquanto a pessoa tenta tocar nele pode causar uma experiência ruim mesmo que a página carregue depressa. Um bom valor de CLS é 0,1 ou menos em pelo menos 75% das visitas, segmentadas por dispositivo; uma auditoria local isolada não representa esse conjunto de visitas. Veja a definição e as ferramentas de CLS.
1. Reproduza e encontre o elemento
Abra uma página representativa em dispositivo e ambiente registrados. Grave a navegação no painel Performance do Chrome e examine os marcadores de layout shift e elementos envolvidos. Compare carregamento inicial com interações posteriores; dados de campo e laboratório descrevem condições distintas.
2. Corrija a causa observada
| Causa frequente | Correção a investigar |
|---|---|
| Mídia ou iframe sem espaço reservado | Informar proporção/dimensões ou reservar um contêiner |
| Banner inserido acima do texto | Reservar espaço ou exibir sem empurrar conteúdo |
| Fonte tardia com métricas diferentes | Ajustar fallback e estratégia de carregamento |
| Conteúdo injetado após interação | Inserir em região previsível sem mover controles importantes |
Não force alturas fixas sem considerar telas pequenas, zoom e texto ampliado. Um espaço reservado deve acomodar conteúdo real e permanecer responsivo.
3. Meça depois em condições comparáveis
Repita a ação, dispositivo e rota; confira se a mudança reduziu o deslocamento sem ocultar conteúdo ou quebrar interações. Para experiência em campo, use relatórios de usuários reais quando disponíveis e avalie percentis, não apenas o melhor teste.
4. Evite otimização cega
CLS baixo em uma captura não garante estabilidade após anúncios, consentimento, navegação ou personalização. Registre o elemento, evidência, correção e estado que foi testado. Se a fonte for a causa, veja como otimizar fontes web; para investigar outros sintomas, consulte diagnóstico de lentidão.