Como reduzir o Cumulative Layout Shift (CLS) apontado pelo Google PageSpeed

Como Reduzir o Cumulative Layout Shift (CLS) no Google PageSpeed — Guia Prático para Clientes GeHost

Olá, amigo(a) desenvolvedor(a) ou dono(a) de site! Se você já recebeu um relatório do Google PageSpeed Insights e viu um aviso sobre Cumulative Layout Shift (CLS), relaxa — você não está sozinho. Esse é um dos desafios mais comuns no mundo da performance web… e a boa notícia é: é totalmente resolvível.

Como seu Sensei da GeHost, vou te guiar passo a passo com dicas simples, humanas e eficazes — tudo dentro do que você já tem no seu plano de hospedagem. Vamos nessa?

O que é Cumulative Layout Shift (CLS)?

Imagine que você está lendo um artigo… e de repente, o texto pula para cima, uma imagem aparece do nada, ou um botão muda de lugar enquanto você clica. Isso é o CLS: o layout do seu site se movimenta durante o carregamento.

Esse comportamento atrapalha a experiência do usuário e é penalizado pelo Google. Um CLS alto pode afetar seu ranking no buscador — então, resolver isso é estratégico.

Dica Sensata: CLS bom é próximo de 0. Se estiver acima de 0,3, o Google já aponta como "não ideal".

Passo a Passo: Como Resolver CLS no seu Site (sem precisar de código avançado)

Na GeHost, você tem controle total sobre o conteúdo do seu site. Vamos usar isso a seu favor. Siga esses passos com calma — cada um é um passo importante:

1. Defina tamanhos fixos para imagens e vídeos

   Seu site não pode "chutar" o layout com elementos que carregam depois. Sempre que possível, defina width e height nas imagens e vídeos no HTML.

   Exemplo:

   <img src="foto.jpg" width="600" height="400" alt="Descrição" />

   Isso avisa o navegador: “Espere, essa imagem ocupa 600px de largura e 400px de altura”. Assim, o layout não salta.

2. Use o atributo loading="lazy" para imagens

   Imagens que aparecem abaixo da dobra (ou seja, fora da tela inicial) devem ser carregadas apenas quando o usuário rola até elas.

   Adicione isso no código da imagem:

   <img src="foto.jpg" width="600" height="400" loading="lazy" alt="Descrição" />

   Isso reduz o tráfego inicial e evita que o layout se mova ao carregar imagens de fundo.

3. Evite elementos de layout que carregam dinamicamente

   Se seu site tem um anúncio, banner ou widget que aparece depois de carregar, ele pode causar CLS. Solução: reserve espaço para ele no HTML.

   Exemplo: se o anúncio tem 300px de largura e 250px de altura, coloque um espaço vazio com essas dimensões no código antes do anúncio carregar.

4. Use fontes com fallback e carregamento rápido

   Fontes customizadas (como Google Fonts) podem fazer o texto "pular" ao carregar. Solução: use o font-display: swap; no CSS.

   Exemplo no arquivo CSS:

   @font-face {
     font-family: 'MinhaFonte';
     src: url('fonte.woff2') format('woff2');
     font-display: swap;
   }

   Isso garante que o texto apareça com uma fonte padrão enquanto a fonte customizada carrega.

5. Evite scripts que alteram o DOM no carregamento

   Se você tem um script que adiciona um botão ou conteúdo depois que a página já está visível, ele pode causar CLS. Coloque esses elementos no HTML inicial, ou use async ou defer nos scripts.

   Exemplo:

   <script src="script.js" defer></script>

   Isso evita que o script bloqueie o carregamento e altere o layout no último momento.

Como verificar se o CLS melhorou?

Depois de fazer essas alterações:

• Volte ao Google PageSpeed Insights.
• Insira o URL do seu site.
• Verifique o novo valor de CLS — ele deve estar próximo de 0.

Se ainda estiver alto, pode ser que algum elemento ainda esteja se movendo. Nesse caso, use a ferramenta Chrome DevTools (F12) → aba "Performance" → grave uma sessão de carregamento. Ela mostra exatamente onde o layout está se movendo.

Se precisar de ajuda: seu suporte está aqui

Se você não tem certeza como editar o código do seu site, ou se está usando um CMS como WordPress, Joomla ou outro, não se preocupe.

Seu suporte da GeHost está disponível por 30 dias após a entrega — e você pode pedir ajuda por meio do Painel do Cliente.

É só entrar no painel, clicar em "Suporte" e descrever o problema. Nós te ajudamos a ajustar o código com cuidado — sem pressa, com carinho.

Resumo: O que você precisa lembrar

• Defina width e height para todas as imagens e vídeos.
• Use loading="lazy" para imagens abaixo da dobra.
• Reserve espaço para elementos que carregam depois (anúncios, banners).
• Use font-display: swap; para fontes customizadas.
• Evite scripts que alteram o layout no carregamento — use defer ou async.

Com esses ajustes simples, seu site vai ficar mais estável, mais rápido e mais querido pelo Google — e, claro, pelos seus visitantes.

Seu site é uma obra de arte. Deixe ele se mostrar com elegância. 💫

Com carinho, seu Sensei da GeHost