Performance Abril 2026 14 min de leitura

Análise de Performance de Site: Core Web Vitals, PageSpeed e Otimização Completa

Um site lento perde visitantes, vendas e posições no Google. Neste guia, você vai entender as métricas de performance que realmente importam, como medi-las corretamente e quais ações tomar para acelerar seu site de forma significativa.

Por que performance de site importa tanto?

Os números são claros e consistentes em dezenas de estudos:

Performance não é apenas uma questão técnica — é uma questão de negócio. Um e-commerce que carrega em 2 segundos em vez de 5 pode ver um aumento de 25-30% na taxa de conversão.

Core Web Vitals: as 3 métricas do Google

Em 2021, o Google definiu três métricas como os Core Web Vitals — sinais de experiência do usuário que afetam diretamente o ranqueamento. Em 2024, uma delas foi atualizada. Veja o estado atual:

LCP (Largest Contentful Paint)

Mede quanto tempo leva para o maior elemento visível da página ser renderizado. Pode ser uma imagem hero, um bloco de texto ou um vídeo. É a métrica que mais correlaciona com a percepção de "o site carregou".

Causas comuns de LCP ruim:

INP (Interaction to Next Paint)

O INP substituiu o FID (First Input Delay) em março de 2024. Enquanto o FID media apenas a primeira interação, o INP avalia a responsividade durante toda a visita. Ele mede o tempo entre uma interação do usuário (clique, toque, tecla) e a atualização visual da página.

Causas comuns de INP ruim:

CLS (Cumulative Layout Shift)

Mede a instabilidade visual — quanto os elementos da página se movem inesperadamente durante o carregamento. Sabe quando você está prestes a clicar em algo e o layout pula? Isso é layout shift, e é extremamente frustrante para o usuário.

Causas comuns de CLS alto:

Ferramentas de medição de performance

PageSpeed Insights

A ferramenta oficial do Google. Usa dados reais de usuários (campo) via Chrome UX Report e dados de laboratório via Lighthouse. Sempre priorize os dados de campo — são eles que o Google usa para ranqueamento.

Como usar corretamente:

  1. Acesse pagespeed.web.dev
  2. Insira a URL da página específica (não apenas a homepage)
  3. Analise primeiro a seção "Dados de campo" (se disponíveis)
  4. Use a seção "Diagnóstico" para identificar problemas específicos
  5. Teste tanto a versão mobile quanto desktop

Importante: a pontuação numérica (0-100) é baseada em dados de laboratório e pode variar entre testes. Os Core Web Vitals de campo são mais estáveis e mais relevantes.

GTmetrix

Alternativa popular que combina dados do Lighthouse com métricas próprias. Vantagens: permite testar de diferentes localizações (incluindo São Paulo), simular diferentes conexões e comparar com histórico de testes anteriores.

A versão gratuita permite testes de Vancouver. Para testar de São Paulo (essencial para sites brasileiros), é necessário o plano pago.

WebPageTest

A ferramenta mais detalhada para análise técnica. Permite testar de múltiplas localidades, ver o waterfall completo de carregamento, simular diferentes dispositivos e conexões. É gratuita e essencial para diagnósticos avançados.

Recurso único: o waterfall view mostra exatamente a ordem em que cada recurso é carregado, facilitando a identificação de gargalos.

Chrome DevTools

Já está no seu navegador. A aba Performance permite gravar o carregamento e identificar exatamente o que está lento. A aba Network mostra todos os recursos carregados, seus tamanhos e tempos.

Dica: ative "Slow 3G" na aba Network para simular conexões lentas. Se seu site funciona bem em 3G lento, vai voar em 4G/5G.

Microsoft Clarity e performance

O Clarity não mede Core Web Vitals diretamente, mas revela o impacto de performance ruim no comportamento do usuário. Um site lento aparece nos dados do Clarity como:

Tempo de resposta do servidor (TTFB)

O TTFB (Time to First Byte) mede quanto tempo leva para o servidor enviar o primeiro byte de resposta após receber a requisição. É o ponto de partida de todo carregamento — se o TTFB é lento, tudo mais será lento.

Benchmarks de TTFB:

