Core Web Vitals en profundidad

Domina las métricas de experiencia de página: LCP, INP y CLS para superar los estándares de Google.

📘 Teoría

LCP: Largest Contentful Paint

Mide cuándo se carga el elemento más grande visible en la vista del puerto.

El LCP suele ser la imagen principal, un bloque de texto grande o un video. Este elemento es lo primero que el usuario ve como contenido significativo.

Optimiza el servidor: usa CDN, cache, gzip
Elimina recursos que bloquean render
Optimiza imágenes: WebP, tamaño correcto, lazy loading (excepto above-the-fold)
Precarga el recurso LCP con
Minimiza CSS y JS

Bueno

Menos de 2.5 segundos

Necesita mejora

Entre 2.5 y 4 segundos

Poor

Más de 4 segundos

INP: Interaction to Next Paint

Mide la capacidad de respuesta de la página a las interacciones del usuario.

INP reemplazó a FID (First Input Delay) en 2024. Mide el tiempo desde que el usuario hace una interacción hasta que el navegador puede pintar la siguiente respuesta.

Reduce JavaScript largo (long tasks)
Divide tareas largas en tareas más pequeñas
Usa requestIdleCallback para tareas no críticas
Evita JavaScript pesado en eventos de usuario
Optimiza event handlers

Bueno

Menos de 200 milisegundos

Necesita mejora

Entre 200 y 500 milisegundos

Poor

Más de 500 milisegundos

CLS: Cumulative Layout Shift

Mide la estabilidad visual: cuánto se mueve el contenido inesperadamente durante la carga.

CLS alto indica una experiencia frustrante: el usuario intenta hacer clic y un elemento se mueve. Es una de las métricas más notadas por los usuarios.