Core Web Vitals: qué son y cómo medirlos sin engañarte

Qué son LCP, INP y CLS

Son tres métricas que describen la carga, la respuesta y la estabilidad visual de una página. web.dev publica sus umbrales:

Los umbrales se miden sobre el percentil 75 de las visitas, separando móvil y escritorio. Es decir, tu página no tiene que ser rápida en tu computador: tiene que serlo para tres de cada cuatro visitantes. Detalle de cada métrica: LCP, INP y CLS.

INP reemplazó a FID como métrica de respuesta y desde 2024 es una Core Web Vital estable.

Laboratorio frente a campo

PageSpeed Insights muestra dos cosas distintas en la misma pantalla. Los datos de campo salen de usuarios reales de Chrome durante los últimos 28 días; los de laboratorio, de una carga simulada en un solo dispositivo y con una red fija.

La puntuación de 0 a 100 sale solo del laboratorio. Lo que vive tu visitante está en los datos de campo, cuando existen.

Si tu sitio tiene poco tráfico, es normal que no haya datos de campo. En ese caso el laboratorio es lo único que tienes, y sirve para comparar cambios entre sí, no para afirmar cómo carga para tus usuarios.

Otro detalle: Lighthouse no puede medir INP, porque en una prueba de laboratorio nadie hace clic. Usa el Total Blocking Time como aproximación, y no es un sustituto.

Por qué una sola corrida miente

La propia documentación de Lighthouse lo reconoce: la mayor parte de la variación en la puntuación no se debe a la herramienta, sino a cambios en las condiciones de la prueba. Recomienda pensar el rendimiento como una distribución, no como un número.

resultado A   rendimiento 80   LCP 3,0 sresultado B   rendimiento 64   LCP 7,2 s→ Cada corrida dio A o B. Nunca un valor intermedio.

Lo medí en un sitio que audito. Si me hubiera quedado con las primeras corridas, habría reportado un empeoramiento que no existía.

Mi regla: mínimo tres corridas, y reporto la mediana junto con el rango. Si el rango es amplio lo digo, porque entonces ninguna comparación con una medición anterior es confiable.

Cuál es de verdad tu elemento LCP

Se suele asumir que el LCP es la imagen grande de la portada. Pero los bloques de texto también son candidatos, y a veces ganan.

En ese mismo sitio, el elemento LCP era el título H1, no la imagen del hero, que ocupaba siete veces más área. Chrome no la contaba por ser una imagen de fondo a pantalla completa, así que optimizarla no habría movido el LCP.

Antes de optimizar, identifica el elemento: el panel Performance de las herramientas para desarrolladores de Chrome lo marca, y PageSpeed Insights lo señala en su diagnóstico.

Qué arreglar primero

• Scripts de terceros que no usas. En un sitio que audité, dos etiquetas de Google cargaban 273 KB de JavaScript, y una parte nunca llegaba a ejecutarse.

• Imágenes y videos sin dimensiones, una de las causas principales de CLS. Declara width y height reales, que coincidan con el archivo.

• Fuentes web que cambian de tamaño al cargar, porque también mueven el contenido. Alójalas en tu propio servidor y elige un reemplazo de tamaño parecido.

• El elemento LCP concreto. Si es texto, lo que suele retrasarlo es la fuente o el JavaScript que pinta la página; si es una imagen, su peso y su prioridad de carga.

Si tu sitio depende de JavaScript para pintar el contenido, eso afecta a la vez al rendimiento y a lo que recibe Google, como explico en por qué una página no aparece en Google.

En la auditoría SEO técnica mido así: varias corridas, mediana y rango, y el elemento LCP identificado antes de recomendar nada.