Core Web Vitals explicadas: LCP, CLS e INP

Entiende las Core Web Vitals: LCP mide la velocidad, CLS la estabilidad e INP la capacidad de respuesta. Las tres importan para la experiencia.

Borrador

Las Core Web Vitals son tres métricas que Google usa para medir la experiencia de una página. LCP mide la velocidad de carga. CLS mide la estabilidad visual. INP mide la capacidad de respuesta.

Cada métrica mide un aspecto distinto del rendimiento. Juntas dibujan la experiencia del usuario.

Largest Contentful Paint (LCP)

LCP mide el tiempo hasta que carga el contenido principal. El contenido principal es la imagen o el bloque de texto más grande de la página. En una página de inicio, el LCP es la imagen principal. En un artículo, el LCP es el título y la imagen principal.

LCP se mide desde que el usuario hace clic en el enlace hasta que el contenido principal aparece en pantalla. Si el LCP es un segundo, el usuario ve el contenido principal un segundo después de hacer clic. Si es tres segundos, espera tres segundos.

Objetivo: un LCP por debajo de dos coma cinco segundos es bueno. Un LCP entre dos coma cinco y cuatro segundos necesita mejoras. Un LCP por encima de cuatro segundos es malo.

Ejemplo: la imagen principal de la página de inicio pesa cinco megabytes. Tarda tres segundos en descargarse. El LCP es de tres segundos. El objetivo es dos coma cinco segundos. El rendimiento necesita mejoras.

Cumulative Layout Shift (CLS)

CLS mide la estabilidad visual. Un salto de diseño ocurre cuando el contenido se mueve después de cargar la página. Ejemplo: el usuario empieza a leer un artículo. Carga un anuncio. El artículo baja. El usuario pierde el hilo. Es frustrante.

CLS cuantifica el salto de diseño total. Si el contenido baja doscientos píxeles, el CLS sube. Si el contenido se mueve varias veces, el CLS se acumula.

Objetivo: un CLS por debajo de cero coma uno es bueno. Un CLS entre cero coma uno y cero coma dos cinco necesita mejoras. Un CLS por encima de cero coma dos cinco es malo.

Ejemplo: un anuncio carga después de la página. El anuncio ocupa trescientos píxeles de alto. El contenido que hay debajo baja. El CLS es de cero coma quince. Necesita mejoras.

Interaction to Next Paint (INP)

INP mide la capacidad de respuesta. El usuario hace clic en un botón. El sistema procesa el clic. Actualiza la página. Pinta el cambio en pantalla. INP es el tiempo que pasa desde el clic hasta la actualización visual.

INP es importante en páginas interactivas (formularios, botones, menús). Es menos importante en páginas estáticas (artículos, blogs).

Objetivo: un INP por debajo de doscientos milisegundos es bueno. Un INP entre doscientos y quinientos milisegundos necesita mejoras. Un INP por encima de quinientos milisegundos es malo.

Ejemplo: el usuario hace clic en el botón Añadir al carrito. El sistema procesa la petición. Actualiza el contador del carrito. El INP es de trescientos milisegundos. Necesita mejoras.

Por qué tres métricas y no una

Una sola métrica no recoge la experiencia del usuario. Importa la velocidad de carga (LCP). Importa la estabilidad visual (CLS). Importa la capacidad de respuesta (INP). Una página puede cargar rápido pero ser inestable (CLS alto). O ser rápida y estable pero no responder (INP alto). Las tres métricas juntas miden la calidad de la experiencia.

Ejemplo real: Core Web Vitals de una tienda online

Punto de partida

Punto de partida de una página de producto de una tienda online:

LCP: dos coma ocho segundos (por encima del objetivo de dos coma cinco). CLS: cero coma doce (por encima del objetivo de cero coma uno). INP: doscientos veinte milisegundos (por encima del objetivo de doscientos).

Las tres métricas necesitan mejoras.

Optimización

LCP: optimizar la imagen principal y cargar de forma diferida (lazy load) el contenido que queda fuera de la primera pantalla. Resultado: uno coma ocho segundos.

