CLS: por que o seu site "pula" enquanto carrega e como parar com isso

Poucas coisas irritam mais do que um texto que desce de repente enquanto você lê, ou um botão que muda de lugar no instante do toque. O Google chama isso de CLS (Cumulative Layout Shift) e usa como fator de experiência. Abaixo de 0,1 é bom; acima de 0,25, ruim.

Causa 1: imagens sem dimensões

Sem width e height, o navegador não sabe quanto espaço reservar e empurra tudo quando a imagem chega.

<img src="/foto.webp" width="800" height="600" alt="..." />

Com CSS height: auto, ela continua responsiva e o espaço fica reservado.

Causa 2: fontes que trocam

A página aparece com uma fonte do sistema e, ao carregar a fonte da marca, o texto muda de largura e tudo se move. Os ajustes estão em Fontes web sem travar a página: font-display, subset e auto-hospedagem.

Causa 3: conteúdo injetado no topo

Banners de cookies, avisos e barras promocionais que surgem empurrando a página. Reserve o espaço desde o início ou use sobreposição fixa.

Causa 4: embeds e anúncios

Vídeos, mapas e widgets de terceiros chegam depois e com tamanho desconhecido. Envolva cada um num contêiner com proporção definida — o passo a passo está em Embeds, mapas e vídeos: como incorporar sem destruir a performance.

Causa 5: carregamento sem esqueleto

Listas que aparecem do nada, empurrando o rodapé. Skeletons com o tamanho final resolvem e ainda melhoram a percepção de velocidade (Feedback assíncrono: por que trocar spinners genéricos por skeleton screens).

Como encontrar o culpado

No Chrome, o painel Performance destaca as mudanças de layout. O PageSpeed Insights também aponta os elementos que mais se moveram. Comece pelos maiores.

Fecha a tríade

O CLS é uma das três métricas do Core Web Vitals; as outras são LCP e INP — o panorama completo está em Como otimizar a performance de aplicações React e React Native para passar no Core Web Vitals.

Layout estável é padrão nos sites da We Codex. Veja também Performance WPO ou fale com a gente.