Uma pontuação de 68 no Google PageSpeed Insights em uma página de produto Shopify é um sinal de alerta direto para a taxa de conversão. Quando o relatório destaca o Largest Contentful Paint (LCP) em vermelho, significa que o visitante espera preciosos segundos antes de visualizar a imagem principal e os detalhes da oferta. Em lojas virtuais, esse atrito inicial reflete em abandono de carrinho e custos mais altos em campanhas pagas.
Atingir uma pontuação superior a 90 no ambiente Shopify exige intervenções direcionadas na estrutura do tema (Online Store 2.0), no carregamento de mídia e na execução de scripts de aplicativos.
O que causa o LCP elevado na página de produto?
Na maioria das lojas Shopify, o elemento apontado como LCP é a imagem do produto exibida na primeira dobra (above the fold). As causas técnicas mais comuns incluem:
- Uso inadequado de Lazy Loading: Aplicar
loading="lazy"na imagem principal atrasa propositalmente a renderização do elemento crítico. - Falta de priorização de recursos: O navegador não sabe que a imagem do produto é prioritária em relação a outros elementos externos.
- Scripts de aplicativos bloqueando a renderização: Widgets de avaliações, contadores regressivos e apps de upsell que injetam JavaScript no
<head>sem deferimento. - Imagens desproporcionais: Entrega de resoluções de 2000px ou mais para dispositivos móveis sem o uso de
srcsetadaptativo via filtros Liquid.
Passo a passo para otimizar a velocidade e reduzir o LCP
1. Priorize a imagem principal via Liquid
A primeira imagem da galeria de produtos nunca deve receber carregamento preguiçoso. Em vez disso, adicione atributos explícitos para prioridade de busca no código do tema:
liquid
{{ product.featuredimage | imageurl: width: 800 | image_tag:
preload: true,
fetchpriority: ‘high’,
loading: ‘eager’,
widths: ‘375, 550, 750, 1100’,
sizes: ‘(min-width: 990px) calc(50vw – 40px), 100vw’
}}
Essa abordagem instrui o navegador a iniciar o download da imagem antes mesmo de processar scripts secundários.
2. Racionalize os blocos de aplicativos (Online Store 2.0)
Em implementações Shopify que realizo, costumo auditar a forma como os aplicativos de terceiros são inseridos na seção de produto. Prefira sempre App Embeds ou blocos de seção nativos do Online Store 2.0 em vez de códigos JavaScript colados diretamente no arquivo theme.liquid. Isso garante que os scripts só sejam chamados quando a seção correspondente estiver pronta.
Para widgets pesados (como carrosséis de reviews), considere atrasar sua inicialização até a interação do usuário (scroll ou clique), mantendo o núcleo da página limpo para os robôs do Core Web Vitals.
3. Migre tags manuais para a Shopify Web Pixels API
Scripts adicionais de rastreamento (Meta Pixel, Google Tag Manager, TikTok) inseridos manualmente no código afetam drasticamente a métrica TBT (Total Blocking Time). Utilize a Customer Privacy & Web Pixels API da Shopify, que executa esses scripts em uma sandbox assíncrona (Web Worker), liberando a thread principal do navegador para renderizar o produto mais rápido.
4. Limpeza de resíduos de código Liquid
Desinstalar aplicativos pelo painel da Shopify frequentemente deixa resquícios no código do tema. Verifique os arquivos snippets e as chamadas no main-product.liquid para remover requisições a servidores externos que já não possuem utilidade.
Fluxo de validação técnica
Após implementar essas melhorias:
- Teste a página de produto utilizando o modo anônimo no PageSpeed Insights.
- Avalie a métrica específica de LCP em dispositivos móveis, buscando valores abaixo de 2,5 segundos.
- Monitore o console de desenvolvimento para garantir que a troca de variantes de produto continue fluida e sem erros de script.
Se a sua loja Shopify continua presa em métricas intermediárias no PageSpeed ou com alertas de Core Web Vitals comprometendo suas vendas, vale a pena contar com uma avaliação técnica especializada. Entre em contato com Thiago Programador para uma consultoria de performance em temas Shopify e descubra como acelerar suas páginas de produto com código limpo e sustentável.
