¿Qué son los Core Web Vitals? LCP, INP y CLS explicados

¿Qué son los Core Web Vitals?

Los Core Web Vitals son tres métricas que Google usa para medir la experiencia real de una página: Largest Contentful Paint (LCP) para la carga, Interaction to Next Paint (INP) para la capacidad de respuesta y Cumulative Layout Shift (CLS) para la estabilidad visual. Una página los supera cuando las tres son "buenas" en el percentil 75 de visitas reales.

Cada métrica se evalúa por separado en móvil y en escritorio, a partir de lo que vivieron los visitantes reales y no de una sola prueba. Por eso una página puede ir rápida en tu portátil y aun así suspender.

Las tres métricas y sus umbrales

Los umbrales están publicados en web.dev, donde Google mantiene las definiciones.

Largest Contentful Paint (LCP)

El LCP es el tiempo hasta que se ha renderizado la imagen, el bloque de texto o el vídeo más grande de la ventana visible, contado desde que el visitante empezó a navegar. Como empieza en la navegación, una respuesta lenta del servidor, las redirecciones y el establecimiento de la conexión suman tiempo.

Interaction to Next Paint (INP)

El INP observa cada clic, toque y pulsación de tecla durante una visita y devuelve el más largo, sin contar los casos atípicos. Cada uno se mide desde la entrada hasta que el navegador puede pintar el siguiente fotograma. El INP sustituyó a First Input Delay (FID) como Core Web Vital el 12 de marzo de 2024. El FID solo medía el retraso antes de procesar la primera interacción, así que pasaba por alto las interacciones lentas posteriores.

Cumulative Layout Shift (CLS)

El CLS suma los movimientos inesperados de los elementos visibles. Informa de la mayor ráfaga de cambios durante la vida de la página, de modo que un solo banner que carga tarde y empuja el artículo hacia abajo puede hacer suspender una página.

Cómo usa Google los Core Web Vitals

En su documentación de Búsqueda, Google recomienda encarecidamente lograr buenos Core Web Vitals para tener éxito en la búsqueda y los vincula con la experiencia de página, que coincide con lo que sus sistemas de clasificación principales buscan premiar. La documentación no dice cuánto pesan, así que trátalos como un factor entre muchos. Unos buenos valores no compensan un contenido que no responde a la consulta, pero evitan que pierdas visitas por una página lenta o que salta.

Datos de campo y datos de laboratorio

Los datos de campo proceden de usuarios reales de Chrome y se recogen en el Chrome UX Report (CrUX) durante una ventana móvil de 28 días. Es lo que muestra el informe de Core Web Vitals de Google Search Console. Los datos de laboratorio vienen de una herramienta como Lighthouse, que carga la página una vez en un dispositivo y una red simulados.

Los dos suelen discrepar. Un 95 en laboratorio solo dice que la página fue rápida en esas condiciones. Los visitantes reales llegan con móviles más lentos, redes más débiles y desde otros países. Usa los datos de laboratorio para ver qué va lento y por qué, y los de campo para saber si los visitantes tienen de verdad una buena experiencia. La monitorización sintética programada está en medio: es de tipo laboratorio, pero se ejecuta según un calendario, de modo que las regresiones se ven antes de que la ventana de 28 días se ponga al día.

Causas habituales de malos Core Web Vitals y cómo corregirlas

LCP lento. Revisa primero el tiempo hasta el primer byte: reduce las redirecciones, cachea las respuestas y usa un CDN. Haz que la imagen del LCP se pueda descubrir en el HTML inicial y precárgala si solo se menciona desde CSS o JavaScript. Pon fetchpriority="high" en la imagen que probablemente sea el LCP (en una o dos imágenes como máximo) y nunca la cargues en diferido. Reduce el peso del archivo y elimina CSS que bloquea el renderizado y scripts síncronos en el head.

INP malo. Lo habitual son tareas largas en el hilo principal, a menudo por la carga y el análisis de scripts. Haz lo mínimo en los manejadores de eventos, actualiza primero la pantalla y deja el resto para después, divide los trabajos grandes con setTimeout, evita leer el diseño justo después de cambiar estilos y mantén el DOM pequeño.

CLS alto. Las causas típicas son imágenes y vídeos sin dimensiones, fuentes que se renderizan con otro tamaño que su fuente de reserva, anuncios o widgets que cambian de tamaño solos y contenido insertado encima de lo que el visitante está leyendo. Indica ancho y alto (o una proporción), reserva espacio para lo que carga tarde y anima con transform en lugar de propiedades de diseño. Hay una guía más larga en nuestra página de optimización de Core Web Vitals.

Cómo medir y monitorizar los Core Web Vitals

• Consulta tus datos de usuarios reales. El comprobador gratuito de Core Web Vitals lee CrUX y muestra el LCP, INP y CLS del percentil 75 en móvil y escritorio, con un aprobado o suspenso. Las páginas sin suficiente tráfico de Chrome no devuelven datos de campo.
• Diagnostica una página. Ejecuta el test de velocidad web tras un cambio para ver qué va lento en una prueba de laboratorio.
• Sigue la evolución. La monitorización de velocidad de página ejecuta auditorías Lighthouse programadas desde 25 regiones cloud y puede avisarte cuando una métrica supera tus umbrales. Nuestra guía para monitorizar los Core Web Vitals con alertas e informes (en inglés) explica la configuración, y la comparativa de herramientas de Core Web Vitals (en inglés) recoge las alternativas.

Como los datos de campo son una ventana de 28 días, una mejora se refleja poco a poco. Cuenta con que el informe tarde alrededor de un mes en ponerse al día y juzga primero un despliegue con las cifras de laboratorio y sintéticas.

Preguntas frecuentes: Core Web Vitals

¿Qué valores de Core Web Vitals se consideran buenos?

LCP de 2,5 segundos o menos, INP de 200 milisegundos o menos y CLS de 0,1 o menos, cada uno en el percentil 75 de visitas reales. Una página solo los supera cuando los tres son buenos.

¿Importan los Core Web Vitals para el SEO?

Google recomienda encarecidamente unos buenos Core Web Vitals para tener éxito en la búsqueda y los vincula con su guía de experiencia de página. No publica cuánto pesan, así que mejóralos primero por tus visitantes y considera cualquier efecto en el ranking como un extra. Nunca sustituyen a un contenido relevante.

¿Qué sustituyó a First Input Delay?

Interaction to Next Paint (INP) sustituyó al FID como Core Web Vital el 12 de marzo de 2024. El INP tiene en cuenta todas las interacciones de una visita, no solo la primera.

¿Cuánto tarda una mejora en verse en Search Console?

Los datos de campo cubren los últimos 28 días, así que una mejora aparece poco a poco y se refleja por completo tras unas cuatro semanas. Las cifras pueden parecer iguales durante días tras un despliegue porque la mayor parte de la ventana aún contiene datos antiguos.

¿Por qué mi puntuación de Lighthouse es alta pero suspendo los Core Web Vitals?

Lighthouse es una prueba de laboratorio de una sola carga en un dispositivo simulado. Los Core Web Vitals de la búsqueda usan datos de campo de visitantes reales, con dispositivos y redes más lentos. Revisa ambos y usa la prueba de laboratorio para encontrar la causa.

¿Cómo monitorizo los Core Web Vitals de forma continua?

Combina el informe de Search Console para las tendencias de usuarios reales con auditorías de laboratorio programadas desde varias regiones. La monitorización de velocidad de página ejecuta Lighthouse según un calendario y te avisa cuando una métrica supera un presupuesto.