Rendimiento y mantenimiento

Google PageSpeed Insights: corrige LCP, CLS e INP

Descubre cómo interpretar cada métrica de Google PageSpeed Insights y aplica las mejoras concretas que realmente suben tu puntuación y aceleran tu web.

Close-up of professionals reviewing financial graphs at a business meeting.

Google PageSpeed Insights analiza cualquier URL de forma gratuita y te entrega datos de rendimiento reales junto con una lista priorizada de mejoras. Para usarlo, entra a pagespeed.web.dev, escribe la URL de tu página y haz clic en Analizar; en segundos obtendrás métricas de campo (usuarios reales) y de laboratorio (simulación controlada), más recomendaciones concretas.

Esta guía te explica qué significa cada sección, cómo leer los resultados y qué acciones tomar para subir tu puntuación de forma efectiva.

Cómo funciona PageSpeed Insights: datos de campo vs. datos de laboratorio

Antes de mirar los números, entiende de dónde vienen:

  • Datos de campo (CrUX): experiencias reales de usuarios de Chrome en tu página durante los últimos 28 días. Estos son los datos que Google usa para posicionamiento. Solo aparecen si tu página tiene suficiente tráfico.
  • Datos de laboratorio (Lighthouse): simulación en red de velocidad controlada (móvil lento de forma predeterminada). Siempre aparecen, pero no representan condiciones reales de todos tus usuarios.

La puntuación de 0 a 100 que ves en pantalla corresponde a los datos de laboratorio. Un sitio puede tener 55/100 en laboratorio y aun así tener buenos Core Web Vitals en campo si el servidor y el CDN son rápidos. Mira ambas secciones, no solo el número.

Las métricas principales que debes entender

PageSpeed Insights muestra varias métricas. Las más importantes son los Core Web Vitals:

Métrica ¿Qué mide? Meta "Bueno"
LCP (Largest Contentful Paint) Cuánto tarda en mostrarse el elemento visual más grande (imagen principal, hero, título) ≤ 2.5 s
INP (Interaction to Next Paint) Latencia de respuesta al interactuar (clic, toque, teclado) ≤ 200 ms
CLS (Cumulative Layout Shift) Estabilidad visual: cuánto se "mueven" los elementos al cargar ≤ 0.1
FCP (First Contentful Paint) Tiempo hasta que aparece el primer texto o imagen ≤ 1.8 s
TBT (Total Blocking Time) Tiempo en que el hilo principal está bloqueado y no puede responder al usuario ≤ 200 ms
Speed Index Qué tan rápido se llena visualmente la página ≤ 3.4 s

Los tres Core Web Vitals (LCP, INP, CLS) son señales de posicionamiento directas. Priorízalos sobre cualquier otra métrica.

Cómo leer las oportunidades y los diagnósticos

Debajo de las métricas encontrarás dos secciones:

Oportunidades (Opportunities)

Son mejoras con ahorro estimado de tiempo de carga. PageSpeed las ordena por impacto. Las más frecuentes son:

  • Eliminar recursos que bloquean el renderizado — CSS y JS externos en el <head> que retrasan el FCP.
  • Servir imágenes en formatos de nueva generación — cambiar JPEG/PNG a WebP o AVIF.
  • Codificar imágenes de forma eficiente — imágenes sin comprimir que pesan mucho más de lo necesario.
  • Aplazar imágenes fuera de pantalla — imágenes que no están en el viewport inicial y se cargan igual.
  • Habilitar compresión de texto — GZIP o Brotli sin activar (ver nuestra guía de rendimiento web para los pasos concretos).
  • Reducir el tiempo de respuesta del servidor (TTFB) — el servidor tarda demasiado en responder.

Diagnósticos (Diagnostics)

Son problemas que afectan el rendimiento aunque no tienen un ahorro estimado exacto: uso ineficiente de caché, JavaScript no utilizado, CSS no utilizado, tamaño excesivo del DOM, etc.

El flujo de trabajo correcto para mejorar tu puntuación

