Como Reduzir o Cumulative Layout Shift (CLS) para Melhorar a Nota no Google PageSpeed
Olá, amigo(a) desenvolvedor(a) ou dono de site! Se você já verificou seu site no Google PageSpeed Insights e viu aquela nota de desempenho caindo por causa do Cumulative Layout Shift (CLS), não se preocupe — isso é muito comum, mas totalmente corrigível. Aqui, o seu Sensei da GeHost vai te guiar com calma, passo a passo, como deixar seu site mais estável e mais amigável para o usuário — e, claro, com uma nota melhor no PageSpeed.
Dica do Sensei: CLS mede o quanto o conteúdo de uma página se move enquanto carrega. Se o usuário clica em um botão e ele "pula" para outro lugar, isso gera CLS alto. Evitar isso é essencial para experiência e SEO.
Passo 1: Entenda o que causa CLS
O CLS acontece quando elementos da página se movem durante o carregamento. Isso pode ser causado por:
- Imagens sem largura e altura definidas
- Fontes que carregam depois do conteúdo
- Widgets de anúncios ou vídeos que carregam por último
- Seções que se expandem depois de carregadas
Seu site pode estar com CLS alto por causa de algo simples — e isso é ótimo, porque é fácil de consertar.
Passo 2: Defina largura e altura em todas as imagens
Imagens que não têm tamanho definido podem "pular" para o lugar certo quando carregam — isso é um dos maiores causadores de CLS.
Abra seu arquivo HTML ou o editor de temas (como no WordPress, no tema Atual, no Elementor, etc.) e verifique todas as imagens. Para cada uma, adicione os atributos:
<img src="foto.jpg" alt="Descrição" width="600" height="400" />Se você não sabe as dimensões exatas, use um editor de imagem (como o Photoshop, Canva ou até o Paint) para verificar. Se for uma imagem em um site com CMS, o ideal é usar o sistema de media library com dimensões fixas.
Passo 3: Use o atributo `loading="lazy"` para imagens e vídeos
Isso não reduz CLS diretamente, mas ajuda a evitar que elementos carreguem no momento errado e causem movimentação.
Adicione o atributo loading="lazy" em todas as imagens e vídeos que não estão na tela inicial:
<img src="foto.jpg" alt="Descrição" width="600" height="400" loading="lazy" />Isso faz com que o navegador espere carregar esses elementos apenas quando o usuário rolar até eles — evitando bloqueios e movimentações no início.
Passo 4: Evite elementos de anúncios ou pop-ups que mudam de posição
Se você usa anúncios (Google AdSense, por exemplo), certifique-se de que eles têm tamanho fixo definido. Anúncios que mudam de tamanho ou aparecem de repente geram CLS alto.
Se você usa um pop-up ou banner de inscrição, coloque-o em uma seção com altura fixa e evite que ele "suba" ou "empurre" o conteúdo.
Dica do Sensei: Use o teste do Web.dev para simular como seu site se comporta com CLS. É grátis e mostra exatamente onde está o problema.
Passo 5: Use fontes com fallback e carregamento otimizado
Seus textos podem "pular" se a fonte principal demorar para carregar. Solução:
- Use fontes do Google Fonts com o parâmetro
display=swap - Exemplo:
https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap
Isso faz com que o texto apareça com uma fonte padrão (como Arial ou sans-serif) enquanto a fonte personalizada carrega — evitando o "pulo" de texto.
Passo 6: Teste e revise seu site
Após fazer as alterações:
- Salve as alterações no seu site
- Limpe o cache do navegador (ou use modo anônimo)
- Verifique no Google PageSpeed Insights novamente
- Veja se o CLS melhorou para "bom" (abaixo de 0,1)
Se ainda tiver problemas, pode ser que algum plugin ou script externo esteja causando o movimento. Nesse caso, use o Chrome DevTools (F12) e ative o "Layout Shift Regions" para ver exatamente onde está o problema.
Passo 7: Mantenha seu site limpo e organizado
Seu site é como um jardim: se você planta tudo sem espaço, ele cresce desordenado. Use:
- Layouts responsivos e com margens fixas
- Componentes com tamanho predefinido
- Evite scripts que alteram o DOM no último momento
Quanto mais previsível for o layout, menor será o CLS — e melhor será a experiência do usuário.
Conclusão: CLS é seu aliado, não seu inimigo
Reduzir o CLS não é só para melhorar a nota no PageSpeed. É para criar um site que o usuário ama — sem surpresas, sem pulos, sem frustração.
Se precisar de ajuda com a implementação, seu Sensei da GeHost está aqui. Acesse seu painel em painel.gehost.com.br e entre em contato com o suporte — e lembre-se: o suporte está disponível por 30 dias após a entrega do serviço.
Com carinho, seu Sensei da GeHost.