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 */
}

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.

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.