Corrigir a Mudança Cumulativa de Layout em 2026: Passo a Passo

As pontuações de Mudança Cumulativa de Layout (CLS) acima de 0,1 são classificadas como "precisa de melhorias" pelos limites do Core Web Vitals do Google, e as pontuações acima de 0,25 são consideradas "ruins". Corrigir o CLS antes que ele chegue aos usuários é mais barato do que recuperar o posicionamento perdido após o fato — comece com a medição e, em seguida, corrija as causas-raiz em ordem de prioridade.

O Que É Mudança Cumulativa de Layout?#

CLS é uma métrica do Core Web Vitals que quantifica o quanto o conteúdo visível da página se move inesperadamente durante todo o ciclo de vida de uma visita à página. Cada mudança de layout individual contribui com uma pontuação igual à fração de impacto (quanto do viewport se moveu) multiplicada pela fração de distância (o quão longe ele se moveu). O Google agrega esses valores em uma pontuação de janela de sessão e relata a pior janela.

Uma pontuação de 0 significa que nada se moveu. Uma pontuação de 0,1 ou inferior é "boa". Qualquer coisa acima disso é uma responsabilidade mensurável de UX e posicionamento.

Por Que o CLS Ainda Importa em 2026?#

O Google usa dados de campo do Chrome User Experience Report (CrUX) — não apenas dados de laboratório — para avaliar o Core Web Vitals para posicionamento. O CLS é um dos três sinais na atualização da Experiência da Página, juntamente com o Largest Contentful Paint (LCP) e o Interaction to Next Paint (INP).

Além do posicionamento, o CLS alto causa danos reais: os usuários tocam acidentalmente no botão errado, os formulários são redefinidos e o fluxo de leitura é interrompido no meio da frase. Esses resultados aumentam as taxas de rejeição e reduzem a conversão.

Como Você Mede o CLS Com Precisão?#

Use ferramentas de laboratório e de campo, porque elas capturam diferentes modos de falha.

Ferramentas de laboratório (para depuração):

• Painel de Desempenho do Chrome DevTools — grave o carregamento de uma página e inspecione os clusters de Mudança de Layout na faixa de Experiência
• Lighthouse (integrado ao DevTools ou CLI) — sinaliza o CLS e links para elementos contribuintes
• WebPageTest — fornece visualização de tira de filme para que você possa verificar visualmente quando ocorrem as mudanças

Ferramentas de campo (para dados de usuários reais):

• Google Search Console → relatório do Core Web Vitals — mostra o status do CLS agrupado por tipo de URL
• PageSpeed Insights — combina dados de campo do CrUX com dados de laboratório do Lighthouse na mesma tela
• Biblioteca JavaScript Web Vitals (web-vitals pacote npm) — permite registrar o CLS em sua própria análise

Sempre priorize a correção de URLs sinalizados como "ruins" no Search Console primeiro, porque eles afetam o posicionamento diretamente.

O Que Causa o CLS Alto?#

A grande maioria dos problemas de CLS se enquadra em um pequeno conjunto de causas-raiz.

Imagens e vídeos sem dimensões explícitas

Quando o navegador não conhece as dimensões de uma imagem antes de carregá-la, ele aloca espaço zero. A imagem então empurra o conteúdo para baixo quando chega. Correção: sempre defina os atributos width e height nos elementos <img> e <video>, e use CSS aspect-ratio como um fallback.

Anúncios, incorporações e iframes sem espaço reservado

Os slots de anúncios de terceiros e as incorporações sociais injetam conteúdo de forma assíncrona. O navegador não tem aviso prévio de seu tamanho. Correção: reserve a altura máxima esperada do slot com um placeholder CSS antes que o anúncio seja carregado.

Fontes da Web causando FOUT ou FOIT

Flash of Unstyled Text (FOUT) ou Flash of Invisible Text (FOIT) causam o reflow do texto quando a fonte personalizada é trocada, deslocando os elementos circundantes. Correção: use font-display: optional para fontes não críticas ou font-display: swap combinado com os descritores size-adjust e ascent-override para corresponder as métricas de fallback à fonte personalizada.

Conteúdo injetado dinamicamente acima do conteúdo existente

Banners, avisos de consentimento de cookies e cabeçalhos "fixos" inseridos acima da dobra após a renderização inicial empurram a página para baixo. Correção: pré-renderize esses elementos no lado do servidor ou use CSS position: fixed / sticky para que eles se sobreponham em vez de deslocar o conteúdo.

Animações usando propriedades CSS que acionam o layout

Animar top, left, width, height ou margin força o recálculo do layout e contribui para o CLS. Correção: anime apenas transform e opacity, que são compostos na GPU e não acionam o layout.

Como Você Corrige o CLS Relacionado à Imagem?#

Esta é a correção de maior impacto para a maioria dos sites.

1. Audite todas as tags <img> — confirme se os atributos width e height estão presentes com as dimensões intrínsecas em pixels.
2. Adicione CSS img { height: auto; } globalmente para que o dimensionamento responsivo ainda funcione, mesmo quando as dimensões explícitas são definidas.
3. Para imagens responsivas usando srcset, defina as maiores dimensões como os atributos width/height — o navegador usa a proporção, não o tamanho literal.
4. Para elementos <picture> com cortes de direção de arte em diferentes breakpoints, use a propriedade CSS aspect-ratio por breakpoint em um bloco <style>.
5. Para imagens com carregamento lento abaixo da dobra, ainda inclua as dimensões — o carregamento lento atrasa a busca, mas não a alocação de espaço.

