Como melhorar Core Web Vitals no WordPress

· 8 min de leitura

Capa do artigo: Como melhorar Core Web Vitals no WordPress

Na maior parte dos sites WordPress, os maiores ganhos vêm de otimizar a imagem de LCP, reduzir JavaScript de terceiros, controlar o carregamento de fontes e reservar espaço para elementos que deslocam o layout.

O que as três métricas medem de verdade

Core Web Vitals não medem a nota de uma ferramenta. Medem três experiências concretas de quem abre a página.

  • LCP — quanto tempo até o maior elemento visível aparecer. Quase sempre a imagem do topo ou o título principal.
  • INP — quanto tempo a página leva para responder a um toque ou clique. Substituiu o FID e é mais severo, porque olha todas as interações, não só a primeira.
  • CLS — quanto o conteúdo se desloca sozinho enquanto carrega.

Os alvos: LCP até 2,5s, INP até 200ms, CLS até 0,1 — no percentil 75 de usuários reais.

Dados de laboratório não são dados de campo

O PageSpeed Insights entrega os dois. O Lighthouse simula em condições fixas; o CrUX mostra o que aconteceu com usuários reais nos últimos 28 dias.

Só o campo conta para ranqueamento. Uma nota 100 no laboratório com LCP ruim no campo significa que o problema está em rede móvel, dispositivo lento ou cache frio — condições que a simulação não reproduz.

LCP: quase sempre é a imagem do topo

Na maioria dos sites WordPress o LCP é uma imagem. Na ordem de impacto:

  • Não deixe a imagem do topo com loading="lazy". O WordPress acerta na maioria dos casos, mas temas mal configurados erram.
  • Marque a imagem do LCP com fetchpriority="high".
  • Sirva em AVIF ou WebP, no tamanho real de exibição.
  • Elimine o que bloqueia a renderização antes dela: fontes sem display: swap, CSS de plugin carregado em toda página, script de terceiro no <head>.

Fontes do Google são um round trip a mais. Hospedar localmente costuma render mais que qualquer micro-otimização de CSS.

INP: o custo é o JavaScript de terceiro

INP mede a resposta ao toque, e o que trava a resposta é a thread principal ocupada.

Os culpados recorrentes num WordPress típico: builders de página que carregam o próprio runtime, sliders, chats, pixels de rastreamento e plugins que enfileiram script em todas as páginas mesmo onde não são usados.

A correção quase nunca é otimizar o script. É não carregá-lo onde ele não serve — wp_dequeue_script condicional resolve mais INP que qualquer plugin de cache.

CLS: reserve espaço antes de o conteúdo chegar

Deslocamento acontece quando algo entra na página sem lugar reservado.

  • Toda imagem com width e height, ou aspect-ratio no CSS.
  • Fontes com fallback métrico próximo, para o texto não mudar de tamanho na troca.
  • Nenhum banner ou aviso injetado acima do conteúdo depois do carregamento.

CLS é a métrica mais barata de corrigir e a que mais irrita quem usa o site.

O que não resolve

Instalar um plugin de otimização e marcar todas as caixas. Minificar CSS não corrige um LCP causado por imagem de 2 MB, e cache de página não corrige INP, porque INP acontece depois que a página já chegou.

Meça primeiro no campo, identifique qual das três métricas está fora, e corrija a causa dela. Nessa ordem.