No intentes arreglar todo a la vez. Sigue este orden:

  1. Analiza móvil primero. Google indexa en modo móvil; la puntuación de escritorio es siempre mejor y no representa el mayor riesgo.
  2. Copia las oportunidades con mayor ahorro estimado en una hoja de cálculo o lista.
  3. Aplica una mejora a la vez — esto te permite medir el impacto real de cada cambio.
  4. Vuelve a analizar después de cada cambio para confirmar la mejora y evitar regresiones.
  5. Repite hasta llegar a 90+ en móvil o hasta que los ahorros estimados restantes sean menores a 0.1 s.

Las agencias especializadas como elenlace.com siguen exactamente este proceso iterativo antes de declarar un sitio optimizado.

Acciones concretas según el problema encontrado

LCP alto (imagen o bloque tarda en aparecer)

  • Agrega rel="preload" a la imagen hero: <link rel="preload" as="image" href="hero.webp">.
  • Convierte la imagen a WebP y ajusta sus dimensiones al tamaño real de visualización.
  • Nunca apliques loading="lazy" a la imagen que está visible de entrada.

CLS alto (elementos que se mueven)

  • Define siempre width y height en tus etiquetas <img>.
  • Reserva espacio para anuncios y embeds con un contenedor de tamaño fijo.
  • Carga fuentes web con font-display: swap para evitar saltos de texto.

TBT / INP alto (página no responde bien)

  • Identifica los scripts de terceros más pesados y cárgalos con defer o async.
  • Divide tareas largas de JavaScript en fragmentos más pequeños.
  • Usa Web Workers para cómputo intensivo fuera del hilo principal.

Recursos que bloquean el renderizado

  • Mueve los <script> no críticos al final del <body> o agrégales defer.
  • Extrae el CSS crítico ("above the fold") e incrústalo en el <head>; carga el resto de forma asíncrona.

Conclusiones clave

  • PageSpeed Insights combina datos de usuarios reales (CrUX) con simulaciones de laboratorio (Lighthouse); mira las dos secciones.
  • Los Core Web Vitals (LCP, INP, CLS) son señales directas de posicionamiento — priorízalos.
  • Analiza siempre en modo móvil primero.
  • Aplica mejoras de una en una y vuelve a medir para cuantificar el impacto real.
  • Las ganancias más rápidas suelen ser: comprimir imágenes, activar GZIP, diferir JS no crítico y añadir caché del navegador.

Mejorar tu puntuación en PageSpeed Insights es un proceso iterativo, no un arreglo de una sola vez. Si necesitas ayuda profesional para diagnosticar y corregir los cuellos de botella de tu sitio, el equipo de elenlace.com puede hacer una auditoría completa y aplicar las mejoras por ti. Explora más técnicas en nuestra sección de rendimiento web.

Preguntas frecuentes

¿Necesito llegar a 100/100 en PageSpeed Insights?

No es necesario ni realista para la mayoría de los sitios con contenido dinámico, plugins de terceros o publicidad. Una puntuación de 90+ en móvil es un objetivo sólido. Lo más importante es que los Core Web Vitals estén en zona "Bueno" según los datos de campo, ya que esos son los que Google usa para posicionamiento.

¿Por qué mi puntuación cambia entre análisis consecutivos?

Los datos de laboratorio de Lighthouse varían porque simulan condiciones de red y CPU que pueden fluctuar levemente entre ejecuciones. Para obtener una tendencia fiable, promedia 3-5 análisis consecutivos o usa la herramienta de forma regular a lo largo del tiempo.

¿PageSpeed Insights mide mi sitio en móvil o en escritorio?

Mide ambos por separado. La pestaña predeterminada al abrir los resultados es Móvil, que simula una conexión 4G lenta y una CPU de gama media. Puedes cambiar a Escritorio con el selector en la parte superior. Prioriza siempre los resultados de móvil.

¿Cuánto tarda en reflejarse una mejora en los datos de campo?

Los datos de campo (CrUX) se actualizan con una ventana deslizante de 28 días. Esto significa que verás el impacto completo de tus cambios en el informe unas 4 semanas después de implementarlos. Los datos de laboratorio reflejan los cambios de inmediato.

Recursos útiles

Otros proveedores y guías que vale la pena comparar:

← Todos