Desarrollo web
Core Web Vitals: qué son, qué umbrales cumplir y cómo mejorarlos
Definición de LCP, INP y CLS, los umbrales que Google publica para cada una, cómo medirlas gratis y qué hacer cuando tu sitio no los cumple.
Respuesta corta
Las Core Web Vitals son tres métricas con las que Google mide la experiencia de carga de una página: LCP (velocidad de carga percibida) por debajo de 2.5 segundos, INP (capacidad de respuesta) por debajo de 200 milisegundos y CLS (estabilidad visual) por debajo de 0.1. Se miden gratis con PageSpeed Insights.
Casi toda conversación sobre velocidad web termina en estas tres siglas. Vale la pena saber qué mide cada una, porque se arreglan de formas distintas.
Las tres métricas
LCP — Largest Contentful Paint. Cuánto tarda en aparecer el elemento visible más grande de la pantalla: normalmente la imagen principal o el titular. Es la métrica de "cuánto tarda en verse algo útil".
INP — Interaction to Next Paint. Cuánto tarda la página en responder cuando alguien toca o hace clic. Reemplazó a FID porque mide todas las interacciones, no solo la primera.
CLS — Cumulative Layout Shift. Cuánto se mueve el contenido mientras carga. Es la métrica de "iba a tocar el botón y se movió".
Los umbrales y las definiciones oficiales están documentados por Google en web.dev/vitals.
Umbrales
| Métrica | Bueno | Necesita mejorar | Malo |
|---|---|---|---|
| LCP | ≤ 2.5 s | 2.5 – 4.0 s | > 4.0 s |
| INP | ≤ 200 ms | 200 – 500 ms | > 500 ms |
| CLS | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
Google evalúa el percentil 75 de las visitas reales, no el promedio. Eso significa que tres cuartas partes de tus visitantes tienen que estar dentro del umbral.
Cómo medirlas
PageSpeed Insights es gratuito y da dos cosas a la vez: una prueba de laboratorio en condiciones controladas y los datos de campo del Chrome UX Report, que son visitas reales. Los datos de campo solo aparecen cuando tu sitio tiene tráfico suficiente.
Search Console incluye un informe de Core Web Vitals que agrupa páginas con problemas parecidos, útil cuando el sitio es grande.
Un detalle que confunde a mucha gente: la prueba de laboratorio y los datos de campo casi nunca coinciden. La de laboratorio te dice qué arreglar; la de campo te dice si el arreglo sirvió.
Qué revisar cuando fallan
LCP alto
- Imágenes sin optimizar, sin formato moderno o sin tamaño declarado
- La imagen principal cargándose de forma diferida cuando debería ser prioritaria
- Fuentes web que bloquean el renderizado
- Servidor lento o sin caché
INP alto
- JavaScript pesado ejecutándose en el hilo principal
- Scripts de terceros: chats, píxeles, gestores de etiquetas
- Manejadores de eventos que hacen demasiado trabajo de golpe
CLS alto
- Imágenes sin ancho y alto declarados
- Anuncios o banners que se insertan y empujan el contenido
- Fuentes que cambian de tamaño al cargar
- Elementos inyectados por scripts después del primer pintado
El orden por el que conviene empezar
- Mide con datos de campo, no solo de laboratorio.
- Arregla primero la métrica que está en rojo, no las tres a la vez.
- Empieza por las imágenes: suelen ser la causa más común de un LCP malo y la más barata de resolver.
- Revisa los scripts de terceros. Cada chat, píxel y widget cuesta capacidad de respuesta.
- Vuelve a medir con datos de campo pasadas unas semanas.
En resumen
Las Core Web Vitals son LCP, INP y CLS, con umbrales de 2.5 s, 200 ms y 0.1 respectivamente, evaluados sobre el 75% de las visitas reales. Mídelas gratis con PageSpeed Insights, arregla primero la que esté en rojo y empieza por las imágenes y los scripts de terceros.
¿Quieres que revisemos el rendimiento de tu sitio? Cuéntanos tu proyecto.