Como Melhorar o LCP do WordPress Sem Quebrar o Layout

Primeiro passo: identificar o elemento LCP

Antes de qualquer otimização, você precisa saber exatamente qual elemento é o LCP da sua página. Muitos desenvolvedores assumem que é a imagem do hero — mas pode ser um bloco de texto grande, um vídeo ou qualquer outro elemento de destaque.

Como identificar via Chrome DevTools

Abra o Chrome, acesse sua página e abra o DevTools (F12)
Vá na aba Performance e clique em Record
Recarregue a página (Ctrl+Shift+R para cache limpo)
Pare a gravação
No Timings, procure "LCP" — clique para ver o elemento destacado na página

Como identificar via PageSpeed Insights

No PageSpeed Insights, na seção "Diagnósticos", clique em "Largest Contentful Paint element" para ver exatamente qual elemento está sendo medido. O painel vai mostrar o elemento HTML e sua URL se for uma imagem.

🎯

Meta de LCP

Bom: menos de 2.5s · Precisa melhorar: 2.5s a 4.0s · Ruim: acima de 4.0s. O Google usa o percentil 75 dos usuários reais (dados de campo), não simulação. Meça sempre com PageSpeed Insights na seção "Dados de campo".

Otimizar a imagem LCP — maior impacto possível

Se o elemento LCP é uma imagem, as otimizações a seguir têm o maior impacto:

1. Preload da imagem LCP

Por padrão, o navegador descobre a imagem do hero somente depois de processar o HTML e o CSS. Preload instrui o navegador a baixar a imagem imediatamente, em paralelo com tudo:

<link rel="preload" as="image" href="/wp-content/uploads/hero.webp"
      fetchpriority="high">

No WordPress, adicione no functions.php do tema:

function add_lcp_preload() {
  echo '<link rel="preload" as="image" href="' . get_template_directory_uri() . '/images/hero.webp" fetchpriority="high">';
}
add_action('wp_head', 'add_lcp_preload', 1);

2. Converter para WebP ou AVIF

WebP reduz o tamanho de imagens JPEG em 25-35% sem perda perceptível de qualidade. AVIF reduz ainda mais (40-50%), mas tem suporte menor em navegadores antigos. Use WebP como padrão e ofereça AVIF como alternativa:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Descrição" width="1200" height="600" fetchpriority="high">
</picture>

No WordPress, os plugins ShortPixel, Imagify e Smush convertem automaticamente para WebP. O Elementor tem conversão nativa para WebP nas versões mais recentes.

3. Dimensionar corretamente

Uma imagem de 4000×3000px exibida em 1200×600px está desperdiçando 90% do download. Redimensione para o tamanho real de exibição (considere Retina: máximo 2x do tamanho CSS).

4. Não use lazy loading na imagem LCP

Esse é um erro comum: aplicar loading="lazy" em todas as imagens, inclusive no hero. Isso atrasa o carregamento exatamente da imagem mais importante. A imagem LCP deve ter loading="eager" (ou sem o atributo) e fetchpriority="high".

Reduzir o TTFB — a base de tudo

TTFB (Time to First Byte) é o tempo que o servidor leva para responder à primeira requisição. Um TTFB alto atrasa todo o carregamento — LCP, imagens, scripts. Se o TTFB está acima de 600ms, qualquer otimização de imagem terá impacto limitado.

Como reduzir o TTFB no WordPress

Cache de página: sirva HTML estático em vez de gerar a página dinamicamente a cada requisição (WP Rocket, LiteSpeed Cache)
Hospedagem adequada: hospedagem compartilhada barata tem TTFB consistentemente alto. VPS gerenciado ou hospedagem especializada em WordPress (Kinsta, WPX) resolve
Banco de dados otimizado: queries lentas aumentam TTFB. Use o plugin Query Monitor para identificar queries pesadas
CDN: uma CDN com edge servers no Brasil (Cloudflare, BunnyCDN) reduz o tempo de entrega para usuários brasileiros

Eliminar CSS e JS bloqueantes

CSS no <head> bloqueia a renderização: o navegador para tudo até terminar de processar o arquivo CSS. O mesmo para JavaScript sem defer ou async.

CSS crítico inline

Extraia o CSS necessário para renderizar o conteúdo acima da dobra (above the fold) e coloque inline no <head>. O restante do CSS carrega de forma assíncrona:

<style>/* CSS crítico aqui — apenas o que está acima da dobra */</style>
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>

Plugins como WP Rocket e NitroPack fazem isso automaticamente. Para Elementor, a opção "Arquivo externo por post" gera CSS menor por página.

Otimizar carregamento de fontes

Fontes do Google Fonts são carregadas de um servidor externo — isso adiciona latência. Se a fonte ainda não foi carregada quando o LCP é calculado, pode atrasar o paint.

Use rel="preconnect" para fonts.googleapis.com e fonts.gstatic.com
Adicione &display=swap na URL das fontes para usar font-display: swap
Considere hospedar as fontes no próprio servidor (plugin OMGF)

Checklist LCP

Identificar exatamente qual elemento é o LCP com DevTools ou PageSpeed
Adicionar preload para a imagem LCP no <head>
Converter imagem LCP para WebP ou AVIF
Remover loading="lazy" da imagem LCP
Medir TTFB e ativar cache de página se acima de 600ms
Verificar CSS/JS bloqueante no <head>
Configurar preconnect para fontes externas
Medir LCP com dados de campo no PageSpeed Insights

Perguntas frequentes sobre LCP

Por que meu LCP é bom no desktop mas ruim no mobile?

Mobile tem menor processamento, conexões mais lentas e CPUs mais fracas. A mesma imagem que carrega em 1.5s no desktop pode levar 3.5s no mobile 4G com CPU throttling. O Google usa dados de mobile para ranqueamento na maioria das buscas. Otimize sempre com o perfil mobile no PageSpeed Insights.

O elemento LCP pode mudar dependendo da página?

Sim. O LCP é calculado por URL. Na home, pode ser o banner do hero. Numa página de produto, pode ser a imagem do produto. Num artigo de blog, pode ser um título <h1> grande. Você precisa otimizar o LCP de cada template de página separadamente — home, produtos, posts, etc.

Plugin de cache resolve o LCP alto?

Cache de página melhora o TTFB (tempo de resposta do servidor), que indiretamente melhora o LCP. Mas se a imagem LCP é pesada e não tem preload, o LCP ainda vai ser lento mesmo com cache ativo. Plugin de cache é necessário mas não suficiente — você precisa atacar o elemento LCP diretamente.

Conclusão

Melhorar o LCP no WordPress é um processo de diagnóstico preciso, não de aplicar otimizações genéricas. O caminho correto:

Identificar o elemento LCP exato com DevTools ou PageSpeed
Otimizar aquele elemento específico (imagem: preload + WebP + dimensões corretas)
Verificar TTFB e ativar cache se necessário
Eliminar CSS/JS bloqueante no head
Medir com dados de campo e repetir

LCP alto derrubando suas posições no Google?

A Fluxando diagnostica e corrige Core Web Vitals em sites WordPress. Diagnóstico gratuito de 30 minutos.

Falar com especialista agora

Yuri César Fundador — Fluxando | Goiânia, GO

Especialista em soluções digitais estratégicas. Trabalha com performance web, automação e IA aplicada para empresas em Goiânia e todo o Brasil.