Como Alcançamos 98 no PageSpeed: Um Mergulho Técnico

Publicado em 16 de Dezembro, 2025 • 10 min de leitura

Quando lançamos o site da ThreadCode, não queríamos apenas que ficasse bonito - queríamos que fosse extremamente rápido. Afinal, que exemplo daríamos se nosso próprio site fosse lento? Esta é a história de como otimizamos nosso site para alcançar 98 no PageSpeed, reduzindo o tempo de carregamento em 78% e o peso total da página em 92%.

Isso não é conselho teórico - estas são as técnicas exatas que usamos no site que você está lendo agora. Cada otimização foi testada em batalha e comprovada em produção.

O Ponto de Partida: Medindo o Problema

Antes da otimização, nossas métricas eram vergonhosas para uma empresa de desenvolvimento web:

  • Pontuação PageSpeed: 61/100 (Mobile)
  • First Contentful Paint (FCP): 3,2s
  • Largest Contentful Paint (LCP): 5,8s
  • Peso Total da Página: 4,2 MB
  • Total de Requisições: 47 requisições

O pior? Nossa imagem hero sozinha tinha 2,1 MB. Inaceitável.

Otimização 1: Imagens WebP - A Solução de 97%

Esta foi nossa maior vitória. Converter imagens de PNG/JPG para WebP reduziu nosso peso total de imagens de 3,8 MB para apenas 117 KB - uma redução de 97%.

A Ferramenta: npx sharp-cli

Usamos a fantástica ferramenta sharp-cli para converter todas as imagens em lote. Aqui está exatamente o que executamos:

# Instalar sharp-cli globalmente (ou usar npx)
npm install -g sharp-cli

# Converter todos os PNGs para WebP com 80% de qualidade
npx sharp-cli -i "assets/images/*.png" -o "assets/images/{name}.webp" -f webp -q 80

# Converter todos os JPGs para WebP com 85% de qualidade
npx sharp-cli -i "assets/images/*.jpg" -o "assets/images/{name}.webp" -f webp -q 85

# Redimensionar e converter imagens hero
npx sharp-cli -i "assets/images/hero.png" -o "assets/images/hero.webp" \
  -f webp -q 80 --width 1920 --height 1080 --fit cover

Antes e Depois: Números Reais

  • ThreadCodeLogo.png: 856 KB → 24 KB (97% de redução)
  • hero-bg.jpg: 2,1 MB → 68 KB (97% de redução)
  • og-image.png: 632 KB → 18 KB (97% de redução)
  • Total de imagens: 3,8 MB → 117 KB (97% de redução)

Implementação: Progressive Enhancement

Usamos o elemento <picture> para progressive enhancement - servir WebP para navegadores que suportam, fallback para PNG/JPG para os outros:

<picture>
  <source srcset="assets/images/ThreadCodeLogo.webp" type="image/webp">
  <img src="assets/images/ThreadCodeLogo.png"
       alt="Logo ThreadCode"
       class="logo-image"
       width="180"
       height="60">
</picture>

Dica profissional: Sempre especifique atributos width e height para prevenir layout shift (CLS).

Vitória Rápida: Execute npx sharp-cli na sua pasta de imagens agora mesmo. É a otimização de maior impacto que você pode fazer, levando menos de 5 minutos para a maioria dos projetos.

Otimização 2: Removendo CSS e JavaScript Não Utilizados

Nosso arquivo CSS inicial tinha 127 KB, mas estávamos usando apenas cerca de 40% dele. Bootstrap, animações que não usávamos e estilos legados inflavam o arquivo.

O Que Fizemos

  1. Auditamos com Chrome DevTools: A aba Coverage mostrou 63% de CSS não utilizado
  2. Removemos Bootstrap: Não estávamos usando a maior parte, escrevemos CSS customizado e leve no lugar
  3. Inlinamos CSS crítico: Estilos above-the-fold inline no <head>
  4. Diferimos CSS não crítico: Carregamos estilos restantes assincronamente

Inline de CSS Crítico

