Blog

Como melhorar velocidade de loja virtual: priorize auditoria de performance, otimize imagens (WebP/AVIF e srcset), ative cache/CDN, compacte e adie scripts, reduza apps terceiros, melhore servidor/TTFB e valide Core Web Vitals (LCP, INP, CLS) com testes A/B e monitoramento RUM para garantir ganhos reais de SEO e conversão.

como melhorar velocidade de loja virtual pode parecer complicado, mas mudanças simples reduzem o carregamento e ajudam a converter mais visitantes. Quer ver etapas práticas e aplicáveis na sua loja?

Auditoria de velocidade: como medir e interpretar os dados

Uma auditoria de velocidade mostra onde sua loja está lenta e o que priorizar. Testes bem feitos revelam problemas no servidor, imagens, scripts e na experiência móvel.

Ferramentas essenciais

• Google PageSpeed Insights: indica Core Web Vitals e sugestões práticas.
• Lighthouse: gera relatório técnico com pontuação e oportunidades.
• GTmetrix e WebPageTest: permitem ver o waterfall e testar em locais diferentes.
• Console do navegador (Network/Performance): útil para analisar carregamento de recursos e JavaScript.

Métricas chave e como interpretá‑las

• LCP (Largest Contentful Paint): tempo até o maior conteúdo visível. Meta: <=2,5s.
• INP/FID: resposta a interações. Meta: baixo tempo de resposta (INP baixo preferível).
• CLS: estabilidade visual; valores <0,1 são aceitáveis.
• TTFB: tempo até o primeiro byte; indica performance do servidor. Meta: <400ms.
• Speed Index e First Contentful Paint (FCP): mostram percepções de velocidade pelo usuário.

Como interpretar o relatório

• Comece pelo LCP: se alto, verifique imagens grandes, fontes web e render-blocking.
• Se o CLS estiver ruim, procure imagens sem dimensão, anúncios ou alterações de layout por scripts.
• Anote scripts de terceiros que atrasam o carregamento e avalie removê‑los ou carregá‑los de forma assíncrona.
• Use o waterfall para identificar arquivos grandes ou solicitações que bloqueiam o tempo de pintura.
• Compare desktop e mobile; problemas podem aparecer só em conexões lentas ou em CPU limitada.

Priorize e planeje correções

• Busque ganhos rápidos: comprima imagens, ative cache, habilite compressão (gzip/ brotli) e minimize CSS/JS.
• Em seguida, ajuste servidor/CDN e otimize consultas de banco de dados se o TTFB estiver alto.
• Para problemas de interação, adie ou divida scripts pesados e implemente code splitting.
• Crie um plano com itens mensuráveis e prazo curto para validar impacto nas métricas.

Testes práticos e checklist

• Teste sempre em modo mobile com throttling (3G/CPU lento) e em locais diferentes.
• Execute testes limpos: limpe cache ou use modo anônimo para resultados consistentes.
• Monitore depois de cada alteração e compare antes/depois usando as mesmas condições.
• Implemente um orçamento de performance: limite de KB por página e tempo máximo de LCP.
• Documente mudanças e mantenha testes automatizados periódicos para evitar regressões.

Exemplo rápido: se o LCP for 6s e o waterfall aponta imagem hero de 3,5MB, converta para WebP/AVIF, defina largura/altura e ative lazy loading — então teste novamente.

Otimização de imagens e formatos modernos (WebP, AVIF)

Otimize imagens para reduzir bytes sem perder qualidade perceptível e melhorar tempos de carregamento e Core Web Vitals.

Por que formatos modernos importam

Formatos como WebP e AVIF oferecem compressão superior a JPEG/PNG. Isso reduz tamanho dos arquivos, acelera o carregamento e melhora o LCP em páginas com imagens grandes.

Diferenças práticas: WebP vs AVIF

• WebP: ampla compatibilidade e bom equilíbrio entre qualidade e desempenho.
• AVIF: compressão ainda maior, ideal para imagens ricas em detalhe; suporte crescente, ótimo para páginas que priorizam performance.
• Use WebP para compatibilidade imediata e AVIF quando o pipeline e o CDN suportarem o formato.

Boas práticas ao servir imagens