CLS: reservar espacio para los anuncios y cargar de forma diferida el contenido no crítico. Resultado: cero coma cero cinco.

INP: reducir el JavaScript y optimizar los controladores de eventos. Resultado: ciento ochenta milisegundos.

Las tres métricas cumplen ya los estándares de Google.

Cómo se relacionan las Core Web Vitals con la experiencia del usuario

LCP bueno: el usuario ve el contenido rápido. La página se siente ágil.

LCP malo: el usuario espera al contenido. La página se siente lenta.

CLS bueno: el diseño es estable. El usuario lee sin que el contenido salte. Es cómodo.

CLS malo: el diseño salta. El usuario pierde el hilo. Es frustrante.

INP bueno: el usuario hace clic en un botón y ve la respuesta al instante. La página se siente interactiva.

INP malo: el usuario hace clic en un botón y espera la respuesta. La página no responde.

Unas buenas Core Web Vitals crean una buena experiencia. Unas malas Core Web Vitals crean una mala experiencia.

Cómo medir las Core Web Vitals

Google mide las Core Web Vitals con usuarios reales (monitorización de usuarios reales). Las herramientas de laboratorio como Lighthouse estiman las Core Web Vitals, pero pueden no coincidir con la experiencia real (las condiciones de red cambian).

Consulta las Core Web Vitals en Google Search Console. Google agrega datos de usuarios reales y muestra si el sitio cumple los estándares (bueno, necesita mejoras, malo).

Consulta también PageSpeed Insights. Muestra las puntuaciones de Lighthouse más datos de usuarios reales de la base de datos de Google.

Preguntas frecuentes

¿Cuál es la Core Web Vital más importante?

Las tres importan. Pero LCP y CLS suelen tener más impacto. Si la página carga rápido pero el diseño salta sin parar, la experiencia es mala. Si la página es estable pero no responde, la frustración es menor. LCP y CLS suelen ser la prioridad uno y dos. INP es importante en páginas interactivas, pero menos crítico en contenido estático. Con el creador de webs de WEMASY, puedes configurarlo directamente en tu web.

¿En qué se diferencian las Core Web Vitals de otras métricas de rendimiento?

Las Core Web Vitals se centran en la experiencia del usuario. Miden lo que percibe la gente. Otras métricas (TTFB, FCP) son técnicas. Son requisitos para unas buenas Core Web Vitals, pero no miden directamente la experiencia. Mejora las otras métricas como base, pero las Core Web Vitals te dicen si esa base se traduce en una buena experiencia.

¿Podemos tener buenas métricas de rendimiento y malas Core Web Vitals?

Sí. Una página puede tener un TTFB rápido y un LCP malo. Puede tener un FCP rápido y un CLS malo. Las métricas técnicas son necesarias, pero no suficientes para unas buenas Core Web Vitals.

¿Debemos optimizar las tres Core Web Vitals por igual?

No. Prioriza por impacto. Mide el estado actual. Si el LCP es de cuatro segundos pero el CLS es de cero coma uno, mejora primero el LCP. Las mayores diferencias tienen el mayor impacto en el usuario.

¿Son las Core Web Vitals las únicas métricas que le importan a Google?

No. Google también mide si la web es apta para móviles, HTTPS, navegación segura e intersticiales. Las Core Web Vitals son las más visibles y las más fáciles de cambiar. Pero la experiencia de página completa incluye otros factores. Optimiza las Core Web Vitals, pero no ignores otros factores de posicionamiento.

¿Cada cuánto se actualizan en Google Search Console las Core Web Vitals de usuarios reales?

A diario. Google agrega datos de usuarios reales de forma continua. Las Core Web Vitals de Search Console se actualizan cada día. Las herramientas de laboratorio muestran una medición puntual. Vigila los datos de usuarios reales en Search Console para seguir el rendimiento.

Ponlo en práctica
en tu propia web.

Empieza gratis con WEMASY y crea tu web en pocos minutos.