<!-- Inline de CSS crítico para conteúdo above-the-fold -->
<style>
  /* Navegação, hero section, fontes - 8KB inline */
  .navbar { /* ... */ }
  .hero { /* ... */ }
  /* ... */
</style>

<!-- Diferir CSS não crítico -->
<link rel="preload" href="styles.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Resultados

  • Tamanho do CSS: 127 KB → 38 KB (70% de redução)
  • Tamanho do JavaScript: 89 KB → 24 KB (73% de redução)
  • Recursos que bloqueiam renderização: 4 → 0

Otimização 3: Lazy Loading de Imagens e Scripts

Por que carregar imagens e scripts para conteúdo que os usuários ainda não rolaram até ver? Lazy loading nativo torna isso trivial:

<!-- Lazy loading nativo (suportado em todos os navegadores modernos) -->
<img src="portfolio-image.webp"
     alt="Screenshot do Projeto"
     loading="lazy"
     width="800"
     height="600">

<!-- Lazy load iframes também -->
<iframe src="https://www.youtube.com/embed/video"
        loading="lazy"></iframe>

Para JavaScript below-the-fold, usamos Intersection Observer:

// Lazy load analytics apenas quando necessário
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadAnalytics();
      observer.disconnect();
    }
  });
});

observer.observe(document.querySelector('#analytics-trigger'));

Resultados

  • Requisições iniciais: 47 → 12 (74% de redução)
  • Peso inicial da página: 4,2 MB → 324 KB (92% de redução)

Otimização 4: Otimização de Fontes

Web fonts podem bloquear a renderização. Aqui está como as otimizamos:

Otimização do Google Fonts

<!-- Preconnect para Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Carregar apenas pesos necessários com display=swap -->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"
      rel="stylesheet">

O parâmetro display=swap mostra o texto imediatamente com fontes do sistema, depois troca quando a web font carrega. Isso elimina FOIT (Flash of Invisible Text).

O Que Evitamos

Inicialmente consideramos hospedar as fontes localmente, mas o CDN do Google é mais rápido e já está em cache para a maioria dos usuários. As dicas de preconnect foram suficientes.

Otimização 5: Minificação e Compressão

Compressão Gzip

Habilitamos compressão Gzip no nosso servidor (Vercel lida com isso automaticamente):

// vercel.json
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Encoding",
          "value": "gzip"
        }
      ]
    }
  ]
}

Minificação HTML/CSS/JS

Minificamos todos os arquivos de produção:

# Minificar CSS
npx clean-css-cli -o styles.min.css styles.css

# Minificar JavaScript
npx terser script.js -o script.min.js -c -m

# Minificar HTML
npx html-minifier --collapse-whitespace --remove-comments \
  --minify-css true --minify-js true -o index.min.html index.html

Resultados

  • Tamanho HTML: 42 KB → 28 KB (33% de redução)
  • Tamanho CSS: 38 KB → 31 KB (18% de redução)
  • Tamanho JS: 24 KB → 17 KB (29% de redução)

Otimização 6: Preloading de Recursos Críticos

Usamos resource hints para dizer ao navegador o que priorizar:

<!-- Preload fonte crítica -->
<link rel="preload"
      href="https://fonts.gstatic.com/s/plusjakartasans/..."
      as="font"
      type="font/woff2"
      crossorigin>

<!-- Preload imagem hero -->
<link rel="preload"
      href="assets/images/hero.webp"
      as="image">

<!-- DNS prefetch para recursos externos -->
<link rel="dns-prefetch" href="https://www.googletagmanager.com">

Otimização 7: Reduzindo Scripts de Terceiros

Scripts de terceiros são assassinos de performance. Auditamos cada script:

O Que Mantivemos

  • Google Analytics: Essencial para métricas (carregado async)
  • Lucide Icons: Biblioteca de ícones leve (10 KB)

O Que Removemos

  • jQuery: Não era necessário, usamos JS vanilla no lugar
  • Font Awesome: Substituído por Lucide (90% menor)
  • Widgets de compartilhamento social: Adicionamos botões de compartilhamento nativos simples
