A velocidade da página afeta diretamente a experiência do usuário, as taxas de conversão e os ranqueamentos de busca. Pesquisas mostram que um atraso de 1 segundo no tempo de carregamento leva a uma queda de 7% nas conversões. Aqui estão 12 técnicas comprovadas para deixar seu site mais rápido.

1. Otimize Imagens (Maior Ganho)

As imagens são tipicamente os maiores ativos em qualquer página web. Três passos:

Use formatos modernos: Converta JPEG/PNG para WebP ou AVIF. O WebP é cerca de 30% menor que o JPEG com a mesma qualidade. O AVIF é cerca de 50% menor.

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Imagem hero" width="1200" height="600" />
</picture>

Implemente lazy loading: Use loading="lazy" em imagens abaixo da dobra. Nunca aplique lazy load na sua imagem de LCP.

Defina dimensões explícitas: Sempre especifique width e height para evitar deslocamentos de layout.

2. Habilite Compressão

Habilite compressão Gzip ou Brotli no seu servidor. O Brotli é mais recente e de 20 a 26% mais eficiente que o Gzip. Somente isso pode reduzir o tamanho de transferência de HTML/CSS/JS em 60 a 80%.

3. Aproveite o Cache do Navegador

Defina cabeçalhos de cache adequados para ativos estáticos. Durações longas de cache (1 ano) para arquivos versionados, curtas para HTML:

Cache-Control: public, max-age=31536000, immutable  # Ativos estáticos
Cache-Control: public, max-age=0, must-revalidate   # HTML

4. Use uma Rede de Distribuição de Conteúdo (CDN)

Uma CDN serve seus ativos a partir de servidores geograficamente próximos aos seus usuários, reduzindo a latência. Para a maioria dos sites, uma CDN por si só pode melhorar o TTFB em 50 a 200ms. Opções populares: Cloudflare, Fastly, AWS CloudFront.

5. Minimize Recursos que Bloqueiam a Renderização

Scripts em <head> sem defer ou async bloqueiam o processamento:

<!-- Bloqueia a renderização -->
<script src="analytics.js"></script>

<!-- Sem bloqueio -->
<script src="analytics.js" defer></script>

<!-- Carrega em paralelo, executa quando pronto -->
<script src="widget.js" async></script>

Para CSS: inline o CSS crítico e carregue o restante de forma assíncrona usando o truque media="print".

6. Pré-carregue Recursos Críticos

Informe ao navegador sobre recursos críticos antes que ele os descubra durante o processamento:

<!-- Pré-carregue a imagem hero do LCP -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

<!-- Pré-carregue a fonte crítica -->
<link rel="preload" as="font" href="/fonts/inter.woff2" type="font/woff2" crossorigin />

7. Reduza o Tamanho do Bundle de JavaScript

O JavaScript é custoso — precisa ser baixado, analisado, compilado e executado.

Use tree shaking para eliminar código não utilizado
Code splitting por rota — não carregue tudo de uma vez
Use analisadores de bundle (webpack-bundle-analyzer) para encontrar dependências pesadas
Substitua bibliotecas pesadas por alternativas mais leves (por exemplo, date-fns em vez de moment.js)

8. Otimize Fontes

As fontes web são frequentemente negligenciadas, mas podem impactar significativamente o desempenho:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;    /* Exibe o texto imediatamente na fonte de fallback */
  font-weight: 400 700;  /* Intervalo de fonte variável */
}

O subsetting de fontes (incluindo apenas os caracteres que você realmente usa) pode reduzir o tamanho do arquivo de fonte em mais de 80%.

9. Implemente CSS Crítico

Extraia e inline o CSS necessário para renderizar o conteúdo acima da dobra. Isso permite que o primeiro paint aconteça sem esperar o download completo da folha de estilos.

Ferramentas: pacote npm critical, Penthouse, ou automatizado via PostCSS.

10. Reduza o Tempo de Resposta do Servidor (TTFB)

Meta: menos de 600ms. Melhorias:

Use connection pooling para conexões com banco de dados
Cache dos resultados de consultas ao banco de dados (Redis, Memcached)
Habilite HTTP/2 ou HTTP/3 no seu servidor
Otimize índices do banco de dados para consultas lentas
Considere renderização de borda para conteúdo dinâmico

11. Elimine CSS Não Utilizado

Frameworks CSS como Bootstrap ou Tailwind podem resultar em arquivos CSS grandes se não forem configurados corretamente. Use PurgeCSS ou o sistema de purga integrado do seu framework para remover estilos não utilizados.

Com Tailwind CSS, configure a opção content adequadamente:

// tailwind.config.js
content: ["./src/**/*.{html,js,ts,tsx}"]

12. Use Resource Hints

Forneça ao navegador dicas sobre navegações futuras:

<!-- Inicia conexão com domínio externo antecipadamente -->
<link rel="preconnect" href="https://fonts.googleapis.com" />

<!-- Busca recursos da próxima página quando a navegação for provável -->
<link rel="prefetch" href="/proxima-pagina.html" />

<!-- Pré-renderiza a próxima página provável (agressivo) -->
<link rel="prerender" href="/proxima-pagina.html" />

Medindo Suas Melhorias

Após implementar essas mudanças, meça com:

Krokanti Audit: Relatório completo com comparação antes/depois na aba Histórico (Pro)
PageSpeed Insights: Dados de campo de usuários reais
Aba Network do Chrome DevTools: Visualização em cascata

Execute uma auditoria gratuita do site para ver sua pontuação de desempenho atual, identificar exatamente quais dessas 12 técnicas terão o maior impacto no seu site e obter uma lista de correções priorizada.