¿Qué son las Core Web Vitals? LCP, INP y CLS
Explica las tres métricas de experiencia de Google, sus umbrales y cómo mejorarlas, y muestra la diferencia entre datos de campo y de laboratorio y las herramientas de medición adecuadas.
Aurora YazılımEquipo editorial
6 min de lectura
Los Core Web Vitals son las tres métricas básicas que Google utiliza para medir la experiencia de usuario en una página web: LCP, que mide la velocidad de carga; INP, que mide el tiempo de respuesta a la interacción; y CLS, que mide la estabilidad visual. Los umbrales buenos son 2,5 segundos para el LCP, 200 milisegundos para el INP y 0,1 para el CLS; los valores se evalúan con datos de usuarios reales.
¿Qué son los Core Web Vitals?
Que una página sea «rápida» no se puede resumir en un solo número. Lo que importa al usuario es la rapidez con la que aparece el contenido, lo deprisa que reacciona la página cuando toca un botón y si el contenido se desplaza de su sitio mientras lee. Los Core Web Vitals son métricas que miden por separado cada una de estas tres experiencias.
Google utiliza estas métricas como parte de las señales de experiencia de página. Por sí solas no determinan el posicionamiento, pero pueden ayudar a que, entre dos páginas con buen contenido, destaque la que ofrece mejor experiencia. Su verdadero efecto se aprecia en el comportamiento del usuario: en las páginas rápidas y estables el visitante permanece más tiempo y convierte más.
Las métricas pueden evolucionar con el tiempo. Por ejemplo, la métrica FID, que se usaba antes para medir la interacción, ha sido sustituida por el INP, que refleja mejor el conjunto de las interacciones. Por eso conviene seguir las definiciones actuales en la documentación oficial de web.dev.
Tabla de umbrales
Para cada métrica, Google define tres rangos: bueno, necesita mejorar y deficiente. Para que una página se considere «buena», el valor debe estar en el rango bueno en al menos el 75 % de las visitas. Móvil y escritorio se evalúan por separado.
| Métrica | ¿Qué mide? | Bueno | Necesita mejorar | Deficiente |
|---|---|---|---|---|
| LCP | Carga: tiempo hasta mostrar el contenido más grande | ≤ 2,5 s | 2,5–4 s | > 4 s |
| INP | Interacción: respuesta a toques y clics | ≤ 200 ms | 200–500 ms | > 500 ms |
| CLS | Estabilidad visual: desplazamientos inesperados | ≤ 0,1 | 0,1–0,25 | > 0,25 |
¿Qué es el LCP?
El LCP (Largest Contentful Paint) es el tiempo que transcurre hasta que el elemento de contenido más grande visible en pantalla al abrirse la página (normalmente la imagen principal, la portada de un vídeo o un bloque de título grande) se carga y se dibuja. Es la métrica que más se acerca a la sensación del usuario de que «la página ya se ha abierto».
Causas que empeoran el LCP
- Respuesta lenta del servidor (TTFB elevado)
- Imagen principal de gran tamaño, sin comprimir o en un formato antiguo
- Imagen principal configurada con carga diferida (lazy)
- Archivos CSS y JavaScript que bloquean la visualización de la página
- Contenido principal generado más tarde mediante JavaScript
¿Cómo mejorar el LCP?
Sirva la imagen principal en formato WebP o AVIF y con el tamaño correcto, quítela de la carga diferida y, si es necesario, cárguela con prioridad alta. Reduzca el tiempo de respuesta del servidor con caché y CDN, y aplace los scripts no críticos.
<img src="/img/hero.webp" alt="Imagen principal" width="1200" height="630" fetchpriority="high">¿Qué es el INP?
El INP (Interaction to Next Paint) mide cuánto tarda la página en responder visualmente a los clics, toques e interacciones de teclado que realiza el usuario durante toda su visita. Se informa de una de las interacciones más lentas observadas durante la visita; es decir, se evalúa la calidad general de la respuesta y no un único clic rápido.
Si al tocar el botón del menú no ocurre nada durante un instante y luego el menú se abre de golpe, ese retraso se refleja en el INP. El problema suele deberse al código JavaScript que mantiene ocupado el hilo principal del navegador durante mucho tiempo.
¿Cómo mejorar el INP?
- Divida las tareas largas de JavaScript en fragmentos pequeños.
- Elimine los scripts innecesarios o sin uso y reduzca el código de terceros.
- Aplace las tareas pesadas posteriores a la interacción (como el envío de datos analíticos).
- Evite estructuras de página (DOM) muy grandes y complejas.
- Dé al usuario respuesta visual inmediata y haga el trabajo pesado después.
¿Qué es el CLS?
El CLS (Cumulative Layout Shift) mide cuánto se desplaza el contenido de la página de forma inesperada. Ejemplos típicos de un CLS alto son que, mientras lee un artículo, el texto baje porque se carga un anuncio más arriba, o que el botón se mueva justo cuando va a pulsarlo.
El CLS no es un tiempo, sino una puntuación sin unidad. Se tienen en cuenta el tamaño del elemento que se desplaza y la distancia del desplazamiento. Los cambios provocados por una acción del propio usuario (por ejemplo, abrir un acordeón) no se incluyen en esta puntuación.
¿Cómo mejorar el CLS?
- Indique el ancho y el alto, o la relación de aspecto, de todas las imágenes y vídeos.
- Reserve espacio de antemano para anuncios, mapas y contenidos incrustados.
- No añada banners ni avisos encima del contenido ya mostrado.
- Cargue las fuentes web con font-display: swap y mantenga las métricas de la fuente de reserva lo más parecidas posible.
- En las animaciones, use la propiedad transform en lugar de la posición.
Datos de campo y datos de laboratorio
La evaluación de los Core Web Vitals se basa en los datos de campo recogidos de usuarios reales de Chrome. Estos datos se ofrecen a través del Informe de Experiencia de Usuario de Chrome (CrUX) como promedio de los últimos 28 días. Es posible que no haya datos de campo para las páginas sin tráfico suficiente.
Los datos de laboratorio, en cambio, son los resultados que producen herramientas como Lighthouse al realizar una única prueba en un entorno controlado. Son muy valiosos para encontrar problemas y probar enseguida una corrección, pero no reflejan por completo la diversidad de dispositivos y conexiones de los usuarios reales. Las métricas basadas en la interacción real, como el INP, no pueden medirse directamente en laboratorio; en su lugar se usa el Tiempo Total de Bloqueo (TBT) como indicador aproximado.
| Herramienta | Tipo de datos | ¿Para qué sirve? |
|---|---|---|
| PageSpeed Insights | Campo + laboratorio | Evaluación rápida de una sola dirección |
| Search Console | Campo | Ver los grupos de páginas problemáticas de todo el sitio |
| Lighthouse | Laboratorio | Detectar problemas durante el desarrollo |
| Biblioteca web-vitals | Campo (sus propios datos) | Enviar valores reales a su propia herramienta de analítica |
import { onLCP, onINP, onCLS } from 'web-vitals';
function gonder(metrik) {
console.log(metrik.name, metrik.value);
// Aquí puede enviar el valor a su herramienta de analítica
}
onLCP(gonder);
onINP(gonder);
onCLS(gonder);Hoja de ruta para mejorar
Al resolver los problemas de los Core Web Vitals, seguir un orden sistemático en lugar de hacer cambios al azar evita que el esfuerzo se pierda.
- Abra el informe de Core Web Vitals en Search Console e identifique los grupos de páginas problemáticas.
- Pruebe una página de ejemplo de cada grupo en PageSpeed Insights y anote qué métrica es deficiente.
- Aplique las recomendaciones de Lighthouse empezando por la que mayor beneficio aporte.
- Publique el cambio e inicie en Search Console el proceso de validación de la corrección.
- Espere unas semanas a que se actualicen los datos de campo y compare los resultados.
Core Web Vitals y estrategia SEO
Los Core Web Vitals no sustituyen al SEO; lo complementan. El contenido original y fiable que responde a la intención de búsqueda sigue siendo el factor más decisivo. Sin embargo, entre páginas con una calidad de contenido parecida, la diferencia de experiencia puede marcar la diferencia, y una buena experiencia aumenta la probabilidad de que el visitante captado llegue a convertir.
El enfoque más eficaz es tener en cuenta el rendimiento desde la fase de diseño. Si desde el principio se montan componentes ligeros, una disposición visual correcta y una estructura de código limpia, hará falta corregir menos después. Aplicamos este enfoque en nuestros procesos de diseño web SEO y de diseño responsive; encontrará la lista de comprobación de la fase de diseño en nuestro artículo sobre diseño web SEO.
Hemos explicado los pasos prácticos de aceleración en nuestra guía cómo aumentar la velocidad de un sitio web y la rutina de seguimiento periódico en el artículo sobre mantenimiento de sitios web. Para elaborar informes periódicos de las mediciones junto con el rendimiento en búsquedas, puede apoyarse en nuestro servicio de SEO y analítica.
Preguntas frecuentes
01¿Por qué mis Core Web Vitals no aparecen en Search Console?
Los datos de campo se generan cuando un número suficiente de usuarios de Chrome visita la página. En sitios con poco tráfico o recién publicados, el informe puede aparecer vacío; en ese caso, avance con las pruebas de laboratorio de Lighthouse y PageSpeed Insights.
02He hecho una corrección, ¿por qué el resultado no cambia de inmediato?
Como los datos de campo abarcan los últimos 28 días, la mejora tarda unas semanas en reflejarse por completo en el informe. Las pruebas de laboratorio, en cambio, muestran el cambio al instante y le ayudan a saber si va por buen camino.
03¿Por qué los valores en móvil y escritorio son diferentes?
El procesador de los dispositivos móviles suele ser más débil y su conexión más variable. La misma página puede dar buen resultado en escritorio y malo en móvil; por eso suele ser más acertado empezar las mejoras por el móvil.
04¿Qué métrica es la más crítica en las tiendas online?
En los listados y las fichas de producto destacan el LCP, por las imágenes grandes, y el INP, por las interacciones con filtros y carrito. Dar dimensiones a las imágenes de producto y mostrar los banners de campaña en zonas fijas mantiene también bajo control el CLS.
Los Core Web Vitals traducen la experiencia de usuario en cifras concretas como LCP, INP y CLS y le indican qué debe corregir. Para llevar los valores de su sitio al umbral bueno con usuarios reales, conozca nuestro servicio de velocidad y rendimiento; y, para un proyecto nuevo, descubra nuestro enfoque de diseño web, que plantea el rendimiento desde el principio.
