Resposta rápidase a loja virtual está lenta, comece pelo PageSpeed Insights na home e numa página de produto. Veja qual imagem é o elemento LCP e quais aparecem nos avisos de tamanho e formato. Corrija nesta ordem: medida (largura real de exibição), formato moderno (WebP), compressão (qualidade 75 a 85) e versões responsivas para celular. Meça de novo depois de cada etapa.
O cliente reclama que a loja "demora para abrir no celular". O tráfego pago está caro e a taxa de rejeição alta. A suspeita de sempre recai sobre a hospedagem, mas na maioria das lojas o vilão é mais simples de achar: fotos pesadas, grandes demais para o lugar onde aparecem.
Este roteiro mostra como confirmar se a loja virtual lenta é culpa das imagens, descobrir quais delas pesam e corrigir na ordem que traz mais resultado.
Por que as imagens costumam ser o gargalo
Numa loja virtual, foto é o produto. A vitrine tem dezenas de miniaturas, a página de produto tem galeria, e a home abre com um banner largo. Segundo os relatórios do HTTP Archive, as imagens estão entre os recursos que mais pesam numa página web típica, e em e-commerce isso costuma ser ainda mais acentuado.
O desperdício nasce no fluxo de cadastro:
- Foto direto da câmera ou do celular, com 4000 px de largura e vários MB, para aparecer num quadro de 600 px.
- Banner exportado em PNG quando é uma fotografia.
- Mesma imagem para celular e computador, obrigando o celular a baixar a versão de desktop.
- Imagens de descrição coladas no editor sem nenhum tratamento.
Velocidade e venda
O Google mede a experiência da página com as Core Web Vitals. A principal ligada a imagens é o LCP, o tempo até o maior elemento visível aparecer. Segundo o web.dev, o recomendado é que o LCP fique em até 2,5 segundos. Numa loja, esse maior elemento costuma ser o banner da home ou a foto principal do produto.
Como diagnosticar com o PageSpeed Insights
O PageSpeed Insights é gratuito e não exige instalar nada. Use este roteiro:
- Teste três páginas: a home, uma categoria e uma página de produto com várias fotos.
- Olhe primeiro a aba de celular, que é onde a lentidão costuma aparecer.
- Anote o LCP e veja qual elemento o relatório aponta como responsável.
- Abra o diagnóstico e procure os avisos sobre imagens.
- Liste as imagens citadas com o peso e a economia estimada que o relatório mostra.
- Repita o teste duas ou três vezes, porque os resultados variam um pouco a cada medição.
O que cada aviso quer dizer
| Aviso no relatório | O que significa | Correção principal |
|---|---|---|
| Dimensionar imagens corretamente | Foto maior que o espaço onde aparece | Redimensionar |
| Veicular imagens em formatos modernos | JPG/PNG onde caberia WebP ou AVIF | Converter |
| Codificar imagens com eficiência | Qualidade alta demais para a tela | Comprimir |
| Adiar imagens fora da tela | Tudo carrega de uma vez | Carregamento adiado (lazy) |
| Elemento LCP demorado | A foto principal chega tarde | Medida, formato e prioridade |
O relatório também estima quantos KB cada correção economiza. Use essa estimativa para priorizar: comece pelas imagens com maior economia.
Pasta Mágica
Corrija as imagens que o PageSpeed apontou
Redimensione, converta para WebP e comprima o catálogo inteiro na mesma passada, sem IA.
Quando o problema não é a imagem
Seja honesto com o diagnóstico. Se as imagens já estão leves e a loja continua lenta, o relatório vai apontar outros culpados, e corrigir fotos não vai resolver:
- Tempo de resposta do servidor alto: hospedagem sobrecarregada ou sem cache.
- Muitos scripts de terceiros: chat, pixels de anúncio, pop-ups e avaliações carregando juntos.
- Fontes pesadas ou carregadas de vários lugares.
- Tema com código acumulado de apps e plugins já desinstalados.
Nesses casos, o caminho passa pelo desenvolvedor do tema ou pelo suporte da plataforma. Ainda assim, vale tratar as imagens: é a correção mais barata e não depende de mexer em código. Uma loja virtual lenta quase sempre tem mais de uma causa, e as imagens costumam ser a mais fácil de atacar primeiro.
O que corrigir primeiro (e o impacto de cada ação)
Nem toda correção rende o mesmo. A ordem abaixo segue o que costuma trazer mais ganho com menos esforço.
1. Medida certa
É a correção mais rentável. Uma foto de 4000 px exibida a 800 px tem cerca de 25 vezes mais pixels do que precisa. Redimensionar para a largura real do tema, em geral entre 1000 e 1600 px para a foto ampliada, costuma cortar a maior parte do peso antes de qualquer compressão. O guia de tamanho ideal de imagem para loja virtual traz as medidas por área da loja.
2. Formato moderno
Converter JPG e PNG para WebP costuma reduzir o arquivo com a mesma aparência. O AVIF comprime ainda mais, mas é mais lento de gerar. Confira se a plataforma aceita WebP no upload; o passo a passo está em como converter imagens para WebP no e-commerce.
3. Compressão ajustada
Com a medida e o formato resolvidos, a qualidade entre 75 e 85 costuma ser imperceptível no celular. Teste com algumas fotos antes de aplicar no catálogo; detalhes em como comprimir imagens para loja virtual.
4. Versões responsivas
O celular não precisa baixar a versão de computador. Com srcset, o navegador escolhe a largura certa para cada tela. Isso exige gerar várias larguras da mesma foto e um tema que use esse recurso. Veja imagens responsivas com srcset.
5. Carregamento adiado
Imagens abaixo da dobra só precisam carregar quando o cliente rola a página. Muitos temas já fazem isso; confira no código se as miniaturas usam loading="lazy". A exceção é a imagem LCP: ela não deve ser adiada.
Antes e depois numa loja de moda
Pense numa loja com 400 produtos e 4 fotos cada, cadastradas direto do celular da fotógrafa.
- Antes: fotos com 3 a 6 MB, página de produto pesando dezenas de MB no celular, LCP muito acima do recomendado e plugin de otimização consumindo a hospedagem.
- Depois: as 1.600 fotos passam por um fluxo fixo (redimensionar para 1200 px, converter para WebP, comprimir em qualidade 80) e são recadastradas. O ganho exato depende do tema e da plataforma, por isso a regra é medir de novo no PageSpeed Insights.
Checklist para não voltar a ficar lenta
- Toda foto nova passa pelo mesmo fluxo antes do cadastro.
- O banner da home tem medida definida para celular e para computador.
- Imagens da descrição seguem o mesmo padrão das fotos do produto.
- O PageSpeed Insights é rodado depois de cada mudança de tema ou campanha.
Esse último ponto evita a armadilha mais comum: corrigir tudo uma vez e, seis meses depois, a loja virtual lenta de novo porque o banner da Black Friday subiu com 8 MB.
Perguntas frequentes
Rode a página de produto e a home no PageSpeed Insights e veja o diagnóstico. Avisos como dimensionar imagens corretamente, veicular imagens em formatos modernos e codificar imagens com eficiência apontam as imagens como causa. O elemento de maior exibição de conteúdo (LCP) costuma ser uma foto.
LCP (Largest Contentful Paint) mede quanto tempo o maior elemento visível da página leva para aparecer. Segundo o web.dev, do Google, o recomendado é ficar em até 2,5 segundos para a maioria das visitas. Em lojas, esse elemento costuma ser o banner da home ou a foto principal do produto.
Primeiro a medida: fotos muito maiores do que o tamanho em que aparecem são o desperdício mais comum. Depois o formato (WebP ou AVIF) e por último a qualidade de compressão. Em seguida, versões responsivas para celular e o carregamento adiado das imagens fora da tela.
Ajuda, mas tem limites. Muitos plugins otimizam na hora da entrega ou em segundo plano no servidor, o que pode pesar na hospedagem e deixar os originais enormes guardados. Subir as imagens já no tamanho e no formato certos reduz a dependência do plugin.
Vale conferir com o PageSpeed Insights. Várias plataformas redimensionam e convertem automaticamente, mas o resultado depende do tema, do banner e de imagens inseridas em textos. Se o diagnóstico ainda aponta imagens, há trabalho a fazer.
Como automatizar isso com a Pasta Mágica
Na Pasta Mágica, redimensionar, converter e comprimir usam bibliotecas de imagem tradicionais, sem IA. Você monta o fluxo na ordem certa uma vez e aplica a cada coleção nova.
- Crie sua conta em pastamagica.com.br/cadastrar e teste com as fotos que o PageSpeed apontou.
- Adicione Redimensionar imagem com a largura do seu tema, preservando a proporção.
- Encadeie Converter imagem para WebP e depois Comprimir imagem com a qualidade escolhida.
- Para o site com srcset, use Conjunto responsivo (srcset), que gera várias larguras da mesma foto.
- Solte as fotos e baixe tudo pronto, uma a uma ou em ZIP. Cada arquivo é conferido pelo conteúdo, não pela extensão.
O custo em créditos aparece antes de rodar e, se uma etapa falhar, a reserva volta sozinha. Os limites de cada plano estão na tabela de preços.
Pasta Mágica
Um fluxo fixo para toda foto nova da loja
Medida, formato e peso certos antes do cadastro. A loja para de engordar a cada coleção.
