performance

Pontuação de desempenho Lighthouse

O MetricSpot puxa a pontuação de desempenho do PageSpeed Insights. Combina métricas de laboratório de pintura, interatividade e estabilidade num 0–100.

O que esta verificação faz

Chama a API do PageSpeed Insights para o URL da página e reporta a pontuação global de desempenho (0–100). A pontuação é uma média ponderada de cinco métricas de laboratório: First Contentful Paint, Largest Contentful Paint, Total Blocking Time, Cumulative Layout Shift e Speed Index.

Porque é importante

O desempenho é um fator de ranking confirmado através dos Core Web Vitals e um fator de conversão confirmado por todos os estudos de conversão alguma vez publicados. A pontuação Lighthouse é o número único mais fácil de seguir — o próprio Google agrupa-a em três bandas:

  • 90–100 (verde) — rápido. Aponta a isto.
  • 50–89 (laranja) — precisa de trabalho.
  • 0–49 (vermelho) — lento. Provavelmente a perder rankings e conversões.

Uma página a 30 não é ligeiramente pior do que uma a 80; está a perder visitantes antes de eles verem o que quer que seja.

Como corrigir

O trabalho de desempenho é um esforço em camadas. Ataca primeiro os maiores contribuidores:

1. Otimiza as maiores imagens (LCP).

A maior parte das páginas lentas são-no por causa de uma imagem hero que pesa 2–5 MB. Comprime-a, serve-a em AVIF/WebP, define width e height explícitos:

<img
  src="/hero.avif"
  width="1200"
  height="630"
  alt="…"
  fetchpriority="high"
  loading="eager">

fetchpriority="high" diz ao navegador para carregar esta imagem antes de ativos não críticos — melhora diretamente o LCP.

2. Adia JavaScript não crítico (TBT e INP).

Todos os scripts de analytics, widgets de chat e testes A/B correm na thread principal antes de os utilizadores poderem interagir. Mete-lhes defer ou async:

<script src="/analytics.js" defer></script>
<script src="https://plausible.io/js/plausible.js" defer></script>

Para React/Next.js: code-split de componentes pesados, usa dynamic(() => import(...), { ssr: false }) para widgets abaixo da dobra, e audita scripts de terceiros no separador Performance do DevTools.

3. Inline o CSS crítico, adia o resto.

<style>/* CSS crítico — visível acima da dobra */</style>
<link rel="preload" href="/main.css" as="style" onload="this.rel='stylesheet'">

Extratores de CSS crítico (Critters, Beasties para Next.js, astro:assets para Astro) automatizam isto.

4. Reserva espaço para conteúdo dinâmico (CLS).

Todas as imagens precisam de width e height. Todos os embeds precisam de um contentor explícito. Todas as web fonts precisam de font-display: swap e um fallback com métricas correspondentes.

5. Cache, compressão, CDN.

Serve ativos estáticos a partir de um CDN (Cloudflare, Bunny, Fastly). Ativa compressão Brotli em HTML/CSS/JS. Define Cache-Control: public, max-age=31536000, immutable em ativos com fingerprint.

Ferramentas a usar:

  • PageSpeed Insights — o mesmo motor que o MetricSpot chama. Mostra falhas específicas das auditorias.
  • Chrome DevTools → painel Performance — encontra o frame realmente lento.
  • npx unlighthouse https://teudominio.com — Lighthouse em todas as páginas, não só na homepage.
  • WebPageTest — para testar a partir de geografias e tipos de ligação específicos.

Verificações relacionadas: LCP, INP, CLS.

Perguntas frequentes

Porque difere a minha pontuação Lighthouse local da do PSI?

O Lighthouse local usa o teu CPU e rede; o PSI usa um dispositivo Android de gama média em ligação 4G. O PSI é o que o Google usa para o sinal real — afina sempre contra ele, não contra a pontuação do teu MacBook M3.

A pontuação afeta o ranking diretamente?

Indiretamente. O Google posiciona com base nos três Core Web Vitals (LCP, INP, CLS) — não na pontuação composta. Mas uma pontuação Lighthouse baixa quase sempre significa que as métricas CWV subjacentes também estão más. Corrige as métricas; a pontuação acompanha.

A minha pontuação oscila entre visitas — porquê?

Os dados de campo (o que o PSI mostra quando o URL tem tráfego de Chrome suficiente) são estáveis. Os dados de laboratório (uma única execução do Lighthouse) são variáveis — servidor quente/frio, redes de anúncios a carregar criativos diferentes, scripts de terceiros. Corre o PSI três vezes e tira a mediana, ou apoia-te nos 28 dias de dados de campo quando disponíveis.

Fontes

Última atualização 2026-05-11