Como corrigir CLS alto e layout shift no WordPress
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.
/* 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?
Por que minha página "pula" enquanto carrega?
Definir width e height nas imagens resolve o CLS?
Como as fontes web causam layout shift?
Anúncios e banners aumentam o CLS?
Corrigi o CLS mas o Search Console ainda aponta o problema. Por quê?
Como corrigir a integração de CDN do WP Rocket que não funciona
WP Rocket CDN não funciona é quando a opção Content Delivery Network está ativa mas o plugin não reescreve as URLs dos arquivos estáticos, então imagens, CSS e JS continuam saindo pelo domínio do site. No código-fonte, os assets ainda apontam para o domínio principal, e não para o CNAME informado.
Como corrigir o erro de Lazy Load no Perfmatters
O lazy load do Perfmatters falha quando as imagens travam num placeholder, quebram ou não carregam até o usuário rolar. As causas mais comuns são o script lazyload.min.js ser adiado por outro plugin, dois lazy loaders ativos ao mesmo tempo ou imagens acima da dobra não excluidas.
Como corrigir o aviso de formatos de imagem (WebP/AVIF) no WordPress
Servir cada imagem WebP no WordPress significa entregar versões WebP ou AVIF ao navegador no lugar de JPEG e PNG. O aviso aparece quando o site não gera nem entrega esses formatos, porque o nucleo do WordPress aceita upload de WebP mas não converte as imagens JPEG e PNG já existentes nem decide a entrega por navegador.
Como corrigir a remoção de revisões antigas que não funciona no WP-Optimize
O WP-Optimize não remove revisões antigas quando a opção de reter um número de semanas de dados está preservando as revisões recentes, quando a limpeza de revisões não está marcada, ou quando o agendamento de limpeza está desligado e a otimização nunca roda sozinha.
Como corrigir o WP Rocket que não otimiza subdomínios no WordPress
O WP Rocket não otimiza subdomínios quando o plugin foi ativado em rede (Network Activate) em vez de ativado individualmente em cada subsite, ou quando o WordPress acessa o admin por uma URL diferente da do front-end, impedindo o plugin de gerar a configuração e o cache por domínio.
Como corrigir o erro de preload no WP Rocket no WordPress
O preload do WP Rocket não funciona quando o WP-Cron não roda, quando o sitemap esta vazio ou inacessivel, quando a extensão SimpleXML do PHP esta desativada ou quando o site não consegue completar uma requisicao de loopback, impedindo o robo de pre-carregar o cache.
