Velocidade
Como Corrigir o CLS: o Conteúdo que Pula na Tela
O que é o CLS, por que o conteúdo do site pula enquanto carrega e como corrigir as causas mais comuns: imagens, anúncios, banners e fontes.
Resumo Rápido
- O CLS mede quanto o conteúdo da página pula enquanto carrega. Bom é até 0,1.
- A causa é sempre a mesma: algo aparece ou muda de tamanho sem espaço reservado.
- Largura e altura nas imagens, espaço fixo para anúncios e banners, e cuidado com as fontes resolvem quase tudo.
O Que É o CLS
O CLS (Cumulative Layout Shift) é a métrica de estabilidade visual das Core Web Vitals. Ele mede os deslocamentos inesperados do conteúdo: o texto que desce quando uma imagem carrega, o botão que muda de lugar quando um anúncio aparece. Não é medido em segundos, mas numa pontuação: até 0,1 é bom, acima de 0,25 é ruim.
Além de pesar na avaliação do Google, o CLS irrita quem visita: é por causa dele que a pessoa toca no link errado.
As Causas e as Soluções
Imagens e vídeos sem dimensões
Sem largura e altura definidas, o navegador não sabe quanto espaço reservar e empurra o conteúdo quando a imagem chega. Coloque width e height em toda imagem e vídeo, mesmo que o CSS mude o tamanho depois:
<img src="/fotos/loja.webp" width="1200" height="800" alt="Fachada da loja">Com as duas medidas, o navegador calcula a proporção e reserva o espaço certo em qualquer largura de tela.
Anúncios, incorporações e widgets
Anúncios, vídeos do YouTube, mapas e widgets de avaliação chegam depois da página. Reserve um espaço fixo para eles, com altura mínima definida no CSS, para o resto da página não se mover quando aparecerem.
Banners e avisos inseridos no topo
Barra de cookies, aviso de frete grátis e pop-up de desconto que empurram a página para baixo geram deslocamento grande. Prefira barras que ficam sobre o conteúdo, fixas no rodapé, ou reserve o espaço desde o início.
Fontes que trocam de tamanho
Quando a fonte baixada chega e substitui a fonte provisória, o texto pode mudar de largura e altura. Use poucas fontes, carregue cedo as que aparecem no topo, ajuste a fonte provisória para ter medidas parecidas, ou use a fonte do sistema, que não troca nada.
Conteúdo carregado depois
Listas de produtos recomendados, comentários e blocos que chegam por JavaScript acima do conteúdo já visível empurram tudo. Coloque esses blocos abaixo, ou reserve o espaço.
Animações que mexem no layout
Animar altura, largura ou posição de elementos desloca o que está em volta. Para animações, use transformações e opacidade, que não mexem no layout.
Como Encontrar o Que Está Pulando
- O PageSpeed Insights lista, nos diagnósticos, os elementos que mais causaram deslocamento no teste.
- No Chrome, o painel de desempenho das ferramentas do desenvolvedor marca cada deslocamento na linha do tempo.
- Abra o site no celular, com internet lenta, e observe o carregamento. Muitos deslocamentos são visíveis a olho nu.
Deslocamento Depois do Toque Não Conta
Mudanças que acontecem logo depois de a pessoa tocar ou clicar, como abrir um menu, não entram no CLS. O que conta são os deslocamentos inesperados.
Perguntas Frequentes
O CLS no teste é zero, mas o Search Console mostra ruim. Por quê?
O teste de laboratório mede só o carregamento inicial. Nas visitas reais, a rolagem, os anúncios e os conteúdos que chegam depois também contam.
Lazy loading causa CLS?
Só se a imagem não tiver dimensões. Com largura e altura definidas, o espaço fica reservado e nada pula. Veja lazy loading.
Carrossel no topo atrapalha o CLS?
Pode atrapalhar, se ele muda de altura entre os slides ou é montado depois que a página aparece. Também costuma piorar o LCP.
Equipe IndexaJá
Escrito pela equipe do IndexaJá, que audita e otimiza sites para o Google com a meta de 100 em todo site. Publicado em 21 de outubro de 2026.