Como melhorar o CLS e evitar mudanças de layout
Melhore o CLS estabilizando imagens, fontes, incorporações, anúncios e conteúdo dinâmico do seu site.
Se o texto se move enquanto você lê, um botão muda de posição ou uma imagem empurra o restante da página para baixo, seu site tem um problema de estabilidade visual.
Esses movimentos inesperados são medidos pelo Cumulative Layout Shift (CLS), uma das Core Web Vitals do Google. Um resultado de 0,1 ou menos é bom; acima de 0,25 é considerado ruim.
O que é CLS?
CLS mede o deslocamento inesperado de elementos visíveis durante a visita. Um anúncio pode aparecer acima de um link no momento do clique, ou uma imagem grande pode mover o artigo quando termina de carregar.
A métrica usa o percentil 75 das visitas, separando celular e desktop. Assim, ela representa a experiência real das pessoas, e não apenas a velocidade de download de um arquivo.
Causas mais comuns
O navegador ainda não conhece o tamanho final de um elemento. As causas incluem imagens sem dimensões, vídeos e iframes sem espaço reservado, anúncios, widgets de terceiros, troca de fontes, banners inseridos depois do carregamento e conteúdo adicionado por JavaScript sem placeholder.
Estabilize imagens, incorporações e anúncios
Informe width e height nas imagens para que o navegador reserve a proporção correta:
<img src="exemplo.jpg" alt="Exemplo" width="1200" height="800">Você ainda pode manter a imagem responsiva com max-width: 100%; height: auto. Para vídeos, mapas, formulários e conteúdos sociais, use um contêiner com aspect-ratio: 16 / 9. Reserve também a altura prevista dos anúncios.
Conteúdo dinâmico e fontes
Avisos de cookies, promoções, resultados de busca, recomendações e respostas de APIs não devem empurrar conteúdo já visível. Reserve o espaço antecipadamente ou use skeletons e alturas mínimas previsíveis.
Uma fonte de fallback pode ter métricas diferentes da fonte web e alterar a quebra das linhas. Escolha uma alternativa semelhante, configure o carregamento com cuidado e considere size-adjust antes de remover uma fonte personalizada.
Animações e diagnóstico
Animar top, left, width, height ou margin altera o layout. Para movimento e escala, prefira transforms como transform: translateX(20px).
Use PageSpeed Insights, Lighthouse e Chrome DevTools. Dados de campo mostram dispositivos e redes reais; dados de laboratório ajudam no diagnóstico. Teste também rolagem, menus, consentimentos, carregamento adicional e widgets.
Uma hospedagem mais rápida não corrige o CLS automaticamente. Encontre primeiro o elemento que se move e então ajuste HTML, CSS, JavaScript, mídia ou serviços externos.
Perguntas frequentes
Qual é um bom CLS?
0,1 ou menos é bom, de 0,1 a 0,25 precisa de melhoria e acima de 0,25 é ruim.
O carregamento lazy causa CLS?
Não por si só. O problema acontece quando não há dimensões ou proporção para reservar espaço.
Melhorar o CLS melhora o SEO?
As Core Web Vitals são usadas pelos sistemas de classificação do Google, mas o CLS é apenas um dos muitos sinais.
Crie um site mais estável
O princípio é simples: sempre que possível, o navegador deve saber quanto espaço cada elemento precisa antes de ele aparecer. Reserve esse espaço, teste interações reais e acompanhe dados de campo e de laboratório.