Core Web Vitals: qué son y cómo mejorar LCP, INP y CLS

Mira, vamos a ser sinceros. Cuando hablamos de Core Web Vitals, muchos piensan que es una de esas tonterías técnicas que solo importan a los frikis de Google. Y te entiendo. Pero déjame decirte algo: si tu web no cumple con estas métricas, estás regalando posiciones en Google y, lo peor, estás perdiendo clientes.

Y no, no es una exageración. Es la realidad de 2026.

Te lo cuento claro y sin rodeos, como si estuviéramos tomando un café. Porque al final, el SEO no es magia, es entender qué quiere Google y qué necesita tu usuario. Y ahora, con la IA metida de lleno en las búsquedas, esto es más importante que nunca.

Contenido del artículo

Pero qué demonios son los Core Web Vitals (y por qué deberían importarte)

Imagina que entras en una tienda física. Las puertas se abren rápido, los pasillos están despejados y puedes moverte sin que nadie te empuje. Eso es exactamente lo que miden los Core Web Vitals: la experiencia de usuario en tu web.

Google, en su afán por ofrecer la mejor respuesta posible (ya sea en su buscador clásico o en los nuevos AI Overviews), quiere asegurarse de que cuando un usuario llegue a tu página, no se encuentre con una experiencia frustrante.

Desde 2021, estas métricas son un factor de ranking oficial. No son el más importante, te lo concedo. Pero en un mercado donde todo el mundo compite por las mismas palabras clave, tener unos Core Web Vitals impecables puede ser la diferencia entre estar en la primera posición o en la décima.

Las tres métricas que te van a salvar el pellejo (o a hundirte)

Hasta hace poco, hablábamos de tres métricas: LCP, FID y CLS. Pero en marzo de 2024, Google dijo “esto se queda corto” y sustituyó FID por INP. Y esto ha sido un palo para muchos.

Vamos a verlas una por una, sin tecnicismos innecesarios:

LCP (Largest Contentful Paint): Mide cuánto tarda en aparecer el elemento más grande de tu página. Ese que el usuario ve nada más llegar. Puede ser una imagen principal, un vídeo o un bloque de texto enorme. La regla de oro: menos de 2,5 segundos. Si tardas más, el usuario ya está pensando en irse.

INP (Interaction to Next Paint): Esto es nuevo y es donde muchos webs están fallando. Mide la rapidez con la que tu página responde a las interacciones del usuario. Un clic, un toque en la pantalla, escribir en un formulario… El límite son 200 milisegundos. Si tardas más, la experiencia se vuelve pesada y frustrante.

CLS (Cumulative Layout Shift): ¿Te ha pasado alguna vez que estás a punto de hacer clic en un botón y de repente la página se mueve y das a un banner? Pues eso es un mal CLS. Mide la estabilidad visual de tu página. El umbral es 0,1. Cuanto más bajo, mejor.

Métrica	Mide	Umbral “Bueno”	Umbral “Necesita Mejorar”	Umbral “Malo”
LCP	Carga	≤ 2.5s	2.5s – 4.0s	> 4.0s
INP	Interactividad	≤ 200ms	200ms – 500ms	> 500ms
CLS	Estabilidad Visual	≤ 0.1	0.1 – 0.25	> 0.25

Cómo mejorar cada métrica sin volverte loco

Vale, ya sabes qué son. Ahora viene lo bueno: cómo solucionarlo. Porque Google no solo te dice que tienes un problema, te da pistas para arreglarlo. Y aquí te dejo lo que yo hago en mis proyectos y funciona.

Mejorar el LCP: que tu web vuele

El LCP es el que más duele y el que más se nota. Si tu web tarda en cargar, adiós visitantes. Aquí tienes lo que funciona:

