Core Web Vitals explicadas: LCP, INP y CLS (y cómo mejorarlas)

Las Core Web Vitals son tres métricas que Google usa para medir la experiencia real de una página: lo rápido que carga, lo rápido que responde y lo estable que es mientras carga. Forman parte de las señales de experiencia de página que Google tiene en cuenta para posicionar y, lo que es más importante, reflejan cómo perciben realmente tu sitio los visitantes.

Las tres Core Web Vitals

Una página aprueba cuando al menos el 75 % de las visitas reales (el percentil 75) cumplen el umbral «bueno» en las tres métricas.

INP sustituyó a First Input Delay (FID) como Core Web Vital en marzo de 2024. INP es más exigente: tiene en cuenta la respuesta de las interacciones durante toda la visita, no solo la primera.

Datos de campo frente a datos de laboratorio

Los datos de campo proceden de usuarios reales de Chrome y se recogen en el Chrome UX Report (CrUX) en una ventana móvil de 28 días. Son los que usa Google para la experiencia de página. Puedes verlos en el informe de Core Web Vitals de Search Console y en PageSpeed Insights.

Los datos de laboratorio proceden de una prueba simulada, como Lighthouse, en un dispositivo y una red fijos. Son ideales para depurar y probar cambios, pero no son lo que Google usa para posicionar, y no pueden medir INP directamente (Total Blocking Time es el indicador de laboratorio más cercano).

Las páginas con poco tráfico pueden no tener suficientes datos de campo; en ese caso Google puede usar datos de páginas similares o de todo el sitio (el «origen»).

Largest Contentful Paint (LCP)

LCP marca el momento en que termina de renderizarse la imagen o el bloque de texto más grande de la ventana visible: normalmente la imagen de cabecera, un titular grande o el póster de un vídeo destacado.

LCP puede dividirse en cuatro partes, que señalan la solución:

1. Time to First Byte: cuánto tarda el servidor en responder
2. Retraso en la carga del recurso: cuánto tarda el navegador en empezar a descargar el recurso LCP
3. Tiempo de carga del recurso: cuánto dura la descarga
4. Retraso en el renderizado del elemento: tiempo entre la descarga y el renderizado

Cómo mejorar el LCP

• Acelera el servidor: caché de página, una CDN, un hosting más rápido y menos consultas a la base de datos
• Haz que la imagen LCP se descubra pronto: usa un <img> normal en el HTML (no un fondo CSS ni una imagen insertada con JavaScript) y añade fetchpriority="high"
• Nunca cargues en diferido la imagen LCP
• Optimiza la imagen: dimensiones correctas, WebP o AVIF, buena compresión
• Reduce los recursos que bloquean el renderizado: incrusta el CSS crítico y aplaza el JavaScript no crítico
• Usa preconnect con los orígenes de terceros necesarios, como una CDN de imágenes

Interaction to Next Paint (INP)

INP mide el retraso entre una interacción del usuario –un clic, un toque o una pulsación de tecla– y la siguiente actualización visual en pantalla. Informa de una de las interacciones más lentas de la visita.

Un INP malo suele deberse a demasiado JavaScript ejecutándose en el hilo principal, que impide al navegador responder con rapidez.

Cómo mejorar el INP

• Reduce y divide el JavaScript: elimina librerías sin usar, divide el código y carga funciones solo cuando se necesiten
• Divide las tareas largas: las tareas de más de 50 ms bloquean el hilo principal; cede el control al navegador entre bloques de trabajo
• Revisa los scripts de terceros: gestores de etiquetas, widgets de chat, herramientas de test A/B y scripts publicitarios son culpables frecuentes
• Mantén el DOM ligero: las páginas muy grandes hacen más lenta cada actualización
• Da una respuesta visual inmediata a la interacción y haz después el trabajo pesado

Cumulative Layout Shift (CLS)

CLS mide los movimientos inesperados del diseño: esa experiencia frustrante de un botón que se desplaza justo cuando vas a tocarlo. Puntúa cuánto contenido se mueve y cuánta distancia.

Cómo mejorar el CLS

• Define ancho y alto en imágenes y vídeos, o usa aspect-ratio en CSS, para reservar el espacio
• Reserva espacio para anuncios, contenidos incrustados e iframes con contenedores de tamaño fijo
• No insertes contenido encima del ya existente, como banners que empujan la página hacia abajo tras cargar
• Usa font-display: swap con cuidado y precarga las fuentes web clave, o usa métricas de fuentes alternativas para que el texto no se recoloque
• Anima con transform, no con propiedades como top o height que provocan recálculos del diseño

Un flujo de trabajo práctico

1. Revisa el informe de Core Web Vitals de Search Console para ver qué grupos de URL fallan y en qué métrica
2. Elige una URL representativa de cada grupo que falla
3. Haz una prueba de laboratorio para diagnosticar qué es lento
4. Corrige a nivel de plantilla: la mayoría de los problemas afectan a todas las páginas con el mismo diseño
5. Valida: en Search Console, inicia la validación tras desplegar; los datos de campo tardan hasta 28 días en reflejar las mejoras

