Otimizar LCP em página de produto: 7 técnicas em ordem de impacto
Página de produto é onde o LCP costuma ser pior — e onde a otimização dá maior ROI. Veja as 7 técnicas em ordem de impacto, com código pronto e números reais. Sem reescrever o tema.
- O que realmente está limitando o LCP da sua página de produto — quase nunca é o que se imagina.
- As 7 técnicas que movem o ponteiro em PDP, em ordem de impacto.
- O caso da imagem do hero:
preload,fetchpriority, AVIF/WebP,srcset. - Onde Magento e WooCommerce "atrapalham" e como contornar sem migrar tema.
Página de produto (PDP) é o ponto onde a maioria das lojas vê LCP ruim — e é também onde importa mais: é a página de pouso do tráfego pago e orgânico, e onde o cliente toma a decisão de comprar. Este guia é a sequência prática de otimizações em ordem de impacto, com números reais e código pronto pra copiar.
fetchpriority="high" + AVIF/WebP em imagem do heroPasso 0: o que está sendo medido como LCP?
Antes de otimizar, identifique qual elemento está virando seu LCP. No PageSpeed Insights, vá em "Largest Contentful Paint element" — o relatório mostra exatamente qual nó do DOM venceu a corrida. Pode ser:
- Imagem principal do produto (caso mais comum em PDP).
<h1>com nome do produto (em layouts muito leves).- Banner ou hero com fundo CSS.
- Carrossel da imagem — se a primeira é grande.
Em > 70% dos casos é uma imagem. [1] Os passos abaixo focam nesse cenário.
1. fetchpriority="high" no hero
O browser baixa recursos em paralelo, mas dá prioridade automaticamente para o queele acha que é importante. Em PDP, o navegador frequentemente erra — o JS de analytics começa a baixar antes da imagem do produto. Para corrigir:
<!-- HTML do produto -->
<img
src="/img/produto-1200.webp"
srcset="/img/produto-400.webp 400w,
/img/produto-800.webp 800w,
/img/produto-1200.webp 1200w"
sizes="(max-width: 768px) 100vw, 600px"
alt="Notebook Acer Aspire 5"
width="600"
height="600"
fetchpriority="high"
/>Atributo simples, ganho real. Suportado em Chrome, Edge, Safari (16.4+) e Firefox (em rollout). [2]
fetchpriority="high" em um recurso por página — o hero/LCP. Se você marcar 5 imagens como high, é equivalente a marcar zero — o browser cai no comportamento padrão.2. preload da imagem no <head>
fetchpriority ajuda na ordenação, mas o browser ainda precisaencontrar a tag <img> no HTML. Em PDPs grandes, isso pode levar 200–500ms. Solução: avisar o browser antes, no head:
<link
rel="preload"
as="image"
href="/img/produto-1200.webp"
imagesrcset="/img/produto-400.webp 400w, /img/produto-800.webp 800w, /img/produto-1200.webp 1200w"
imagesizes="(max-width: 768px) 100vw, 600px"
fetchpriority="high"
/>Ganho típico: 100–300ms de LCP em rede 4G. Em Magento 2, dá pra adicionar via observer no <head>; em WooCommerce, via filter wp_head.
3. AVIF / WebP em vez de JPEG
Tamanho médio de redução para a mesma qualidade visual:
| Formato | Tamanho típico (foto de produto 1200×1200) | Suporte |
|---|---|---|
| JPEG (quality 80) | 120-180 KB | 100% |
| WebP (quality 80) | 60-100 KB (-40%) | 97%+ (Chrome, Firefox, Safari 14+, Edge) |
| AVIF (quality 60) | 40-70 KB (-65%) | ~90% (sem Safari < 16, IE) |
Use <picture> com fallback:
<picture>
<source srcset="/img/produto.avif" type="image/avif" />
<source srcset="/img/produto.webp" type="image/webp" />
<img src="/img/produto.jpg" alt="..." fetchpriority="high" />
</picture>Magento 2.4.7+ entrega WebP nativamente; AVIF ainda exige módulo (ex.: Mageplaza WebP Images, ou pipeline próprio com cwebp/avifenc). WooCommerce idem via plugin (Imagify, ShortPixel).
4. CDN com cache morno no hot path
Imagem servida do origem em PDP de produto popular é desperdício. Use CDN (Cloudflare, BunnyCDN, Akamai, CloudFront) com TTL alto (30 dias+). Garanta que a primeira requisição em região nova já cai no warm path — alguns CDNs cobram extra por "shield" (origem única) que vale o investimento para reduzir cold start.
5. Remova render-blocking acima da dobra
CSS bloqueante e fontes web carregadas antes do hero atrasam o LCP. Auditoria rápida:
- Veja o waterfall do WebPageTest e identifique CSS/JS bloqueantes que carregam antes da imagem.
- Para fontes Google, use
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>+font-display: swappara que o texto apareça mesmo sem fonte carregada. - Chat, analytics e A/B testing devem ter
deferouasync. Se carregam síncronos, atrasam o LCP por 200-500ms cada.
6. Reduza payload do HTML
Em Magento e WooCommerce, o HTML de PDP frequentemente passa de 300 KB gzip (1.2 MB descomprimido). Isso atrasa o byte zero e a descoberta da tag de hero. Causas comuns:
- Mini-cart com produtos pré-renderizados em SSR.
- Schema.org "exagerado" — todos os 50 produtos relacionados com JSON-LD inline.
- CSS inline gigante (regra "above-the-fold" mal calibrada).
- Inline base64 de imagens — bom para 1×1, ruim para qualquer coisa > 1 KB.
Meta razoável: HTML < 80 KB gzip para PDP.
7. Lazy load tudo abaixo da dobra
Imagens da galeria além da principal, banners de "produtos relacionados", widget de reviews — tudo deve ter loading="lazy". Importante:
- Nunca aplique lazy load na imagem do hero.
- Em galerias, a primeira imagem da galeria é o hero (geralmente).
- Lazy load via JS de tema antigo costuma quebrar SEO de imagem. Use o nativo do navegador (
loading="lazy") e mate o JS legado.
Checagem rápida: o seu LCP hoje
- Abra pagespeed.web.dev e cole uma URL de PDP.
- Olhe o Real-user data (CrUX) primeiro — esse é o número que afeta SEO.
- Veja o Lab data e o LCP element.
- Anote: tamanho da imagem (KB), formato, posição no waterfall, se tem
fetchpriorityepreload. - Aplique as técnicas 1, 2, 3 (são as de maior impacto sem reescrita) e meça de novo em 28 dias (janela do CrUX).
Ferramentas que ajudam (de graça)
- PageSpeed Insights — diagnóstico inicial, com CrUX se sua URL tem tráfego suficiente.
- WebPageTest — waterfall completo, múltiplas execuções, perfil de rede 4G real.
- Chrome DevTools → Performance — para isolar JS bloqueante.
- cwebp / avifenc — conversão de imagem em batch.
- Inspetor de cabeçalhos HTTP — para ver se preload, fetchpriority e cache-control estão configurados certo.
- WebP/AVIF na imagem do hero — sem isso, o resto importa pouco.
fetchpriority="high"+preloadda imagem.- CDN com TTL alto.
- Defer/async em scripts não críticos.
- HTML < 80 KB gzip.
- Lazy load no resto.
Veja também Core Web Vitals para loja virtual para entender o quadro completo, e sintético vs RUM para medir LCP de forma confiável depois.
Referências
- HTTP Archive. Web Almanac — Performance & E-commerce chapter, LCP elements breakdown, 2024. almanac.httparchive.org/en/2024/performance
- Google web.dev. fetchpriority — Prioritize resource fetches. web.dev/articles/fetch-priority
- Google web.dev. Optimize Largest Contentful Paint. web.dev/articles/optimize-lcp
- Can I use. Browser support for AVIF and WebP. caniuse.com/avif
- Deloitte / Google. Milliseconds Make Millions, 2020.
- Smashing Magazine. The Humble <img> Element And Core Web Vitals. smashingmagazine.com
Perguntas frequentes
- O que tem mais impacto: trocar JPEG por WebP ou colocar fetchpriority?
- Depende do tamanho atual. Se sua imagem está acima de 200 KB, WebP/AVIF vem primeiro (reduz 40-65% sem perda visual). Se já está em ~80 KB WebP, fetchpriority + preload move mais o ponteiro. Aplique os dois — não são excludentes.
- Magento 2 entrega WebP nativamente?
- Desde a 2.4.7, sim — basta habilitar em Stores → Configuration → General → Web → Images. Para AVIF, ainda precisa módulo de terceiro ou pipeline próprio (cwebp/avifenc no upload).
- Lazy load destrói o LCP da imagem do hero?
- Sim, é um dos erros mais comuns. Nunca aplique loading="lazy" na imagem que é o LCP (geralmente a primeira da galeria de produto). Aplique só nas que estão abaixo da dobra.
Continue lendo
Monitore tudo isso automaticamente
A Especialista Loja Virtual roda navegação real no seu site a cada poucos minutos, alerta no Discord, Slack ou e-mail e mostra screenshot do incidente. Comece grátis.