Como Otimizar o LCP no Shopify e Superar a Pontuação 90 no PageSpeed
Uma pontuação de 68 no Google PageSpeed Insights é um gargalo comum em lojas Shopify ativas. Na maioria dos diagnósticos de desempenho, o principal vilão dessa pontuação intermediária é o Largest Contentful Paint (LCP) elevado — frequentemente ultrapassando os 3 a 4 segundos, quando a recomendação do Google é mantê-lo abaixo de 2,5 segundos no ambiente mobile.
Quando o LCP demora a ser renderizado, o cliente percebe a loja como lenta e instável, o que impacta diretamente a taxa de conversão e a eficiência de campanhas de tráfego pago. A seguir, entenda a anatomia do LCP no ecossistema Shopify e quais ajustes práticos no código Liquid são necessários para atingir notas 90+.
1. O que impacta o LCP em temas Shopify?
O LCP mede o tempo necessário para que o maior bloco de conteúdo visual da primeira dobra (acima do corte da tela) seja completamente renderizado. Em e-commerces Shopify, esse elemento quase sempre é:
- A imagem principal do banner/slideshow na página inicial;
- A imagem principal do produto na página de produto (PDP);
- Um título tipográfico de grande escala com fonte personalizada não nativa.
O atraso ocorre principalmente pela combinação de três fatores: scripts de terceiros bloqueando a renderização no theme.liquid, imagens com carregamento tardio (lazy loading) aplicado incorretamente no elemento principal, e falta de priorização de download de recursos críticos.
2. Ajustes técnicos essenciais no código Liquid
Remova o Lazy Loading do Banner Principal
Um erro recorrente em temas desenvolvidos no Shopify 2.0 é aplicar a propriedade loading="lazy" indiscriminadamente em todas as tags de imagem. O elemento LCP nunca deve ter carregamento postergado.
No arquivo da seção do banner (geralmente image-banner.liquid ou similar), certifique-se de configurar a primeira imagem com prioridade imediata utilizando os filtros nativos da Shopify:
liquid
{{ section.settings.image | imageurl: width: 1500 | imagetag:
loading: ‘eager’,
fetchpriority: ‘high’,
preload: true,
widths: ‘375, 550, 750, 1100, 1500’,
alt: section.settings.image.alt | escape
}}
A adição do atributo fetchpriority: 'high' e do parâmetro preload: true orienta o navegador a priorizar o download do asset antes mesmo de analisar todo o CSS da página.
Otimize a Entrega de Tipografia e Webfonts
Fontes personalizadas carregadas via serviços externos causam refuxo de layout (CLS) e atrasam a pintura do LCP. No arquivo theme.liquid, aplique a diretiva font-display: swap; nas definições de fonte ou utilize os helpers de carregamento assíncrono nativos do Shopify (font_face com preconnect).
Auditoria da Árvore de Scripts e Apps
Em implementações Shopify que realizo para elevação de PageSpeed, é frequente encontrar lojas com dezenas de snippets residuais de aplicativos desinstalados no theme.liquid e na pasta /snippets.
Cada script síncrono bloqueia a thread principal do navegador. O procedimento ideal envolve:
- Identificar e remover scripts de apps desativados;
- Migrar bibliotecas externas para carregamento via
deferouasync; - Priorizar apps que utilizam Theme App Extensions, que respeitam o ciclo de vida do tema moderno.
3. Fluxo Prático para Atingir a Pontuação 90+
Para sair de uma métrica 68 e cruzar a barreira dos 90 pontos no ambiente mobile do PageSpeed Insights, adote o seguinte roteiro:
- Identificação Precisa: Abra o relatório do PageSpeed e localize o nó HTML específico apontado como elemento LCP na seção de diagnósticos.
- Isolamento de Imagem: Aplique formatos modernos (
WebPgerado nativamente pelo CDN da Shopify) e removalazy loadingapenas deste bloco inicial. - Redução de Recursos de Bloqueio: Realize um pente-fino nas tags
<head>, garantindo que nenhum script analítico ou de marketing trave a renderização inicial. - Validação em Ambiente de Teste: Duplique o tema antes de publicar alterações de código e teste a URL privada através do PageSpeed para validar os ganhos sem interferir na operação ativa.
Conclusão e Próximos Passos
Atingir e manter uma nota 90+ no Google PageSpeed Insights não depende de soluções genéricas ou de plugins automáticos de compactação, mas sim de um trabalho minucioso de arquitetura de código em Liquid, redução de bloqueios de thread e gestão estratégica de assets.
Se a sua loja Shopify enfrenta problemas com LCP lento e precisa de intervenção direta no código do tema para acelerar carregamento e taxas de conversão, entre em contato com o Thiago Programador para uma consultoria técnica especializada em performance Shopify.