Como Você Corrige o CLS Relacionado à Fonte?#

O CLS de troca de fonte é sutil, mas mensurável, especialmente em páginas com muito texto.

1. Hospede as fontes sempre que possível para eliminar a latência de pesquisa de DNS que atrasa a disponibilidade da fonte.
2. Use <link rel="preload" as="font"> para a fonte do corpo principal para que ela chegue antes da primeira pintura.
3. Adicione font-display: optional para fontes decorativas que não são críticas para o layout — o navegador usa o fallback se a fonte não estiver em cache, evitando qualquer troca.
4. Use os descritores CSS size-adjust, ascent-override e descent-override dentro de @font-face para corresponder as métricas da sua fonte de fallback à fonte personalizada, eliminando o reflow na troca.
5. Teste com a guia Rede limitada para Slow 3G para reproduzir os piores cenários de troca.

Como Você Corrige o CLS de Anúncios e Terceiros?#

O conteúdo de terceiros é a fonte de CLS mais difícil de controlar porque você não possui o código.

1. Reserve dimensões de slot explícitas. Envolva cada anúncio ou incorporação em um contêiner com um min-height fixo que corresponda ao maior tamanho criativo esperado.
2. Use um placeholder CSS de esqueleto. Um bloco de fundo cinza do mesmo tamanho do anúncio esperado evita uma mudança abrupta de conteúdo em branco.
3. Carregue scripts de terceiros com async ou defer. Scripts que bloqueiam a thread principal atrasam o ponto em que o espaço reservado é preenchido, estendendo a janela de mudança.
4. Audite com o recurso "Bloquear" do WebPageTest. Bloqueie domínios de terceiros individuais para isolar qual script causa qual mudança.
5. Considere mover banners de consentimento e avisos de cookies para modais de sobreposição em vez de banners na parte superior da página que deslocam o conteúdo.

Como Você Usa o bfcache para Evitar o CLS na Navegação?#

O back-forward cache (bfcache) restaura um snapshot de página totalmente renderizado quando os usuários navegam para trás ou para frente, eliminando as mudanças de layout causadas pelo recarregamento de conteúdo dinâmico. A maioria dos navegadores modernos suporta bfcache, mas as páginas com listeners de evento unload, cabeçalhos Cache-Control: no-store ou transações IndexedDB em andamento não são elegíveis.

Para maximizar a elegibilidade do bfcache:

• Remova todos os listeners de evento unload; substitua por pagehide
• Evite Cache-Control: no-store em páginas que não contêm dados confidenciais
• Feche as conexões IndexedDB abertas antes que o usuário navegue

Esta é uma prioridade de 2025–2026 porque o Google agora mede o CLS nas navegações, não apenas nos carregamentos iniciais.

Como Você Valida as Correções Antes de Implantar?#

Nunca envie correções de CLS às cegas — verifique em um ambiente de staging primeiro.

1. Execute o Lighthouse no URL de staging e confirme se a pontuação de CLS cai para 0,1 ou abaixo.
2. Grave um perfil de Desempenho no Chrome DevTools e confirme se nenhuma entrada de Mudança de Layout aparece na faixa de Experiência durante a jornada crítica do usuário.
3. Use a API PerformanceObserver com type: 'layout-shift' para registrar entradas de mudança individuais durante o teste de QA:

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log('Valor da mudança de layout:', entry.value, entry);
    }
  }
});
observer.observe({ type: 'layout-shift', buffered: true });

4. Após a implantação, monitore o relatório do Core Web Vitals do Search Console. Os dados de campo normalmente são atualizados em 28 dias à medida que novos dados do CrUX são coletados.

Qual É Uma Boa Meta de Pontuação de CLS para 2026?#

Aponte para 0,1 ou abaixo. Muitos sites de alta qualidade atingem 0,05 ou menos. O teto prático para "nenhuma mudança visível" que a maioria dos usuários percebe é de aproximadamente 0,05 — acima disso, movimentos sutis tornam-se perceptíveis, especialmente em dispositivos móveis, onde as frações de viewport são maiores em termos de pixels absolutos.

Priorize o CLS móvel separadamente do desktop. Os sinais de posicionamento do Google são extraídos de dados CrUX móveis para páginas indexadas para dispositivos móveis, e os viewports móveis tornam cada mudança de layout mais visualmente impactante.

Ordem de Prioridade de Correção de CLS#

Quando o tempo é limitado, corrija nesta ordem com base na frequência e no impacto:

1. Imagens sem dimensões — impacto mais amplo, correção mais fácil
2. Reflow de troca de fonte — alto impacto em páginas com muito texto
3. Conteúdo dinâmico acima da dobra (banners, avisos) — interrupção visual imediata
4. Reserva de slot de anúncio e incorporação — difícil, mas essencial para sites com suporte de anúncios
5. Animações que acionam o layout — geralmente menor contribuição de CLS, mas vale a pena auditar
6. Elegibilidade para bfcache — prioridade moderna, vitórias fáceis com a remoção do listener unload