O que é LCP e por que 4s é o limite
O Largest Contentful Paint (LCP) mede o tempo até o maior elemento visível na viewport ser renderizado pelo navegador. No e-commerce, esse elemento quase sempre é a imagem hero do produto ou do banner principal.
O Google classifica LCP em três faixas:
| LCP | Classificação | Impacto |
|---|---|---|
| ≤ 2,5s | Bom | Sem penalização no ranking |
| 2,5s – 4s | Precisa melhorar | Risco crescente de perda de posição |
| > 4s | Ruim | Impacto direto em ranking e conversão |
Estudos do Google e do Cloudflare mostram que cada segundo adicional de carregamento reduz a taxa de conversão em até 7%. Para uma loja que faz R$50.000/mês, um LCP ruim pode custar R$3.500 por segundo extra.
Caso real: Uma loja de moda com LCP de 5,8s no mobile que reduziu para 2,1s após remover 4 apps de marketing e otimizar a imagem hero. Resultado: +22% na taxa de conversão em 30 dias.
Antes da otimização
Depois da otimização
Ganho principal: remoção de 4 apps de marketing + hero image WebP + fetchpriority="high" na imagem hero
Como medir o LCP da sua loja Shopify
Antes de corrigir, você precisa saber onde está o problema. Existem duas formas de medir: dados de campo (usuários reais) e dados de laboratório (simulação).
PageSpeed Insights (recomendado para início)
Acesse pagespeed.web.dev e cole a URL da sua página principal e da sua página de produto. O relatório mostra o LCP medido em campo (CrUX data) e em laboratório (Lighthouse). Sempre teste no mobile — é onde a maioria dos seus clientes está.
Chrome DevTools — Performance Tab
Abra o DevTools (F12), vá em Performance, pressione Ctrl+Shift+R para gravar e recarregar. Após a gravação, clique em "Timings" e localize o marcador LCP. Isso mostra exatamente qual elemento foi o LCP e em qual timestamp ele apareceu.
Web Vitals Chrome Extension
Instale a extensão Web Vitals do Google. Ela mostra LCP, CLS e INP em tempo real enquanto você navega na loja. Útil para testar diferentes páginas rapidamente.
As 4 causas mais comuns de LCP alto no Shopify
1. Imagem hero sem otimização
É a causa número um. Lojas Shopify frequentemente carregam imagens hero de 2MB+ sem compressão, sem WebP e sem o atributo fetchpriority="high". O navegador não sabe que essa é a imagem mais importante da página.
Como identificar: No PageSpeed Insights, clique em "Oportunidades" e procure "Properly size images" e "Serve images in next-gen formats". Se a imagem hero aparecer ali, esse é o problema.
Comprimir a imagem
Use Squoosh.app ou TinyPNG para reduzir o tamanho sem perda visual perceptível. Meta: imagem hero abaixo de 150KB em WebP.
Adicionar fetchpriority no tema
No seu tema Shopify, localize o código da imagem hero e adicione fetchpriority="high" loading="eager". Isso instrui o browser a priorizar o download.
Usar Shopify CDN corretamente
O Shopify serve imagens via CDN automaticamente, mas você precisa usar os parâmetros corretos: image_url | image_tag: width: 1200, format: 'webp' no Liquid.
2. Apps que injetam scripts de renderização bloqueante
Cada app instalado no Shopify pode injetar JavaScript no <head> da página. Se esses scripts são síncronos (sem async ou defer), eles bloqueiam a renderização até serem completamente carregados — antes mesmo de qualquer elemento visual aparecer na tela.
Apps comuns que causam esse problema: chat ao vivo (Tidio, Gorgias), programas de fidelidade (Smile.io), reviews (Yotpo, Okendo) e FOMO popups.
Diagnóstico rápido: No Chrome DevTools → aba Network → filtre por "JS" → recarregue a página. Identifique scripts externos de domínios de terceiros que carregam antes da imagem hero. Esses são os candidatos a remover ou diferir.
3. Tema com JavaScript bloqueante no <head>
Temas de qualidade inferior — ou temas customizados sem revisão de performance — frequentemente incluem scripts no <head> sem os atributos corretos. Isso atrasa o momento em que o navegador pode começar a renderizar qualquer coisa.
No Shopify, verifique seu arquivo theme.liquid. Todo script que não é crítico para o acima-do-fold deve ter defer ou ser movido para antes do </body>.
// Ruim — bloqueia renderização
<script src="{{ 'app.js' | asset_url }}"></script>
// Correto — carrega sem bloquear
<script src="{{ 'app.js' | asset_url }}" defer></script>4. Resposta lenta do servidor (TTFB alto)
Se o TTFB (Time to First Byte) estiver acima de 800ms, o navegador fica esperando o servidor antes de iniciar qualquer renderização. No Shopify, isso raramente é problema do servidor em si, mas pode ser causado por apps que adicionam middleware pesado (como apps de personalização baseados em cookies ou geo-location).
Como verificar: No PageSpeed Insights, procure por "Reduce server response times (TTFB)". Um TTFB acima de 600ms no Shopify quase sempre indica um app mal configurado ou uma integração externa lenta.
Plano de correção passo a passo
Aborde os problemas nesta ordem — do maior impacto para o menor:
Meça o LCP atual e anote o elemento LCP
Use PageSpeed Insights na sua homepage e página de produto. Anote o LCP em ms e qual elemento foi identificado.
Desative apps um por um e re-meça
Crie uma página de teste ou use modo de desenvolvimento. Desative apps de terceiros temporariamente e meça o LCP em cada iteração para identificar o culpado.
Otimize a imagem hero
Comprima, converta para WebP, adicione fetchpriority="high" e loading="eager". Re-meça.
Audite os scripts no <head>
Revise o theme.liquid e adicione defer/async em todos os scripts não críticos. Verifique o Network tab para scripts de terceiros bloqueantes.
Monitore continuamente
Configure um alerta no PageSpeed Insights ou use o Shopify Analytics para acompanhar a velocidade após cada mudança nova.
Resultados esperados após as correções
Com as otimizações aplicadas corretamente, é razoável esperar:
- Redução de LCP de 5s+ para 2s–2,5s em lojas com imagens mal otimizadas
- Redução de 1s–1,5s apenas com remoção ou deferimento de scripts de apps
- Melhora visível no Shopify Speed Score (de 20–40 para 60–80+)
- Aumento de conversão de 10%–25% em casos documentados
Importante: Resultados variam por loja, nicho e perfil de tráfego. O impacto em conversão é mais visível em lojas com tráfego predominantemente mobile e em categorias de preço médio-alto, onde o usuário pesquisa mais antes de comprar.
Quando chamar um especialista
Se após as otimizações básicas o LCP ainda estiver acima de 3s, o problema provavelmente é estrutural: scripts de apps que não podem ser facilmente removidos, tema legado com arquitetura de performance ruim, ou integrações externas mal implementadas.
Nesses casos, um diagnóstico técnico profundo — que analisa waterfall completo, thread principal, scripts síncronos, critical rendering path e configuração de imagem no Liquid — costuma revelar o problema em menos de 2 horas de análise.
Sua loja Shopify ainda está lenta após tentar essas correções?
Faço diagnóstico técnico completo de LCP, INP e CLS com análise de waterfall, identificação de scripts bloqueantes e mapa de correção prioritizado. Resultado entregue em até 48h, sem compromisso de contratação.