• gere múltiplos tamanhos e use srcset e sizes para entregar a versão ideal por dispositivo.
• defina width e height nas imagens para evitar CLS.
• ative lazy loading (loading=”lazy”) para imagens fora da dobra e preload apenas do hero image importante.
• comprima sem perder qualidade visual; ajuste quality entre 60–80 para WebP e valide visualmente.
• use um CDN de imagens que faça conversão automática e adaptação por device (Cloudinary, Imgix, BunnyCDN Image, etc.).

Automatize no fluxo de trabalho

Inclua otimização no build ou upload: ferramentas como Squoosh, ImageMagick, Sharp ou serviços que processam imagens automaticamente. Para CMS, use plugins que convertam e servem WebP/AVIF na hora do upload.

Testes e impacto no SEO

• Meça antes e depois com PageSpeed Insights, Lighthouse e WebPageTest; observe LCP, FCP e total transferido.
• Valide em mobile com throttling; ganhos em conexões lentas são mais perceptíveis.
• compare waterfall para ver redução de bytes e tempo de download das imagens.

Checklist rápido

• Converter imagens principais para WebP/AVIF e manter fallback para navegadores antigos.
• Gerar srcset responsivo e definir sizes adequados.
• Ativar lazy loading para imagens não críticas.
• Preload do hero image e compressão adequada (quality 60–80).
• Usar CDN com otimização on-the-fly e testar impacto nas métricas.

Exemplo prático: converta uma hero image de 3MB para AVIF, gere 3 larguras no srcset, ative lazy loading para imagens secundárias e reavalie LCP em mobile — você deve ver redução significativa no tempo de pintura.

Cache, CDN e configuração do servidor para lojas virtuais

Cache e CDN são essenciais para reduzir latência e diminuir carga no servidor. Com a configuração correta, páginas e imagens chegam ao cliente muito mais rápido.

Tipos de cache

• Cache do navegador: armazena arquivos estáticos no dispositivo do usuário. Use cabeçalhos para controlar validade.
• Cache do servidor/reverse proxy: Varnish ou Nginx podem servir páginas pré-renderizadas sem tocar a aplicação.
• Object cache: Redis ou Memcached guardam resultados de consultas e diminuem tempo de resposta do backend.
• OPcache e cache de opcode: reduz o tempo de execução do código PHP compilado.

Configurações essenciais

• Defina Cache-Control com TTL adequado para cada tipo de recurso. Assets estáticos podem ter TTL longo; HTML dinâmico geralmente curto.
• Use ETag e Expires para validar recursos e evitar downloads desnecessários.
• Ative compressão com gzip ou brotli e mantenha HTTP2/HTTP3 para conexões paralelas mais rápidas.
• Habilite keepalive e ajuste workers de aplicação (PHP-FPM, Node) para evitar filas no servidor.
• Implemente cache busting via fingerprinting de arquivos (hash no nome) para garantir atualização sem comprometer cache.

Como usar CDN corretamente

• Coloque imagens, CSS, JS e vídeos no CDN para reduzir distância até o usuário e melhorar TTFB.
• Configure regras de purge e invalidação para atualizar conteúdo crítico sem delays.
• Defina políticas de cache por rota e use cabeçalhos Vary quando necessário para conteúdo diferenciado por device ou idioma.
• Considere origin shield para reduzir chamadas ao servidor de origem e proteger a infraestrutura.

Dicas práticas para lojas virtuais

• Sirva conteúdo em cache para visitantes anônimos e bypass para usuários autenticados (carrinho/checkout).
• Separe recursos estáticos em subdomínio ou bucket para simplificar políticas de cache.
• Use TTLs conservadores para páginas que mudam com frequência e TTLs longos para imagens de produto estáveis.
• Implemente stale-while-revalidate e stale-if-error para manter a loja responsiva mesmo quando o origin falha.

Monitoramento e verificação

• Verifique cabeçalhos com curl ou ferramentas de rede para confirmar Cache-Control, Age e ETag.
• Monitore TTFB, LCP e taxa de cache hit no CDN para medir ganhos reais.
• Teste mudanças em ambiente staging e compare antes/depois com WebPageTest ou Lighthouse.

Exemplo prático: definir Cache-Control longo para /assets/, habilitar Brotli no servidor, colocar assets no CDN e configurar purge automático ao fazer deploy. Depois meça TTFB e LCP para validar o impacto.

Temas, scripts e apps: como reduzir recursos que pesam

Analise o tema da sua loja e identifique scripts e apps que consomem recursos sem trazer vendas.

