CLS alto no WordPress: como corrigir o layout shift

Tipo Performance & Velocidade

Nome do erro CLS alto e layout shift EN: High CLS (Cumulative Layout Shift)

Severidade Grave

Descrição CLS alto no WordPress é quando o Cumulative Layout Shift, a medida de quanto os elementos da página "pulam" durante o carregamento, fica acima de 0,1. Costuma vir de imagens e iframes sem dimensões reservadas, fontes que trocam de tamanho e anúncios ou banners injetados sem espaço fixo.

O que é o CLS alto no WordPress?

O CLS alto no WordPress é uma falha de Core Web Vitals que mede a estabilidade visual da página. O Cumulative Layout Shift soma todos os deslocamentos inesperados de conteúdo enquanto a página carrega: quando uma imagem aparece e empurra o texto para baixo, ou um banner injetado desloca o botão que o usuário ia clicar. A meta do Google é CLS abaixo de 0,1; entre 0,1 e 0,25 é “precisa melhorar” e acima de 0,25 é “ruim”. A correção é reservar antecipadamente o espaço de cada elemento que carrega depois.

Como identificar

O conteúdo da página “pula” para baixo enquanto carrega, como se algo empurrasse o texto.
O PageSpeed Insights marca o CLS acima de 0,1 no relatório de Core Web Vitals.
O Search Console acusa URLs com “CLS maior que 0,1” no relatório de Core Web Vitals.
O visitante clica num botão e o layout desloca no último instante, fazendo-o errar o clique.

Como prevenir

Sempre declare width e height (ou aspect-ratio) em imagens, vídeos e iframes ao publicar
Mantenha font-display: swap e preload da fonte principal no tema desde o início
Reserve um contêiner de altura fixa para qualquer anúncio, embed ou widget injetado por JavaScript

Causa

Imagens e vídeos sem atributos width e height (ou aspect-ratio), então o navegador não reserva o espaço antes de carregar.
Fontes web sem font-display: swap, causando troca de fonte (FOUT/FOIT) que muda a altura do texto.
Anúncios, banners ou embeds injetados por JavaScript sem um contêiner de tamanho fixo reservado.
Conteúdo inserido acima do que já está visível (avisos de cookie, sliders) empurrando o resto da página.
iframes (mapas, vídeos) sem dimensões definidas, ocupando espaço só depois de carregar.

Como resolver

Identifique os elementos que deslocam: no PageSpeed Insights, abra o diagnóstico "Evite grandes deslocamentos de layout" para ver quais elementos mais contribuem para o CLS.
Defina width e height em todas as mídias: garanta que imagens, vídeos e iframes tenham largura e altura (ou aspect-ratio) declaradas, para o navegador reservar o espaço antes do carregamento.
Estabilize as fontes web: use font-display: swap e faça preload da fonte principal. Defina uma fonte de fallback com métricas próximas para reduzir a mudança de altura quando a fonte final carrega.
Reserve espaço para anúncios e embeds: envolva banners, anúncios e widgets de terceiros em um contêiner com min-height fixo, para o slot não "nascer" do zero e empurrar o conteúdo.
Evite injetar conteúdo acima da dobra: avisos de cookie e barras de topo devem ocupar espaço reservado ou usar position fixed/sticky, em vez de empurrar o conteúdo já renderizado.
Meça de novo: rode o PageSpeed e confira o CLS no laboratório; depois acompanhe os dados de campo no Search Console, que refletem usuários reais.

CSS

/* Reserva o espaco das midias e dos slots, eliminando o deslocamento */
img, video, iframe {
  max-width: 100%;
  height: auto;          /* respeita o width/height do HTML e evita pulo */
}

/* Slot de anuncio/embed com altura minima reservada antes do carregamento */
.ad-slot, .embed-wrapper {
  min-height: 280px;
  display: block;
}

/* Fonte web sem trocar a altura do texto durante o carregamento */
@font-face {
  font-family: 'MinhaFonte';
  src: url('/wp-content/fonts/minhafonte.woff2') format('woff2');
  font-display: swap;
}

Perguntas frequentes

Qual é o valor ideal de CLS no WordPress?

A meta do Google é CLS abaixo de 0,1 com dados de campo. Entre 0,1 e 0,25 o status é "precisa melhorar" e acima de 0,25 é considerado ruim, prejudicando a experiência e o ranqueamento.