Como melhorar o TTFB:

Otimização de imagens para performance

Imagens representam em média 50% do peso total de uma página web. A otimização de imagens é quase sempre o maior ganho de performance com o menor esforço.

Checklist de otimização de imagens:

  1. Use formatos modernos — WebP oferece 25-35% de compressão a mais que JPEG com qualidade similar. AVIF é ainda melhor (50%+ de redução) mas tem suporte limitado em navegadores mais antigos
  2. Defina dimensões explícitas — sempre inclua width e height nas tags <img> para evitar CLS
  3. Implemente lazy loading — adicione loading="lazy" em imagens abaixo do fold. Não use em imagens do hero/banner (LCP)
  4. Use responsive images — com srcset, sirva tamanhos diferentes para telas diferentes. Não envie uma imagem de 2000px para um celular de 375px
  5. Comprima antes de subir — ferramentas como Squoosh (Google), TinyPNG ou ShortPixel podem reduzir o tamanho em 60-80% sem perda visível de qualidade

CDN: distribuindo conteúdo globalmente

Uma CDN armazena cópias do seu conteúdo em servidores (edge servers) distribuídos geograficamente. Quando um visitante acessa seu site, ele recebe o conteúdo do servidor mais próximo.

CDNs populares para sites brasileiros:

Impacto real: para um site hospedado em São Paulo, visitantes de Manaus podem ver o TTFB cair de 300ms para 50ms com uma CDN que tenha edge server na região Norte.

Otimizações CSS e JavaScript

CSS crítico

O navegador não renderiza nada até que todo o CSS seja baixado e processado. A solução é extrair o CSS crítico (necessário para o conteúdo visível sem scroll) e inline no HTML. O restante do CSS é carregado de forma assíncrona.

<!-- CSS crítico inline -->
<style>
  /* Apenas CSS necessário para above-the-fold */
  .hero { ... }
  .nav { ... }
</style>

<!-- CSS completo carregado de forma assíncrona -->
<link rel="preload" href="/style.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">

JavaScript diferido

Scripts de terceiros (analytics, chat, ads) frequentemente são os maiores vilões de performance. Use defer ou async para evitar que bloqueiem a renderização:

Dica prática: audite quantos scripts de terceiros seu site carrega. Cada um adiciona peso e tempo de processamento. Remova o que não está sendo usado ativamente.

Fontes web otimizadas

Fontes customizadas podem adicionar 100-300KB ao peso da página e causar FOUT ou FOIT:

Solução:

  1. Use font-display: swap na declaração @font-face
  2. Preload as fontes mais importantes: <link rel="preload" href="/font.woff2" as="font" crossorigin>
  3. Use apenas os pesos que realmente usa (400, 600, 700 em vez de 100-900)
  4. Prefira formato WOFF2 (30% menor que WOFF)

Checklist de performance por prioridade

Organize sua otimização por impacto:

Impacto alto (faça primeiro):

  1. Otimize imagens (formato, compressão, lazy loading)
  2. Ative CDN com cache
  3. Melhore hospedagem se TTFB > 600ms
  4. Remova JavaScript desnecessário

Impacto médio:

  1. Implemente CSS crítico inline
  2. Otimize fontes web
  3. Ative compressão Gzip/Brotli
  4. Configure cache headers adequados

Impacto menor (refinamento):

  1. Prefetch de páginas prováveis de navegação
  2. Service worker para cache offline
  3. HTTP/2 push de recursos críticos

Monitoramento contínuo

Performance não é um projeto único — é um processo contínuo. Novas features, conteúdo e scripts de terceiros podem degradar a performance silenciosamente.

Configure alertas para:

O ClarityInsights inclui análise de sinais de frustração que frequentemente são causados por performance ruim, ajudando a identificar problemas antes que afetem suas métricas de negócio.

Quer relatórios automáticos do Clarity?

ClarityInsights analisa seus dados e envia um relatório AI com recomendações UX.

Obtenha seu relatório grátis

Artigos relacionados

Velocidade de Carregamento de Site: Como Testar e Melhorar Otimizar Imagens para Site: Formatos, Compressão e Lazy Loading