Optimiza la imagen principal a muerte. Si tu elemento LCP es una imagen (que suele serlo), préstale atención. Usa el atributo fetchpriority="high" para decirle al navegador “oye, esto es lo primero que quiero que cargues”. Y, por supuesto, usa imágenes en formato WebP o AVIF, que pesan la mitad que un JPG.
[HTML]
```

<link rel="preload" as="image" href="/mi-imagen-principal.webp" fetchpriority="high">
<img src="/mi-imagen-principal.webp" alt="Descripción de mi imagen" fetchpriority="high" width="1200" height="600">
```
Quita lo que sobra. CSS y JavaScript que no necesitas para mostrar la parte de arriba de la página están bloqueando la carga. Inlinea el CSS crítico (el que necesitas para que se vea bien arriba) y el resto que cargue después.
Hospedaje y CDN. Suena a tópico, pero un hosting lento mata cualquier esfuerzo de optimización. Si tu servidor tarda en responder, el LCP se va al garete. Invierte en un buen hosting y usa una CDN para que tu contenido llegue rápido a cualquier parte del mundo.
La navegación importa. Si tienes una web con muchas páginas, la Speculation Rules API te permite pre-cargar la siguiente página antes de que el usuario haga clic. Es como tener un asistente que prepara el terreno. El LCP en esas transiciones puede ser casi instantáneo.

Mejorar el INP: que tu web responda al instante

Esta es la que más dolores de cabeza está dando. Porque implica que tu JavaScript funciona bien, y eso no es fácil.

Divide y vencerás. Las tareas largas de JavaScript (las que tardan más de 50 milisegundos) bloquean el navegador. Si tienes un proceso pesado, divide el trabajo en partes más pequeñas. Usa scheduler.yield() para decirle al navegador “para, atiende al usuario, y luego sigo”.
[JAVASCRIPT]
```
// Así divides una tarea pesada para no bloquear la interfaz
async function procesarListaGrande(elementos) {
  for (const grupo of dividirEnGrupos(elementos, 50)) {
    procesarGrupo(grupo);
    await scheduler.yield(); // Dejas que el navegador respire
  }
}
```
Cuidado con los eventos. No hagas cálculos pesados dentro de un onClick o un onScroll. Si el usuario hace clic, muestra primero un feedback visual (un spinner, un cambio de color) y luego, cuando el navegador esté libre, ejecuta el proceso pesado. Tu usuario notará que la web responde rápido, aunque el proceso tarde un poco más.
Los scripts de terceros son los culpables. Google Analytics, Facebook Pixel, anuncios… Todo eso consume recursos. Cárgalos de forma asíncrona o con defer para que no bloqueen la interacción del usuario. Y si no los necesitas, quítalos. Menos es más.

Mejorar el CLS: adiós a los movimientos fantasma

Esta es la más fácil de arreglar, pero la que más se descuida.

Dimensiones en imágenes y vídeos. La regla de oro: siempre pon el ancho y el alto. Así el navegador sabe cuánto espacio va a ocupar el elemento antes de que se cargue, y no tendrá que reorganizar la página luego.
[css]
```
/* Así reservas el espacio correcto */
.mi-imagen {
  aspect-ratio: 16 / 9;
  width: 100%;
}
```
Espacio para banners y anuncios. Si cargas publicidad o contenido de terceros, reserva un espacio mínimo con min-height. Así cuando el anuncio se cargue, no empujará el resto del contenido hacia abajo.
Fuentes web con cuidado. Usa font-display: swap. Así mientras se carga tu fuente personalizada, el navegador muestra una fuente de respaldo. El cambio es mínimo y evitas que el texto se mueva al cargar la fuente definitiva.

¿Cómo saber cómo está tu web?

No te fíes de lo que crees. Mide con datos reales.

Google Search Console: Tiene un informe específico de Core Web Vitals con datos reales de tus usuarios. Es tu primer termómetro.
PageSpeed Insights: Te da un análisis detallado de velocidad web con sugerencias concretas de mejora. Es como tener un consultor SEO que te dice qué tocar.
Chrome DevTools (pestaña Performance): Aquí puedes ver en detalle qué está pasando cuando se carga tu página. Es la herramienta de los profesionales.

La IA también mira esto y tú deberías

Y aquí viene el dato clave: la IA también valora la experiencia de usuario. Los AI Overviews de Google o los asistentes como Gemini no van a recomendar una web que carga lento o que se mueve mientras el usuario interactúa.

Google quiere ofrecer la mejor respuesta posible, y si tu web no ofrece una buena experiencia, la IA buscará otra fuente. Optimizar los Core Web Vitals es optimizar para la IA.

Y recuerda: el 40% de las webs que antes aprobaban con FID, ahora suspenden con INP. Eso significa que si tú lo haces bien, estás por delante de casi la mitad de tu competencia. ¿A que merece la pena el esfuerzo?