LCP alto por causa da imagem principal? 6 ajustes que resolvem na maioria dos sites

O LCP (Largest Contentful Paint) mede quanto tempo o maior elemento visível leva para aparecer. Em quase todo site institucional ou loja, esse elemento é a imagem principal do topo — o banner, a foto do produto, o "hero". Se ela demora, o Google considera a página lenta, não importa quão rápido seja o resto.

1. Avise o navegador que ela é prioridade

<img src="/hero.avif" fetchpriority="high" width="1600" height="900" alt="..." />

Sem isso, a imagem disputa banda com scripts, fontes e ícones.

2. Nunca use lazy loading no topo

loading="lazy" na imagem principal é um erro comum de quem aplicou a regra "em todas as imagens". O lazy é para o que está abaixo da dobra.

3. Formato e tamanho certos

Uma foto de 3 MB em JPEG pode virar 200 KB em AVIF sem perda visível. E o celular não precisa da versão de 2.400px. O guia completo está em AVIF, WebP e srcset: o guia rápido para imagens leves e nítidas.

4. Não dependa de JavaScript para mostrar

Se a imagem só aparece depois que o React monta a página, o LCP soma o tempo de baixar e executar todo o JavaScript. HTML pré-renderizado resolve — explicamos em SPA e SEO: por que o Google e as IAs não leem o seu site React.

5. Cuidado com sliders

Carrosséis no topo carregam várias imagens grandes e, muitas vezes, uma biblioteca inteira de animação. Uma imagem forte costuma converter melhor e carregar muito mais rápido.

6. Sirva de perto

Imagens servidas por CDN, com cache longo, chegam mais rápido para quem está longe do servidor (Cache HTTP e CDN: o site rápido que você já paga e não usa).

Como confirmar

Rode o PageSpeed Insights e veja qual elemento ele aponta como LCP. Às vezes não é a imagem, e sim um título que espera uma fonte web carregar — nesse caso, o problema está em Fontes web sem travar a página: font-display, subset e auto-hospedagem.

Veja a frente de Performance WPO da We Codex ou peça uma análise.