Eu estava depurando uma loja Nuvemshop no mês passado quando algo fez sentido. O dono da loja havia passado semanas otimizando o código do tema, removendo aplicativos não utilizados e minificando CSS — todos os conselhos padrão de performance. Mas a pontuação do Lighthouse ainda estava na casa dos 40. O culpado? Uma página de coleção carregando 24 imagens de produto, cada uma com mais de 800KB, direto da câmera.
Aqui está a verdade desconfortável sobre performance de e-commerce: você pode ter o código de tema mais limpo do mundo, mas se suas imagens de produto estão inchadas, suas pontuações de Core Web Vitals não vão a lugar nenhum. E com a ênfase do Google em 2026 no INP (Interaction to Next Paint) agora sendo um fator de ranqueamento definitivo, páginas de produto lentas custam diretamente tráfego orgânico e conversões.
Por Que Lojas de E-commerce São Excepcionalmente Pesadas em Imagens
A maioria dos sites de conteúdo tem 5-15 imagens por página. Uma página de coleção típica de e-commerce? 20-50 miniaturas de produto. Uma página de detalhes do produto? Geralmente 5-8 imagens de variante em alta resolução, mais visualizações de zoom. Adicione um slider na página inicial, banners promocionais e fotos de lifestyle, e você está olhando para mais de 60 imagens em uma única sessão.
O CDN da Nuvemshop serve essas imagens de forma eficiente, mas o CDN não faz mágica para tornar arquivos de 2MB pequenos. Ele apenas os entrega rápido. O navegador ainda precisa baixar, decodificar e renderizar cada byte — e em uma página de coleção, isso acontece 30 vezes seguidas.
A matemática é brutal. Se sua imagem de produto média tem 1,5MB e você carrega 30 em uma página de coleção, são 45MB de imagens. Mesmo em uma conexão rápida (50Mbps), são mais de 7 segundos de puro download de imagens — antes que qualquer renderização aconteça. No celular? Esqueça.
O Que o Core Web Vitals Realmente Mede (E Por Que Imagens Arruínam Essas Métricas)
As três métricas do Core Web Vitals do Google se comportam de forma diferente quando as imagens são o gargalo:
- LCP (Largest Contentful Paint): Geralmente é sua imagem hero ou a primeira foto do produto. Se ela tem 1MB+, seu LCP está condenado. O Google quer LCP abaixo de 2,5 segundos. Uma única imagem de hero de 1,5MB em 4G leva cerca de 1,8 segundos só para baixar — isso antes da decodificação e renderização.
- CLS (Cumulative Layout Shift): Imagens sem dimensões declaradas fazem a página "pular" enquanto carregam. Se você não está definindo width e height nas suas tags img, o navegador não sabe quanto espaço reservar. O conteúdo desce, o usuário clica no lugar errado, e o Google pune você.
- INP (Interaction to Next Paint): Esta é a mais recente (substituiu o FID). Quando um usuário toca em "Adicionar ao Carrinho" e o navegador ainda está decodificando 15 imagens de produto, a resposta demora. O INP mede essa lentidão de interação. Imagens pesadas = INP ruim = ranqueamento mais baixo.
O Fluxo de Trabalho de Compressão de Imagens de Produto Que Realmente Funciona
Depois de otimizar dezenas de lojas de e-commerce, aqui está o fluxo de trabalho que consistentemente leva as pontuações do Core Web Vitals para a zona verde. Não é complicado, mas a maioria das lojas não segue todos os passos.
Passo 1: Audite Suas Imagens Atuais
Execute o PageSpeed Insights na sua página de coleção mais visitada e em 3 páginas de produto. Anote o elemento LCP e as economias potenciais listadas em "Dimensione adequadamente as imagens" e "Codifique imagens de forma eficiente". Agora você sabe exatamente quais imagens são as piores.
Passo 2: Redimensione Antes de Comprimir
O maior erro que vejo: fotos de produto de 4000x4000px sendo exibidas em um contêiner de 600px. O navegador baixa o arquivo inteiro e depois o redimensiona com CSS. Isso é desperdício total de largura de banda.
- Imagens hero de produto: 1600-2000px de largura (dá conta de telas retina e zoom)
- Miniaturas de coleção: 400-600px de largura (é nesse tamanho que são exibidas)
- Imagens de carrinho: 150-200px de largura
- Imagens de zoom: 2000px de largura, carregadas sob demanda, não no carregamento da página
Passo 3: Comprima com as Configurações Corretas de Qualidade
Para fotos de produto, qualidade JPEG 80 é o ponto ideal — redução de tamanho de 60-80% sem perda visível de qualidade. Se você estiver convertendo para WebP, qualidade 75 produz resultados equivalentes com arquivos 25-35% menores.
Não use PNG para fotos de produto. PNG é sem perdas, o que parece bom, mas é 3-5× maior que um JPEG bem comprimido para a mesma foto. Guarde PNG para logos ou gráficos com texto.
No CompactJPG, você pode arrastar todas as suas imagens de produto de uma vez, definir a qualidade e baixar como um arquivo ZIP. Para uma loja típica com 50-100 produtos, você pode processar tudo em 10-15 minutos.
Passo 4: Configure as Dimensões no HTML
Depois de fazer upload das imagens comprimidas, certifique-se de que toda tag img tenha atributos width e height. A maioria dos temas de e-commerce faz isso automaticamente, mas verifique. Sem dimensões declaradas, você terá problemas de CLS.
Para imagens abaixo da dobra, adicione loading="lazy" para adiar o download até que o usuário role até elas. Isso reduz o peso inicial da página e melhora tanto o LCP quanto o INP.
WebP e AVIF: A Vantagem dos Formatos Modernos
Se sua loja virtual suporta WebP (Nuvemshop suporta, Mercado Livre e Shopee Brasil também), use-o. O WebP reduz o tamanho do arquivo em 25-35% em relação ao JPEG com a mesma qualidade visual. O AVIF é ainda melhor (30-50% menor que JPEG), mas a compatibilidade com navegadores, embora boa, ainda não é universal.
Para lojas Nuvemshop: você pode fazer upload de arquivos WebP diretamente. Para lojas Mercado Livre: a plataforma faz sua própria compressão, mas começar com imagens já otimizadas garante que você esteja enviando a melhor qualidade possível. Para Shopee Brasil: imagens abaixo de 500KB carregam significativamente mais rápido nas listagens de produtos.
Resultados Reais de Lojas Otimizadas
Aqui estão números reais de uma loja Nuvemshop de móveis que otimizei:
- Antes: Peso da página: 11,4MB, LCP mobile: 8,9s, Pontuação PageSpeed: 28/100, Taxa de conversão: 0,8%
- Depois: Peso da página: 1,8MB, LCP mobile: 2,3s, Pontuação PageSpeed: 78/100, Taxa de conversão: 1,5%
A loja parecia idêntica. As imagens eram visualmente indistinguíveis. A única diferença era o tamanho do arquivo — e essa diferença quase dobrou a taxa de conversão.
Outro caso: uma loja no Mercado Livre com 200 produtos. Depois de comprimir todas as imagens para menos de 300KB (JPEG qualidade 75 em 1600px), o tempo de carregamento das listagens caiu de 4,1s para 1,6s. As dúvidas dos compradores aumentaram 22% no mês seguinte.
Erros Comuns Que Você Deve Evitar
- Fazer upload da foto diretamente da câmera. As câmeras produzem JPEGs de 5-15MB. Seus clientes não precisam de uma foto de 24MP de uma camiseta. Exporte a no máximo 2000px de largura.
- Usar PNG para fotos de produto. PNG é 3-5× maior que JPEG para fotos. Use WebP ou JPEG.
- Ignorar as miniaturas da página de coleção. Mesmo que suas páginas de produto estejam otimizadas, sua página de coleção pode estar carregando 20+ miniaturas não otimizadas. Isso se acumula rápido.
- Não definir dimensões de imagem. Isso causa CLS e faz sua página pular durante o carregamento. É a correção mais fácil com o maior impacto.
- Esquecer o mobile. Seu LCP no desktop pode estar ótimo com 2,1s, mas no mobile pode estar 5,8s. Sempre faça auditoria em mobile primeiro.
Checklist Rápido de Otimização de Imagens para E-commerce
- Execute o PageSpeed Insights nas suas 3 páginas de produto mais visitadas
- Identifique as imagens que o relatório sinaliza como "Dimensione adequadamente" ou "Codifique de forma eficiente"
- Redimensione cada imagem para o tamanho real de exibição (1600px para imagens hero, 400px para miniaturas)
- Comprima tudo para qualidade JPEG 80 (ou qualidade WebP 75) e faça upload novamente
- Verifique se as tags img têm width/height e adicione loading="lazy" nas imagens abaixo da dobra
- Execute novamente o PageSpeed Insights e confira a melhora
- Repita para todo o seu catálogo
Otimização de imagens de e-commerce não é ciência de foguetes. É o trabalho braçal que a maioria dos donos de loja não faz — e é exatamente por isso que fazer isso te coloca à frente da concorrência. Comprima suas imagens de produto antes do upload e veja suas pontuações de Core Web Vitals subirem.
Seus clientes não vão notar a compressão. Eles só vão notar que sua loja carrega antes que eles percam a paciência e fechem a página.