Encontre movimentos inesperados
O CLS não significa que todo movimento intencional fica de fora. A métrica desconsidera deslocamentos dentro de 500 ms após uma interação qualificada do usuário, mas uma resposta atrasada a uma interação ainda pode contar. Ela usa janelas de sessão, então inspecione as entradas reais de deslocamento de layout em vez de presumir que uma única animação explica a pontuação.
Como inspecionar
Use dados de campo para descobrir se o problema afeta visitantes reais e depois reproduza-o em um rastreamento de desempenho com marcadores de deslocamento de layout. Inspecione o elemento que se moveu e o elemento que causou o movimento; eles podem ser diferentes. Teste visitas sem cache e visitas repetidas, porque fontes e recursos em cache podem esconder um problema da primeira carga.
Como implementar ou melhorar
Reserve largura e altura, ou uma proporção de aspecto, para a mídia; aloque uma área fixa ou limitada para módulos dinâmicos e evite inserir conteúdo acima de um controle já visível. Se uma fonte alterar as métricas do texto, escolha um fallback compatível ou ajuste a estratégia de carregamento da fonte. Revise o foco do teclado e os breakpoints responsivos após cada mudança.
Limites e erros comuns
Não suprima transições legítimas disparadas pelo usuário só para melhorar a métrica. O objetivo é um layout previsível antes e durante a leitura, e não uma pontuação sintética desconectada da interface.
Uma verificação focada de CLS tem três etapas: carregamento a frio, estado de interação e breakpoint responsivo. No rastreamento do carregamento a frio, anote qual elemento se moveu e qual recurso tardio causou o movimento. No estado de interação, diferencie uma expansão iniciada pelo usuário de uma inserção inesperada acima do controle ativo. No breakpoint, teste se uma imagem, um espaço de anúncio ou um banner de consentimento perde sua geometria reservada. Uma correção concreta é definir largura e altura, ou uma proporção de aspecto, para o contêiner da imagem antes de os bytes dela chegarem, e depois confirmar que a grade, a ordem de foco e a posição de rolagem continuam estáveis em uma tela estreita. Não reserve espaço excessivo e arbitrário só para baixar a métrica; a página ainda precisa parecer intencional.