Que son los Core Web Vitals?
Los Core Web Vitals son un conjunto de metricas de rendimiento del mundo real definidas por Google para medir la calidad de la experiencia del usuario en las paginas web. Se convirtieron en una senal de clasificacion de Google en 2021. Miden el rendimiento de carga, la estabilidad visual y la interactividad, los tres aspectos de la experiencia de pagina que mas afectan a los usuarios.
Actualmente hay tres metricas Core Web Vitals:
- LCP, Largest Contentful Paint (carga)
- CLS, Cumulative Layout Shift (estabilidad visual)
- INP, Interaction to Next Paint (interactividad, reemplazo de FID en 2024)
LCP, Largest Contentful Paint
Que mide: Cuanto tiempo tarda en renderizarse el elemento de contenido visible mas grande. Suele ser una imagen hero, un encabezado grande o un poster de video a pantalla completa.
Por que importa: El LCP es un indicador aproximado de "que tan rapido se siente que ha cargado la pagina". Los usuarios forman su primera impresion de la velocidad de la pagina cuando aparece el contenido principal.
Puntuacion:
- Bien: <= 2,5 segundos
- Necesita mejora: 2,5-4 segundos
- Deficiente: > 4 segundos
Correcciones clave: Precargar su imagen LCP. Anadir <link rel="preload" as="image" href="hero.webp"> en el <head>. Esto solo tipicamente reduce 1-2 segundos del LCP.
CLS, Cumulative Layout Shift
Que mide: Cuanto cambia inesperadamente el diseno de la pagina durante la carga y el uso.
Por que importa: Los cambios de diseno inesperados causan clics en el elemento incorrecto, perdida de posicion de lectura y una experiencia de usuario frustrante.
Puntuacion:
- Bien: <= 0,1
- Necesita mejora: 0,1-0,25
- Deficiente: > 0,25
Correcciones clave: Siempre establecer width y height en los elementos <img>. El navegador usa estos valores para reservar el espacio correcto antes de que cargue la imagen, previniendo un cambio.
INP, Interaction to Next Paint
Que mide: La capacidad de respuesta de la pagina a las interacciones del usuario (clics, toques, entrada de teclado).
INP reemplazo a FID (First Input Delay) en marzo de 2024. FID solo media la primera interaccion; INP mide todas las interacciones durante una sesion.
Puntuacion:
- Bien: <= 200 milisegundos
- Necesita mejora: 200-500ms
- Deficiente: > 500ms
Correcciones clave: Dividir tareas largas usando scheduler.yield() o setTimeout(fn, 0). Auditar y diferir scripts de terceros.
Como medir los Core Web Vitals
Datos de usuario real:
- Google Search Console -> Informe Core Web Vitals
- Informe de experiencia de usuario de Chrome (CrUX)
Pruebas de laboratorio:
- PageSpeed Insights
- Lighthouse en Chrome DevTools
- WebPageTest
Google usa datos de campo (CrUX) para la clasificacion. Si dispone de datos de campo, optimice para ellos, no solo para la puntuacion de Lighthouse.
Resumen
LCP (carga), CLS (estabilidad) e INP (interactividad) son las tres senales de clasificacion Core Web Vitals de Google. Umbrales buenos: LCP <= 2,5s, CLS <= 0,1, INP <= 200ms. Precargar el recurso LCP, anadir dimensiones de imagen y eliminar JavaScript que bloquea el hilo principal son las correcciones de mayor impacto para la mayoria de los sitios.