Puntuación de rendimiento de Lighthouse

Qué comprueba esta verificación

Llama a la API de PageSpeed Insights para la URL de la página y reporta la puntuación global de rendimiento (0–100). La puntuación es una media ponderada de cinco métricas de laboratorio: First Contentful Paint, Largest Contentful Paint, Total Blocking Time, Cumulative Layout Shift y Speed Index.

Por qué importa

El rendimiento es un factor de ranking confirmado vía Core Web Vitals y un factor de conversión confirmado por todos los estudios de conversión jamás publicados. La puntuación de Lighthouse es el número único más fácil de seguir — Google la agrupa en tres bandas:

• 90–100 (verde) — rápido. Apunta aquí.
• 50–89 (naranja) — hay trabajo por hacer.
• 0–49 (rojo) — lento. Probablemente estás perdiendo posicionamiento y conversiones.

Una página en 30 no es ligeramente peor que una en 80; está perdiendo visitantes antes de que vean nada.

Cómo arreglarlo

El trabajo de rendimiento es por capas. Ataca primero a los mayores contribuidores:

1. Optimiza las imágenes más grandes (LCP).

La mayoría de páginas lentas lo son por una imagen hero de 2–5 MB. Comprímela, sírvela en AVIF/WebP, ponle width y height explícitos:

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

fetchpriority="high" le dice al navegador que descargue esta imagen antes que los activos no críticos — mejora directamente el LCP.

2. Aplaza el JavaScript no crítico (TBT e INP).

Todo script de analítica, widget de chat y test A/B se ejecuta en el hilo principal antes de que el usuario pueda interactuar. Aplázalos con defer o async:

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

Para React/Next.js: code-split en componentes pesados, usa dynamic(() => import(...), { ssr: false }) para widgets bajo el pliegue, y audita los scripts de terceros en el panel Performance de DevTools.

3. Inline el CSS crítico, aplaza el resto.

<style>/* CSS crítico — visible sobre el pliegue */</style>
<link rel="preload" href="/main.css" as="style" onload="this.rel='stylesheet'">

Los extractores de CSS crítico (Critters, Beasties para Next.js, astro:assets para Astro) automatizan esto.

4. Reserva espacio para contenido dinámico (CLS).

Toda imagen necesita width y height. Todo embed necesita un contenedor explícito. Toda fuente web necesita font-display: swap y un fallback cuyas métricas coincidan.

5. Caché, compresión, CDN.

Sirve activos estáticos desde un CDN (Cloudflare, Bunny, Fastly). Activa la compresión Brotli en HTML/CSS/JS. Configura Cache-Control: public, max-age=31536000, immutable en activos con hash en el nombre.

Herramientas para usar:

• PageSpeed Insights — el mismo motor que llama MetricSpot. Muestra las auditorías específicas que fallan.
• Chrome DevTools → panel Performance — encuentra el frame realmente lento.
• npx unlighthouse https://yoursite.com — Lighthouse contra cada página, no solo la home.
• WebPageTest — para probar desde geografías y tipos de conexión específicos.

Verificaciones relacionadas: LCP, INP, CLS.

Preguntas frecuentes

¿Por qué mi Lighthouse local difiere del PSI?

Lighthouse local usa tu CPU y red; PSI usa un Android de gama media con throttling sobre 4G. PSI es lo que Google usa para la señal real — afina siempre contra eso, no contra la puntuación de tu MacBook M3.

¿La puntuación afecta al posicionamiento directamente?

Indirectamente. Google posiciona por los tres Core Web Vitals (LCP, INP, CLS) — no por la puntuación compuesta. Pero una puntuación de Lighthouse baja casi siempre significa que las CWV subyacentes también van mal. Arregla las métricas; la puntuación sigue detrás.

Mi puntuación varía entre visitas — ¿por qué?

Los datos de campo (lo que muestra PSI cuando la URL tiene suficiente tráfico de Chrome de usuarios reales) son estables. Los datos de laboratorio (una sola ejecución de Lighthouse) son variables — servidor caliente/frío, redes publicitarias cargando creatividades distintas, scripts de terceros. Lanza PSI tres veces y coge la mediana, o apóyate en los datos de campo de 28 días cuando estén disponibles.