¿Qué son las Core Web Vitals y cómo medirlas?

Google define las Core Web Vitals como un conjunto de métricas que miden la experiencia del usuario en relación al tiempo de carga de un sitio web, interacción con el contenido y estabilidad visual de las páginas. En las Core Web Vitals hay tres métricas fundamentales:

Cumulative Layout Shift

El Cumulative Layout Shift (CLS) es una de las métricas clave de Core Web Vitals y mide la estabilidad visual de una página durante la carga. En otras palabras, cuánto “salta” o se desplaza el contenido mientras los elementos terminan de renderizarse.

Los principales responsables de un CLS elevado suelen ser imágenes o videos sin dimensiones definidas, anuncios que se cargan tarde y empujan el contenido hacia abajo, iframes insertados sin reservar espacio o cambios de tipografía que modifican el tamaño del texto.

Estos movimientos generan una experiencia frustrante para el usuario (clics accidentales, pérdida de foco en la lectura) y son penalizados por Google si superan el umbral recomendado: mantener un CLS inferior a 0,1 es lo óptimo.

La mejor práctica siempre es anticiparse: reservar espacio estático para elementos dinámicos, declarar ancho y alto en imágenes y videos, optimizar la carga de fuentes y testear de forma recurrente con herramientas como PageSpeed Insights, Lighthouse o el informe de Core Web Vitals en Search Console. Mi recomendación es tratar el CLS no como un simple indicador técnico, sino como un reflejo directo de la calidad de la experiencia de usuario, y por ello aspirar siempre al valor ideal: 0.

Largest Contentful Paint (LCP)

El Largest Contentful Paint (LCP) es una métrica esencial de Core Web Vitals que mide el tiempo en que carga el elemento más grande y relevante que el usuario ve en pantalla (normalmente el titular, la imagen destacada o un bloque de texto), y Google recomienda mantenerlo por debajo de 2,5 segundos para garantizar una experiencia óptima.

Este valor depende de cuatro factores clave: el Time to First Byte, que es el tiempo que tarda el servidor en empezar a responder; el Resource Load Delay, que corresponde al tiempo que el navegador necesita para detectar el recurso principal; el Resource Load Time, que mide cuánto tarda en descargarse ese recurso (como una imagen); y el Render Delay, que es el tiempo que el navegador tarda en mostrarlo visualmente al usuario.

Mejorar el LCP exige optimizar el servidor y el TTFB, priorizar la carga de los recursos críticos, usar formatos de imagen eficientes como WebP, reducir el bloqueo por JavaScript y dar prioridad al renderizado del contenido visible sin scroll, ya que, en última instancia, el LCP refleja el momento en que el usuario percibe que la página está realmente lista.

Interaction to Next Paint (INP)

El Interaction to Next Paint (INP) es la métrica de Core Web Vitals que evalúa la capacidad de respuesta de una página, es decir, cuánto tarda en reaccionar la interfaz desde que el usuario interactúa (por ejemplo, hace clic en un botón, toca un enlace o escribe en un campo) hasta que el navegador muestra la siguiente actualización visual. Google considera que un buen parámetro sería un INP inferior a 200 milisegundos, lo que significaría que las respuestas son casi instantáneas y el usuario siente que la web es fluida. Para optimizarlo, es clave reducir tareas pesadas de JavaScript, priorizar procesos críticos, minimizar el trabajo en el hilo principal y asegurar que las transiciones visuales ocurran sin retrasos perceptibles.

Para auditar y mejorar Core Web Vitals recomiendo tres herramientas clave: Search Console, para ver datos reales de usuarios; PageSpeed Insights, para diagnósticos puntuales; y Lighthouse, para un análisis técnico más profundo.