Como Reduzir CLS: Eliminando os Saltos de Layout da Sua Página

CLS (Cumulative Layout Shift) mede a instabilidade visual da página - quanto o conteúdo “pula” durante o carregamento. Meta: abaixo de 0.1. É a métrica que mais incomoda os usuários visivelmente, pois causa cliques acidentais e perda de contexto de leitura.

O que causa o layout shift

Um layout shift acontece quando um elemento visível muda de posição inesperadamente. As causas mais comuns:

1. Imagens sem dimensões: o navegador não reserva espaço e o conteúdo ao redor pula quando a imagem carrega
2. Ads e embeds dinâmicos: inseridos no DOM sem espaço reservado
3. Fontes web: FOUT (Flash of Unstyled Text) causa recálculo de layout
4. Conteúdo injetado por JavaScript: banners, notificações, pop-ups que aparecem sobre conteúdo existente
5. Animações não compostas: animações CSS que usam propriedades que disparam reflow

Como identificar shifts problemáticos

Chrome DevTools - aba Performance:

1. F12 > Performance > Record
2. Recarregue a página
3. Na gravação, clique no “Experience” row
4. Shifts aparecem como blocos vermelhos marcados com “Layout Shift”
5. Clique no shift para ver qual elemento causou e quanto contribuiu para o CLS

PageSpeed Insights: Na seção Diagnostics > “Avoid large layout shifts”, mostra os shifts mais impactantes.

Correções para cada causa

1. Imagens sem dimensões (mais comum)

Problema:

<img src="produto.jpg" alt="Produto">

Sem width e height, o navegador não sabe quanto espaço reservar antes de carregar a imagem.

Solução:

<img src="produto.jpg" width="800" height="600" alt="Produto">

Mesmo com CSS responsivo, definir as dimensões no HTML mantém o aspect ratio calculado:

img {
  width: 100%;
  height: auto; /* mantém proporção do aspect ratio do HTML */
}

A compressão e os formatos modernos também entram nessa conta; o guia de otimização de imagens mostra como reduzir peso sem perder qualidade.

2. Ads e banners dinâmicos

Problema: um banner de propaganda é inserido no topo da página depois que o usuário já começou a ler, empurrando o conteúdo para baixo.

Solução: reserve o espaço para o ad antes de carregá-lo:

.ad-container {
  min-height: 250px; /* altura mínima do ad */
  width: 100%;
}

Para Google AdSense, configure o tamanho fixo do ad slot.

3. Fontes web (FOUT)

Problema: a fonte web demora para carregar, então o texto é renderizado com a fonte fallback (diferente em tamanho), depois pula quando a fonte real carrega.

Solução 1 - font-display: optional

@font-face {
  font-family: 'MinhaFonte';
  src: url('fonte.woff2');
  font-display: optional; /* não mostra texto até fonte carregar, depois não troca */
}

Solução 2 - preload da fonte

<link rel="preload" href="fonte.woff2" as="font" type="font/woff2" crossorigin>

Solução 3 - size-adjust para fallback (mais avançado)

@font-face {
  font-family: 'FallbackAjustado';
  src: local('Arial');
  size-adjust: 92%; /* ajusta para ter tamanho similar à fonte real */
}

4. Conteúdo injetado por JavaScript

Notificações de cookies, banners de promoção, pop-ups que aparecem acima do conteúdo após o carregamento causam CLS.

Soluções:

• Reserve espaço para o elemento antes de ele aparecer
• Use position: fixed ou position: sticky para elementos que aparecem por cima (não empurram conteúdo)
• Adie a exibição para depois da interação do usuário (scroll, clique)

5. Animações que causam reflow

Animações CSS que mudam width, height, top, left, margin ou padding causam reflow e podem contribuir para CLS.

Prefira animações com:

• transform: translate() (para mover elementos)
• transform: scale() (para redimensionar)
• opacity (para fade)

Essas propriedades são animadas na GPU sem afetar o layout dos outros elementos.

Como medir CLS com dados de campo

O PageSpeed Insights mostra dados de laboratório e dados de usuários reais. O laboratório indica o que corrigir; o campo mostra o que o Google efetivamente considera no ranking. A diferença importa porque o CLS varia conforme a conexão, o aparelho e o conteúdo que o visitante vê.

Para acompanhar de perto:

1. Abra o PageSpeed Insights e alterne entre “Celular” e “Computador”.
2. Confira o bloco de dados de campo (Core Web Vitals) e o de laboratório (Diagnostics).
3. No Chrome DevTools, use a aba Performance com “Web Vitals” marcado para ver os shifts no momento em que ocorrem.
4. No Search Console, acompanhe o relatório de Core Web Vitals por grupo de URLs.

O Search Console trabalha com uma janela móvel de 28 dias. Uma correção publicada hoje pode levar semanas para aparecer nos dados de campo, mesmo já estando visível no laboratório. Por isso, valide no PageSpeed Insights e no DevTools antes de considerar o problema resolvido.

Casos comuns em sites brasileiros

Widget de WhatsApp que abre no topo. Algumas soluções de chat injetam um iframe depois do carregamento e empurram o conteúdo. Use posição fixa no canto da tela, nunca inserção no topo do fluxo.

Banner de promoção com altura variável. Se a imagem do banner tem proporção diferente da reservada, a página pula quando ela carrega. Defina uma altura fixa para o contêiner e use object-fit: cover.

Aviso de cookies que entra antes do conteúdo. Muitos scripts de consentimento inserem uma faixa no topo e empurram tudo para baixo. Prefira a faixa fixa na parte inferior ou reserve o espaço antes da renderização.

Fonte de ícones carregada por CSS. Ícones que trocam de tamanho ao carregar deslocam botões e menus. Carregue os ícones como SVG embutido ou reserve as dimensões.

O ajuste mais comum e mais barato continua sendo declarar width e height em toda imagem e reservar espaço para qualquer elemento que apareça depois do primeiro carregamento.

Para se aprofundar

• Guia completo de performance e Core Web Vitals
• Core Web Vitals para SEO
• Como melhorar o LCP

Fontes e referências

• web.dev: Cumulative Layout Shift: definição, causas e técnica de medição do CLS.
• web.dev: Core Web Vitals: métricas oficiais e metas de aprovação.

FAQ

Meu CLS é 0.12 - precisa melhorar?

Sim. A meta do Google é abaixo de 0.1 para ser considerado “Bom”. Entre 0.1 e 0.25 é “Precisa melhorar”. Melhorar de 0.12 para 0.08 é um ajuste razoavelmente simples na maioria dos casos.

CLS 0 é possível?

Sim, em páginas sem imagens carregadas externamente, sem fontes web, sem ads e com conteúdo totalmente estático. Sites simples e bem construídos frequentemente têm CLS 0.

Banners de cookies sempre causam CLS?

Se aparecem empurrando o conteúdo (inseridos no topo da página após o carregamento), sim. Banners de cookies em posição fixa (fixed bottom) não causam CLS porque não movem o conteúdo existente.

Depois de corrigir CLS no PageSpeed, quanto tempo até melhorar no Search Console?

O Search Console usa dados de campo coletados de usuários reais durante 28 dias. Após corrigir o CLS, pode levar até 28 dias para os dados no Search Console refletirem a melhoria. Use o PageSpeed Insights para validação imediata das correções.