¿Cuánto influyen las Core Web Vitals en el posicionamiento?

Google ha dejado claro que la experiencia de página es una señal entre muchas y que la relevancia y el contenido útil importan más. Una página rápida con contenido flojo no superará a una página excelente. Pero cuando las páginas son igual de relevantes, una mejor experiencia puede ayudar, y las páginas más rápidas convierten mejor de forma constante, lo cual importa al margen del posicionamiento.

Consejos por plataforma

WordPress

• Usa un plugin de caché o caché a nivel de hosting para reducir el tiempo de respuesta del servidor
• Elige un tema ligero; los maquetadores pesados suelen añadir mucho CSS y JavaScript
• Revisa los plugins: cada uno puede añadir scripts a todas las páginas y perjudicar el INP
• Usa un plugin de optimización de imágenes que sirva WebP o AVIF y añada los atributos de ancho y alto
• Retrasa o elimina los scripts de terceros que no necesites en todas las páginas

Shopify

• Revisa las apps instaladas: muchas inyectan scripts en todas las páginas aunque no se usen
• Usa las funciones de imágenes responsive integradas en el tema
• Limita el número de secciones y sliders de la portada
• Comprime y redimensiona las imágenes antes de subirlas

Sitios a medida y con mucho JavaScript

• Usa renderizado en servidor o generación estática para que el contenido aparezca sin esperar a JavaScript
• Divide el código por rutas y carga los componentes bajo demanda
• Mide el INP de usuarios reales con la librería JavaScript web-vitals y envíalo a tu analítica para ver qué interacciones son lentas

Medir tú mismo los datos de usuarios reales

Search Console y PageSpeed Insights muestran datos agregados de Chrome, pero solo para páginas con suficiente tráfico y con retraso. Para ver las Core Web Vitals de cada página y cada visitante, añade monitorización de usuarios reales (RUM). La librería de código abierto web-vitals informa de LCP, INP y CLS desde los navegadores de los visitantes; puedes enviar los valores a Google Analytics 4 u otra herramienta de analítica. El RUM también registra qué elemento fue el LCP y qué interacción fue la más lenta: justo lo que necesitas para resolver el problema.

Una nota sobre Total Blocking Time y Speed Index

Lighthouse informa de otras métricas además de las Core Web Vitals. Total Blocking Time (TBT) mide cuánto tiempo estuvo bloqueado el hilo principal durante la carga y se correlaciona con el INP. First Contentful Paint (FCP) marca cuándo aparece algo por primera vez. Speed Index mide lo rápido que se rellena el área visible. Son diagnósticos útiles, pero no son Core Web Vitals.

Mitos habituales

• «Hace falta un 100 en PageSpeed para posicionar.» No. Para la experiencia de página cuenta superar los umbrales de las Core Web Vitals en datos de campo, y la relevancia importa mucho más.
• «Las Core Web Vitals solo importan para Google.» Las páginas más rápidas y estables mejoran las conversiones y la satisfacción de todos los visitantes, vengan de donde vengan.
• «Añadir más plugins de caché ayuda.» Acumular varios plugins de caché u optimización suele provocar conflictos. Usa una sola solución bien configurada.

Conclusiones clave

• Las Core Web Vitals miden la carga (LCP), la capacidad de respuesta (INP) y la estabilidad visual (CLS).
• Los umbrales buenos son LCP ≤ 2,5 s, INP ≤ 200 ms y CLS ≤ 0,1 en el percentil 75 de las visitas reales.
• Lo que cuenta son los datos de campo de usuarios reales de Chrome; las pruebas de laboratorio sirven para diagnosticar.
• El LCP suele mejorar con servidores más rápidos e imágenes de cabecera mejor optimizadas.
• El INP mejora al reducir y dividir el JavaScript, sobre todo el de terceros.
• El CLS mejora al reservar espacio para imágenes, anuncios y contenidos incrustados.

Preguntas frecuentes

¿Por qué difieren mis puntuaciones de laboratorio y de campo?

Las pruebas de laboratorio simulan un dispositivo y una red. Los datos de campo reflejan los dispositivos, las redes y el comportamiento de tus visitantes reales, incluidas interacciones que las pruebas de laboratorio no realizan.

¿Cuánto tardan las mejoras en verse en Search Console?

Los datos de campo cubren los 28 días anteriores, así que una corrección tarda hasta cuatro semanas en reflejarse por completo.

¿Importan las Core Web Vitals en escritorio?

Sí. Google evalúa móvil y escritorio por separado. En móvil suele ser más difícil aprobar porque los dispositivos y las redes son más lentos.

¿Qué es una buena puntuación de PageSpeed?

90 o más es buena. Pero la puntuación es un resumen de laboratorio; para la experiencia de página cuenta superar las Core Web Vitals en datos de campo.