Reportagens e pesquisa sobre Shopify e e-commerce
O Largest Contentful Paint é o Core Web Vital em que as lojas Shopify falham de forma mais visível, e a nossa própria auditoria mostra porquê: em 15 demos de temas oficiais, a primeira pintura chegou em cerca de 2 a 5 segundos, e depois os compradores esperaram até 13.9 segundos adicionais pela mídia do hero. Aqui está o mecanismo e a lista de correções, com números.
O Largest Contentful Paint mede um momento: quando o maior elemento visível na primeira dobra termina de renderizar. Numa loja Shopify esse elemento é quase sempre a imagem do hero, a primeira foto de produto ou o poster frame de um vídeo em autoplay, e é exatamente por isso que as pontuações de LCP no Shopify falham. Os servidores da plataforma respondem depressa e o esqueleto do tema pinta cedo; depois o comprador fica a olhar para um esqueleto enquanto megabytes de mídia do hero se arrastam por uma ligação móvel.
Os nossos dados tornam o mecanismo visível. A 14 de julho de 2026 corremos 45 auditorias Lighthouse em 15 demos de temas oficiais, e o número interessante não é o LCP em si, mas a distância entre o First Contentful Paint e o LCP. O FCP é a chegada do esqueleto; a diferença entre FCP e LCP é a mídia do hero a fazer todos esperar.
| Demo do tema | FCP | LCP | Intervalo (espera pelo hero) |
|---|---|---|---|
| Ultra | 1.91s | 1.91s | 0.0s |
| Boutique | 2.20s | 3.67s | 1.5s |
| Symmetry | 1.53s | 6.33s | 4.8s |
| Impression | 5.22s | 12.19s | 7.0s |
| Horizon | 3.57s | 12.32s | 8.8s |
| Motion | 1.88s | 15.78s | 13.9s |
Leia de novo a linha do Motion: primeira pintura em 1.88 segundos, mais rápida do que quase tudo o que testámos, e depois uma espera de 13.9 segundos pelo hero. O código do tema não é o gargalo; a estratégia de mídia é. O Horizon conta a mesma história de outro ângulo: o seu total blocking time foi de 29ms, entre os melhores comportamentos de JavaScript da auditoria, ao lado de um LCP de 12.32 segundos. Ótima engenharia, vitrine pesada.
E o contraexemplo prova que o limite é real: no demo do Ultra o maior elemento renderizou junto com a primeira pintura, 1.91 segundos para ambos, o único demo dos 15 abaixo do limite de 2.5 segundos do Google. É assim que uma primeira dobra disciplinada aparece nos dados.
1. Pese o seu hero. Abra a sua página inicial no PageSpeed Insights, expanda o diagnóstico de LCP e veja qual é de facto o elemento do LCP. Se for uma imagem de 2 a 4MB ou um vídeo, nada mais nesta lista importa até isso mudar. Exporte o hero no tamanho em que é renderizado, sirva WebP ou AVIF através dos parâmetros de largura de image_url do Shopify e mantenha o peso perto de 200KB. Se o hero for um vídeo em autoplay, dê-lhe um poster frame leve e deixe o vídeo carregar depois da primeira pintura, ou mova-o para baixo da dobra.
2. Deixe de aplicar lazy-load à imagem do LCP. Uma má configuração comum no Shopify: o tema ou uma app aplica loading="lazy" a tudo, incluindo à primeira imagem do hero, o que atrasa o único download que define a sua pontuação. A imagem do LCP deve carregar de forma eager e com prioridade alta de fetch; tudo o que está abaixo da dobra deve permanecer lazy.
3. Audite o conjunto de apps. Cada app instalada pode injetar scripts que correm antes de o seu hero começar a ser descarregado. Desinstale o que não usa ativamente e depois verifique no código do tema se há tags de script órfãs deixadas pelas apps. A própria documentação de performance do Shopify aponta o peso das apps como um fator primário na velocidade do tema.
4. Enxugue a primeira dobra. Slideshows com cinco slides de 2MB, barras de anúncio animadas, widgets de chat que iniciam imediatamente: todos eles competem com o elemento do LCP. A primeira dobra precisa de uma mensagem e de uma imagem.
5. Depois, e só depois, considere o tema. A escolha do tema define o seu limite. Medimos uma diferença de 8x entre os demos mais rápido e mais lento na mesma loja, em condições idênticas, e a diferença era sobretudo disciplina: quanto carrega a primeira dobra padrão do tema. Se já está à procura de uma substituição, o nosso ranking completo de 15 demos medidos é o ponto de partida, e o fornecedor cujo demo ficou no topo, UTD, lista todos os seus temas aqui. Mas trocar de tema enquanto o seu hero pesa 3MB apenas transfere o mesmo problema para uma tipografia mais bonita.
Meça antes e depois, sempre da mesma maneira. Lighthouse no Chrome DevTools ou PageSpeed Insights, perfil mobile, três execuções, tire a mediana, porque execuções isoladas oscilam. Observe dois números: o LCP em si e o intervalo entre FCP e LCP do gráfico acima. Se as suas correções funcionarem, o intervalo é o primeiro a colapsar, e esse é o sinal de que o hero finalmente chega com a página em vez de depois dela. Os dados de utilizadores reais no relatório de Core Web Vitals do Search Console vão acompanhar dentro de algumas semanas, já que o Google avalia o LCP com dados de campo, não com execuções em laboratório.
Quase sempre porque o maior elemento acima da dobra é uma imagem de hero pesada ou um vídeo em autoplay que começa a ser descarregado tarde. Os dados da nossa auditoria mostram o padrão com clareza: demos com primeira pintura rápida ainda registaram LCPs de 8 a 14 segundos quando a mídia do hero era pesada. Apps que injetam scripts que bloqueiam a renderização empurram o início desse download ainda mais para a frente.
Os limites do Google são abaixo de 2.5 segundos bom, acima de 4 segundos fraco, medidos para utilizadores reais em mobile. Como referência, apenas 1 dos 15 demos de temas oficiais que auditámos sob limitação simulada de mobile ficou abaixo de 2.5 segundos.
Pode, e é a única decisão de velocidade que se toma uma vez. Medimos uma diferença de 8x no LCP mediano em mobile entre o demo de tema mais rápido (1.91s) e o mais lento (15.78s). Mas corrija primeiro a mídia do hero e o seu conjunto de apps: um tema rápido com um hero de 4MB continua a falhar.
Sim. Cada app que injeta um script no seu tema compete com a imagem do LCP por largura de banda e tempo de main thread antes da primeira pintura. Audite as apps instaladas, remova o que não usa e verifique se sobraram tags de script no código do tema depois de desinstalar.