Por que minha página "pula" enquanto carrega?

Porque algum elemento carrega sem ter o espaço reservado e empurra o resto: uma imagem sem width/height, uma fonte que troca de tamanho ou um anúncio injetado depois. Reservar o espaço de cada um elimina o salto.

Definir width e height nas imagens resolve o CLS?

Resolve boa parte. Com as dimensões declaradas, o navegador reserva o espaço da imagem antes de ela carregar, então o texto ao redor não é empurrado. Faltam ainda fontes, anúncios e embeds, que precisam do mesmo cuidado.

Como as fontes web causam layout shift?

Quando a fonte final carrega depois da fonte de fallback e tem altura diferente, o texto muda de tamanho e desloca o conteúdo. Use font-display: swap, preload da fonte e uma fonte de fallback com métricas próximas para minimizar o efeito.

Anúncios e banners aumentam o CLS?

Sim, são uma das maiores causas. Slots de anúncio injetados por JavaScript "nascem" do tamanho zero e empurram o conteúdo ao carregar. Reserve um contêiner com min-height fixo para o slot antes de ele ser preenchido.

Corrigi o CLS mas o Search Console ainda aponta o problema. Por quê?

O Search Console usa dados de campo (CrUX), uma média de 28 dias de usuários reais. As correções aparecem na hora no teste de laboratório do PageSpeed, mas o relatório de campo só atualiza após algumas semanas de coleta.

Grave

Como corrigir LCP alto no WordPress (Core Web Vitals)

LCP alto no WordPress é quando o Largest Contentful Paint, o tempo até o maior elemento visível (geralmente a imagem ou o título do topo) ser renderizado, passa de 2,5 segundos. Costuma vir de servidor lento (TTFB), imagem hero pesada ou recursos que bloqueiam a renderização.

Atenção

Como corrigir a falha de backup do banco no WP-Optimize no WordPress

A falha de backup do banco no WP-Optimize acontece quando o backup que o plugin tira antes de otimizar (via motor do UpdraftPlus) não chega ao fim por estouro de memória PHP, timeout de execução, falta de espaco em disco ou ausencia de permissão de escrita na pasta wp-content/updraft.

Grave

Como corrigir a página de login inacessivel pelo Perfmatters

A página de login inacessivel pelo Perfmatters login url acontece quando o recurso Change Login URL renomeia a entrada do painel e você perde a URL nova, já que o /wp-admin e o /wp-login.php passam a responder com a mensagem This has been disabled. Sem a string personalizada salva, não ha como autenticar pela rota padrão.

Atenção

Como corrigir a compressao Gzip desativada no WordPress

A compressao Gzip desativada no WordPress significa que o servidor entrega HTML, CSS e JavaScript sem compactar, deixando as respostas maiores e o carregamento mais lento. O PageSpeed Insights sinaliza isso na auditoria 'Enable text compression', e a causa quase sempre e o módulo de compressao do servidor ausente ou sem regra no htaccess.

Atenção

Como corrigir o erro Rocket-Nginx Not Working no WordPress

O erro Rocket-Nginx not working acontece quando o Nginx deixa de servir as páginas em cache do WP Rocket direto do disco, geralmente porque o include do default.conf não esta no server block, o rocket-parser.php não foi rodado após editar o .ini, ou alguma condicao de bypass (query string, cookie, requisicao POST) impede o HIT.

Grave

Como corrigir o WP Rocket que não gera cache

WP Rocket não gera cache é quando o plugin está ativo mas não cria o arquivo HTML estático da página, então o visitante recebe a versão dinâmica gerada pelo PHP a cada acesso. Confirma-se pela ausência do comentário "Debug: cached@" no fim do código-fonte da página, sinal de que aquela URL não foi cacheada.

Setores

Extensões

Integrações

Como corrigir CLS alto e layout shift no WordPress

O que é o CLS alto no WordPress?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir LCP alto no WordPress (Core Web Vitals)

Como corrigir a falha de backup do banco no WP-Optimize no WordPress

Como corrigir a página de login inacessivel pelo Perfmatters

Como corrigir a compressao Gzip desativada no WordPress

Como corrigir o erro Rocket-Nginx Not Working no WordPress

Como corrigir o WP Rocket que não gera cache

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos