Otimização de Velocidade de Site: Guia Técnico Completo

Site lento perde usuário, perde conversão e perde ranking no Google. Essa combinação faz da velocidade uma das prioridades de investimento técnico mais justificáveis para qualquer empresa que depende de resultados online.

Este guia apresenta o processo completo de diagnóstico e otimização de velocidade, com foco nas áreas que mais impactam a experiência real do usuário.

Como medir velocidade de site corretamente

Antes de otimizar, meça. Ferramentas certas:

PageSpeed Insights (pagespeed.web.dev): usa dados reais de usuários do Chrome (CrUX) combinados com análise sintética do Lighthouse. Use para ver LCP, INP e CLS reais.

WebPageTest (webpagetest.org): teste mais detalhado com waterfall, filmstrip e análise de recursos individuais. Útil para diagnóstico aprofundado.

Chrome DevTools > Performance: para análise local em desenvolvimento, antes de publicar.

Google Search Console > Core Web Vitals: dados reais de todos os usuários do seu site ao longo do tempo. O mais importante para SEO.

Sempre meça no mobile em conexão lenta - é como a maioria dos usuários no Brasil acessa.

As 3 métricas que o Google usa para ranking

LCP - Largest Contentful Paint

Tempo até o maior elemento visível carregar. Meta: abaixo de 2,5s.

O LCP é quase sempre:

• Imagem hero (banner principal da home)
• Imagem de produto em página de e-commerce
• Texto grande em primeiro plano

INP - Interaction to Next Paint

Tempo de resposta a interações do usuário (cliques, toques, digitação). Meta: abaixo de 200ms.

Problemas de INP geralmente vêm de:

• JavaScript pesado bloqueando a thread principal
• Event handlers ineficientes
• Renderizações desnecessárias no React/Vue

CLS - Cumulative Layout Shift

Quanto o layout se move durante o carregamento. Meta: abaixo de 0,1.

Causas comuns de CLS alto:

• Imagens sem dimensões definidas
• Anúncios que aparecem empurrando conteúdo
• Fontes customizadas trocando o fallback
• Elementos injetados dinamicamente acima do conteúdo visível

Veja os guias individuais: melhorar LCP, melhorar INP, reduzir CLS.

Área 1: Imagens (maior impacto na maioria dos sites)

Imagens representam 60-80% do peso total da maioria das páginas. Otimizar imagens é sempre o primeiro passo.

Ações prioritárias:

1. Converter para WebP ou AVIF

   • WebP: 30-50% menor que JPEG com qualidade equivalente
   • AVIF: ainda menor, mas suporte mais limitado em navegadores antigos
   • Use <picture> com fallback para JPEG/PNG

2. Dimensionar corretamente

   • Não servir imagem 2000px para exibir em 400px
   • Use atributo srcset para servir tamanho correto por breakpoint

3. Lazy loading em imagens fora da viewport

   • loading="lazy" em todas as imagens abaixo do fold
   • Nunca use lazy loading na imagem hero (LCP sofre)

4. Definir width e height em todas as imagens

   • Evita CLS causado por imagens sem dimensões definidas

Veja o guia completo de otimização de imagens.

Área 2: JavaScript (impacto em INP e LCP)

JavaScript bloqueia parsing e renderização. Quanto mais JS, mais lento fica.

Ações prioritárias:

1. Auditoria de bundle

   • Identifique scripts grandes desnecessários no <head>
   • Use Coverage no Chrome DevTools para ver JS não usado

2. Defer e async estratégicos

   • Scripts não críticos: <script defer>
   • Scripts de terceiros (analytics, chat, pixels): carregar após load event

3. Remover plugins e scripts desnecessários

   • Cada plugin do WordPress adiciona JS ao site
   • Slider, popup, compartilhamento social - cada um tem custo

4. Code splitting em SPAs

   • React, Vue, Angular: carregue apenas o JS necessário para a rota atual

Veja otimização de JavaScript.

Área 3: Cache e CDN

Cache evita que o servidor processe e entregue os mesmos recursos múltiplas vezes. CDN entrega recursos a partir de servidores geograficamente próximos do usuário.

Cache HTTP:

• Recursos estáticos (CSS, JS, imagens): Cache-Control: max-age=31536000, immutable
• HTML: Cache-Control: no-cache (ou curto, como 5-60 minutos)
• Use hash de arquivo no nome para invalidar cache após atualização

CDN:

• Cloudflare (gratuito para maioria dos casos)
• Reduz TTFB, distribui carga, protege contra DDoS
• Para sites WordPress: Cloudflare + WP Rocket ou W3 Total Cache

Área 4: Servidor e hospedagem

Mesmo o melhor código não compensa um servidor lento. Indicadores de problema:

• TTFB acima de 600ms: servidor muito lento ou longe geograficamente do usuário
• PHP 7.x ou inferior: versão antiga é mais lenta e sem suporte de segurança
• Hospedagem compartilhada sobrecarregada: você sofre com o tráfego dos vizinhos

Ações:

• Servidor em data center no Brasil (preferencialmente São Paulo)
• PHP 8.2+
• HTTP/2 ou HTTP/3 habilitado
• Compressão Gzip ou Brotli ativa

Área 5: Fontes customizadas

Fontes do Google Fonts ou Typekit podem adicionar 300-600ms de tempo de carregamento se não forem tratadas.

Boas práticas:

• font-display: swap para mostrar texto enquanto a fonte carrega
• Self-hosting: hospedar fontes no próprio servidor elimina round-trip externo
• Limitar variantes: cada peso e estilo é um arquivo separado. Não carregue fontes que não usa

Processo de otimização: por onde começar

1. Medir com PageSpeed Insights e anotar LCP, INP, CLS
2. Resolver imagens (geralmente maior ganho rápido)
3. Resolver JavaScript (segundo maior ganho com menos esforço)
4. Configurar cache e CDN
5. Verificar servidor (TTFB)
6. Resolver fontes
7. Medir novamente e comparar

Como priorizar as correções

Nem toda otimização rende o mesmo. Comece pelo que tem impacto alto e esforço baixo, e só depois invista em mudanças estruturais.

Meça depois de cada bloco de mudanças. Otimizar tudo de uma vez impede saber o que funcionou e pode introduzir regressões difíceis de rastrear.

Fontes e referências

• web.dev: Core Web Vitals: definição das métricas e metas de experiência.
• web.dev: Largest Contentful Paint: como medir e melhorar o LCP.
• web.dev: Interaction to Next Paint: como medir e melhorar o INP.
• web.dev: Cumulative Layout Shift: como medir e reduzir o CLS.
• MDN: HTTP: cabeçalhos de cache, compressão e resposta.

FAQ

Qual pontuação no PageSpeed é considerada boa?

No PageSpeed Insights: acima de 90 é bom, 50-89 é regular, abaixo de 50 é problemático. Mas pontuação é indicador, não objetivo. O que importa são as métricas reais: LCP < 2,5s, INP < 200ms, CLS < 0,1.

WordPress pode ser rápido?

Sim, mas requer mais trabalho. WordPress com tema pesado, muitos plugins e sem cache pode ter LCP de 6-8s. Com otimização adequada (cache, CDN, tema leve, imagens otimizadas), sites WordPress chegam facilmente a LCP abaixo de 2s.

Quanto tempo leva uma otimização de velocidade?

Para ganhos rápidos (imagens, cache básico): 1-2 dias. Para otimização completa que inclui revisão de código, arquitetura de cache avançada e ajuste de servidor: 1-3 semanas dependendo da complexidade.

A velocidade do site afeta diretamente o ranqueamento no Google?

Sim. Core Web Vitals (LCP, INP, CLS) são sinais de ranqueamento confirmados pelo Google desde 2021. Sites que atendem os critérios “Bom” para as 3 métricas têm vantagem sobre sites que não atendem, em condições de conteúdo equivalente.