De 3.8s a 1.2s: como uma loja WooCommerce otimizou 4.000 imagens

O diagnóstico inicial

“Site está lento.” A loja de roupas e acessórios nos contatou com esse problema. Nada novo. Mas tinha um detalhe: vendiam principalmente pelo Instagram. Tráfego mobile. Velocidade de carregamento estava afetando conversões.

Dados iniciais:

– 800 produtos ativos no WooCommerce
– ~5 imagens por produto em média
– 4.000 imagens na biblioteca de mídia
– 2.1 GB de peso total em /uploads/
– Hosting: VPS com 4GB RAM, SSD, PHP 8.1

Rodamos PageSpeed Insights na página de categoria mais visitada. Resultado:

– LCP mobile: 3.8 segundos (vermelho)
– FID: 120ms (amarelo)
– CLS: 0.08 (verde)
– Pontuação mobile: 42/100

O culpado principal era claramente LCP (Largest Contentful Paint). Imagens de produto demoravam demais para carregar.

Análise das imagens

Revisamos biblioteca de mídia:

– Formato: 95% JPEG, 5% PNG
– Tamanho médio por imagem original: 1.2 MB
– WordPress gera 6-8 tamanhos por imagem
– Total de arquivos: ~28.000 (4.000 originais × 7 tamanhos)
– Nenhuma imagem em WebP ou AVIF

As imagens vinham direto da câmera do fornecedor. Sem otimização. Sem redimensionamento. Muitas tinham 4000×3000 pixels quando tamanho máximo exibido no site era 800×800.

O plano de otimização

Desenhamos plano em três fases:

Fase 1: Converter todas imagens existentes para WebP.

Fase 2: Configurar otimização automática para novos uploads.

Fase 3: Implementar lazy loading e srcset corretamente.

Fase 1: Conversão bulk para WebP

Instalamos B Image Optimizer no VPS.

Verificamos compatibilidade do servidor:

– GD: com suporte WebP
– Imagick: com suporte WebP e AVIF
– Memória PHP: 256MB (suficiente)

Configuramos ajustes:

– Formato de saída: WebP (AVIF deixamos para depois, mais lento)
– Qualidade WebP: 82 (bom equilíbrio qualidade/tamanho)
– Manter originais: Sim
– Processar tamanhos do WordPress: Sim (todos os thumbnails)

Iniciamos campanha bulk.

Sistema usa Action Scheduler para processar em background. Configuramos 10 imagens por lote, cada 2 minutos, para não sobrecarregar servidor enquanto loja continuava funcionando.

Duração do processo: 4.000 imagens × ~28.000 arquivos totais demoraram 14 horas para processar completamente. Iniciamos às 22:00 e pela manhã estava terminado.

Resultados da conversão

Estatísticas do plugin após terminar:

– Peso original: 2.1 GB
– Peso otimizado: 680 MB
– Economia: 1.42 GB (67%)

A imagem média saiu de 1.2 MB para 180 KB. Sem perda visível de qualidade.

Fase 2: Otimização automática

Configuramos plugin para otimizar automaticamente ao fazer upload:

– Converter para WebP imediatamente
– Redimensionar originais para máximo 2000px (suficiente para qualquer uso)
– Comprimir ao fazer upload

Resultado: novas imagens entram otimizadas. Sem precisar intervenção manual.

Fase 3: Lazy loading e srcset

WordPress 5.5+ inclui lazy loading nativo, mas verificamos que estava ativo.

Também verificamos que tema usava corretamente srcset para servir tamanho adequado conforme viewport. Neste caso, tema (flavor de flavor) fazia bem.

Adicionamos pequeno ajuste: imagens above-the-fold (slider principal) carregam sem lazy loading para não atrasar LCP.

Medição pós-otimização

Uma semana após completar tudo, medimos novamente:

– LCP mobile: 1.2 segundos (verde) antes 3.8s
– FID: 45ms (verde) antes 120ms
– CLS: 0.05 (verde)
– Pontuação mobile: 89/100 antes 42

Melhoria em LCP foi de 68%. Pontuação do PageSpeed quase dobrou.

Impacto em Core Web Vitals do Search Console

Core Web Vitals do Search Console demoram algumas semanas para refletir mudanças (usam dados de campo de usuários reais).

4 semanas depois:

– URLs mobile “Boas”: de 12% para 78%
– URLs mobile “Precisam melhorar”: de 45% para 18%
– URLs mobile “Deficientes”: de 43% para 4%

Site passou de majoritariamente vermelho para majoritariamente verde.

Impacto em conversões

Cliente mede conversões com Google Analytics 4. Comparando mês anterior vs mês posterior:

– Taxa de rejeição mobile: -12% (menos gente sai por lentidão)
– Páginas por sessão mobile: +18% (navegam mais)
– Taxa de conversão mobile: +8%

Não podemos atribuir tudo à velocidade (há outros fatores), mas correlação temporal é forte demais para ignorar.

Custos e ROI: 59 reais por ano para ganhar muito mais

Investimento:

– Plugin B Image Optimizer: 59 reais/ano
– Tempo de configuração e monitoramento: 3 horas

Economia em hosting:

– Redução de 1.4 GB em armazenamento
– Redução de transferência de dados (menos MB servidos por visita)

Valor do aumento em conversões:

Com ticket médio de 65 reais e ~2.000 transações/mês, +8% em conversão = ~160 transações adicionais = ~10.400 reais/mês adicionais.

Mesmo que só 10% dessa melhoria for atribuível à velocidade, são ~1.000 reais/mês por investimento de 59 reais/ano.

Manutenção contínua

Após projeto inicial:

– Novas imagens são otimizadas automaticamente ao fazer upload.
– Revisamos estatísticas mensalmente para verificar que tudo funciona.
– A cada 6 meses revisamos se vale ativar AVIF (quando suporte de navegadores for maior).

Sistema funciona de forma autônoma. Como deve ser.

Lições aprendidas

1. Imagens são quase sempre o problema. Em sites de e-commerce com muitos produtos, imagens representam 70-90% do peso da página.

2. WebP é suficiente para maioria. AVIF comprime mais, mas demora mais para gerar e suporte de navegadores ainda não é universal. WebP é o sweet spot atual.

3. Processamento em background é chave. Processar 4.000 imagens de uma vez teria bloqueado servidor. Sistema de fila permite que loja continue funcionando.

4. Originais importam. Muitos clientes fazem upload de imagens de 10 MB diretamente da câmera. Otimizar ao fazer upload (redimensionar + comprimir) previne problema.

5. Core Web Vitals demoram para refletir. Não espere mudanças imediatas no Search Console. Dados de campo precisam de semanas de usuários reais.

Sua loja WooCommerce também pode ser mais rápida

Na Baqueiro, a gente otimiza lojas de verdade. Não é teoria. É prática. Com ferramentas certas e sem gambiarra. Se sua loja está lenta e você não sabe por onde começar, fale com a gente.