Escolha de tema leve

Prefira temas com código limpo e componentes modulares. Temas pesados com muitos recursos visuais embutidos aumentam CSS e JS que nem sempre são usados. Teste um tema alternativo em staging antes de migrar.

Remova ou substitua apps desnecessários

• Liste plugins/apps instalados e avalie impacto no carregamento usando o waterfall.
• Desinstale apps não usados e prefira soluções nativas da plataforma quando possível.
• Use apps que carregam recursos apenas nas páginas necessárias (scoped loading).

Otimize scripts e carregamento

• Adie scripts não críticos com defer ou async para evitar bloqueio de renderização.
• Faça code splitting para carregar apenas o JavaScript necessário por rota.
• Combine e minimize arquivos quando o servidor não suportar HTTP/2; caso suporte, prefira múltiplas requisições paralelas.

Remova terceiros que pesam

Avalie tags e integrações (chat, analytics, pixels). Muitos snippets de terceiros aumentam solicitações e latência. Centralize carregamento e substiu­a por versões assíncronas ou por servidores próprios quando fizer sentido.

Fontes e recursos estáticos

• Limite famílias e pesos de fontes; use font-display:swap e carregue apenas o necessário.
• Evite carregar ícones como fontes pesadas; prefira SVG inline ou sprites otimizados.

Minimizar CSS e recursos do tema

• Gere CSS crítico (critical CSS) e adie o restante para reduzir tempo até a primeira pintura útil.
• Remova estilos não usados com ferramentas de purge css no build.
• Use cache busting por fingerprinting para manter TTLs longos sem servir versões antigas.

Testes práticos

• Crie um ambiente de staging e compare antes/depois com Lighthouse e WebPageTest.
• Faça alterações uma a uma e registre impacto em LCP, INP/ FID e TTFB.
• Mantenha um checklist mínimo: número de requisições, tamanho total de JS/CSS e tempo do maior componente.

Exemplo rápido: desative um app de chat que injeta 5 scripts e um CSS; depois de remover, verifique queda no total transferido e melhora no LCP.

Mobile e Core Web Vitals: melhorar experiência em celulares

Melhorar a experiência móvel reduz rejeição e aumenta conversões. Foque em reduzir tempos de pintura, resposta ao toque e evitar mudanças de layout inesperadas.

Métricas do Core Web Vitals no celular

• LCP: otimize hero image e elementos principais para aparecerem rápido.
• INP (antes FID): diminua latência de interação dividindo tarefas pesadas.
• CLS: reserve espaços para imagens, fontes e anúncios para evitar saltos visuais.

Layout e imagens responsivas

• Use srcset e sizes para entregar imagens na largura correta por dispositivo.
• Ative lazy loading para imagens fora da dobra e preload para o hero image.
• Defina width e height no HTML para prevenir CLS.

Reduzir trabalho do JavaScript

• Adie scripts não críticos com defer ou async.
• Implemente code splitting e carregue módulos só nas páginas que precisam.
• Divida tarefas pesadas para evitar bloqueio do main thread e melhorar resposta ao toque.

Fontes e renderização

• Limite famílias e pesos de fontes; use font-display: swap para evitar bloqueios.
• Prefira formatos modernos e subset de caracteres para reduzir bytes.

Otimização de rede e cache

• Use preconnect e preload para recursos críticos como fontes e APIs.
• Habilite HTTP/2 ou HTTP/3 e compressão (Brotli) para conexões móveis.
• Configure CDN com edge nodes próximos aos usuários móveis.

Práticas para interação e usabilidade

• Garanta botões e links com touch targets grandes e espaçados.
• Evite modais e pop-ups que bloqueiem a pintura inicial no mobile.
• Implemente feedback visual rápido para toques, como animações leves ou mudanças de cor imediatas.

Testes e monitoramento

• Teste em dispositivos reais e com throttling (CPU e rede) para simular usuários reais.
• Use Lighthouse, WebPageTest e dados de campo (CrUX) para medir LCP, INP e CLS.
• Automatize testes após deploy e monitore regressões em mobile.

Exemplo prático: se o LCP móvel é alto, converta o hero para WebP/AVIF, gere srcset, preload a versão crítica e adie scripts que não são essenciais; então reavalie as métricas no mobile.

Monitoramento, testes A/B e checklist de manutenção periódica