// Web Share API nativa (sem biblioteca de terceiros necessária)
async function shareArticle() {
  if (navigator.share) {
    await navigator.share({
      title: document.title,
      url: window.location.href
    });
  }
}

Os Resultados Finais

Depois de implementar todas as otimizações, aqui está onde chegamos:

Métricas PageSpeed

  • Pontuação PageSpeed: 61 → 98 (+37 pontos)
  • First Contentful Paint: 3,2s → 0,7s (78% mais rápido)
  • Largest Contentful Paint: 5,8s → 1,2s (79% mais rápido)
  • Time to Interactive: 6,1s → 1,4s (77% mais rápido)
  • Total Blocking Time: 890ms → 120ms (87% de redução)
  • Cumulative Layout Shift: 0,18 → 0,02 (89% de melhoria)

Métricas de Recursos

  • Peso Total da Página: 4,2 MB → 324 KB (92% de redução)
  • Total de Requisições: 47 → 12 (74% de redução)
  • Peso das Imagens: 3,8 MB → 117 KB (97% de redução)

Conclusões Práticas para Seu Site

Aqui está seu checklist de otimização, ordenado por impacto:

  1. Converter imagens para WebP - Execute npx sharp-cli (5 minutos, 90%+ de redução)
  2. Adicionar lazy loading - Adicione loading="lazy" às imagens (1 minuto)
  3. Habilitar compressão - Gzip/Brotli no seu servidor (5 minutos)
  4. Inlinar CSS crítico - Estilos above-the-fold no <head> (30 minutos)
  5. Remover CSS/JS não utilizados - Use aba Coverage do Chrome DevTools (1 hora)
  6. Otimizar fontes - Adicione display=swap e preconnect (5 minutos)
  7. Auditar scripts de terceiros - Remova o que você não precisa absolutamente (1 hora)
  8. Minificar tudo - Minificação HTML/CSS/JS (10 minutos)
Comece com imagens. No nosso caso, 90% do ganho de performance veio apenas da otimização de imagens. Execute npx sharp-cli na sua pasta de imagens e você verá resultados imediatos.

Ferramentas Que Usamos

  • PageSpeed Insights: Ferramenta de teste principal
  • Chrome DevTools: Aba Coverage, aba Network, Lighthouse
  • sharp-cli: Conversão e otimização de imagens
  • WebPageTest: Waterfall detalhado de performance
  • GTmetrix: Teste de performance alternativo

Erros Comuns a Evitar

1. Otimizar Cedo Demais

Não otimizamos até ter conteúdo e padrões de tráfego. Otimização prematura é esforço desperdiçado.

2. Quebrar Funcionalidade por Performance

Testamos cada otimização em dispositivos reais. Não sacrifique a experiência do usuário por uma pontuação PageSpeed.

3. Ignorar Mobile

70% do nosso tráfego é mobile. Otimizamos para mobile primeiro, desktop depois.

4. Não Medir o Impacto

Rastreamos métricas antes e depois de cada mudança. Dados vencem suposições.

Conclusão: Performance é uma Feature

Alcançar 98 no PageSpeed não foi sobre perfeccionismo - foi sobre proporcionar a melhor experiência de usuário possível. Sites rápidos convertem melhor, ranqueiam melhor no Google e respeitam o tempo e a largura de banda dos usuários.

As otimizações neste artigo nos levaram cerca de 8 horas no total para implementar. O resultado: um site 78% mais rápido que agora está no top 5% de todos os sites em termos de performance.

Seu site pode alcançar resultados similares. Comece com imagens (a fruta mais fácil de colher), depois trabalhe em CSS, JavaScript e scripts de terceiros. Meça tudo, teste em dispositivos reais e não pare até atingir 90+.

Performance não é apenas sobre velocidade - é sobre mostrar aos seus usuários que você se importa com a experiência deles. Faça disso uma prioridade.

Quer ajuda otimizando seu site? Na ThreadCode, otimizamos dezenas de sites de produção para 90+ no PageSpeed. Vamos deixar seu site extremamente rápido.