Monitore performance e faça testes A/B regularmente para evitar regressões e melhorar conversões. Dados reais mostram onde agir primeiro.

Ferramentas essenciais

• RUM (Real User Monitoring): coleta dados reais de usuários (CrUX, ferramentas do Analytics ou serviços como Datadog RUM).
• Sintéticos: Lighthouse CI, WebPageTest e scripts cron que simulam caminhos críticos.
• APM e logs: New Relic, Sentry ou ferramentas que mostram erros e latência do backend.
• CDN e CDN analytics: métricas de cache hit, latência e purge logs.

Métricas para acompanhar

• LCP, INP e CLS para experiência percebida.
• TTFB e taxa de cache hit para medir servidor e CDN.
• Taxa de erro, tempo médio de resposta e duração de requests críticas.
• Métricas de negócio: taxa de conversão, abandono de checkout e bounce rate.

Como executar testes A/B de performance

• Defina uma hipótese clara: por exemplo, “Converter hero para WebP reduz LCP e aumenta conversão”.
• Isole a variável: altere só o recurso que quer testar (imagem, script, lazy load).
• Implemente via feature flag ou CDN rule para evitar flash de conteúdo.
• Divida o tráfego em grupos e colete métricas de desempenho e de negócio.
• Use análise estatística para decidir: verifique significância e tamanho de efeito antes do rollout.
• Planeje rollback automático se métricas críticas piorarem.

Checklist de manutenção periódica

• Semanal: verificar alertas de TTFB, cache hit rate e erros críticos.
• Mensal: rodar auditorias Lighthouse completas em páginas-chave.
• Trimestral: revisar apps/third-parties e atualizar dependências do tema.
• A cada deploy: executar testes sintéticos automatizados e validar performance contra o budget.
• Continuamente: monitorar CrUX e comparar desktop vs mobile.

Automação e alertas

• Defina thresholds (ex.: LCP > 2.5s, cache hit < 70%) e receba alertas no Slack ou e-mail.
• Agende testes sintéticos em horários críticos de tráfego e armazene históricos.
• Implemente pipelines que rodem Lighthouse CI no CI/CD e falhem o deploy se ultrapassar o budget.

Exemplo prático: crie duas variantes do hero (A: JPEG, B: WebP), direcione 10% do tráfego para B, monitore LCP e taxa de conversão por 2 semanas. Se B reduzir LCP e mantiver conversão, faça rollout gradual e limpe o cache.

Resumo prático para acelerar sua loja

Pequenas mudanças trazem grandes resultados. Priorize auditoria, otimização de imagens, cache/CDN e reduzir scripts pesados.

Teste cada mudança com A/B, meça LCP, INP e CLS, além do TTFB. Monitore em mobile e em sessões reais. Automatize testes e alertas para detectar regressões.

Implemente por etapas: ganhos rápidos (compressão, cache, lazy loading), depois ajustes de servidor e refatoração do tema. Use um checklist e revisões periódicas para manter a velocidade e melhorar o SEO.

FAQ – Velocidade de loja virtual e SEO

O que é uma auditoria de velocidade e por que devo fazer?

É um diagnóstico que identifica gargalos de carregamento (imagens, scripts, servidor). Fazê‑la ajuda a priorizar correções que reduzem LCP, melhoram UX e aumentam conversões.

Quais ferramentas devo usar para medir performance?

Use PageSpeed Insights e Lighthouse para relatórios, WebPageTest e GTmetrix para waterfall, e RUM/CrUX para dados reais de usuários.

Como otimizar imagens sem perder qualidade?

Converta para WebP/AVIF, gere múltiplas larguras (srcset), defina width/height, ative lazy loading e use compressão com quality entre 60–80.

O que é CDN e como o cache ajuda a acelerar a loja?

CDN distribui arquivos em edge nodes próximos ao usuário; cache reduz solicitações ao servidor de origem. Juntos diminuem TTFB e o tempo de carregamento.

Como identificar e reduzir scripts e apps que pesam?

Analise o waterfall para ver scripts grandes ou bloqueantes, remova apps não usados, adie ou carregue scripts de terceiros de forma assíncrona e aplique code splitting.

Como testar mudanças e garantir que não há regressão?

Faça testes A/B isolando a variável, compare métricas (LCP, INP, CLS, TTFB) antes e depois, automatize Lighthouse CI e monitore RUM para detectar regressões.