# Core Web Vitals en 2026: qué son y cómo mejorarlos

> Qué son los Core Web Vitals (LCP, INP y CLS), sus umbrales en 2026 y cómo mejorarlos paso a paso para subir tu rendimiento y tu posicionamiento.

URL: https://codegea.com/core-web-vitals-en-2026-que-son-y-como-mejorarlos
SEO · 2026-06-27 · Carolina Dávila

Tu web puede ser bonita, estar bien escrita y aun así perder posiciones en Google por algo que el visitante siente pero no sabe nombrar: lentitud, saltos del contenido, botones que tardan en responder. Hace años Google le puso nombre y número a esa sensación. Se llaman Core Web Vitals, y en 2026 siguen siendo la forma más concreta de saber si tu sitio se siente rápido de verdad o solo lo parece en tu computadora.

La buena noticia es que no son una caja negra. Son tres métricas, con umbrales claros, que se pueden medir y mejorar con trabajo dirigido. Vamos a verlas una por una y, sobre todo, qué hacer con cada una.

> Los Core Web Vitals miden tres cosas: cuánto tarda en cargar lo principal (LCP), qué tan rápido responde tu web cuando el usuario interactúa (INP) y cuánto se mueve el contenido mientras carga (CLS). Si las tres están en verde, vas por buen camino.

## Qué son los Core Web Vitals y por qué los mira Google

Google quiere mandar a sus usuarios a páginas que se sientan bien al usarlas. Como «sentirse bien» es subjetivo, definió un conjunto de métricas de experiencia real, medidas en el navegador de visitantes de verdad y no en un laboratorio, que llama Core Web Vitals. Forman parte de la señal de experiencia de página y, aunque el contenido sigue mandando, entre dos páginas parecidas la que ofrece mejor experiencia tiene ventaja. Es la forma de ponerle número al trabajo de [optimización de rendimiento web](/optimizacion-de-rendimiento-en-desarrollo-web) del que ya hablé en otro artículo.

## Las tres métricas que importan en 2026

En marzo de 2024, INP reemplazó oficialmente a FID como métrica de interactividad. Si lees guías viejas que todavía hablan de FID, están desactualizadas. Hoy el trío es este:

| Métrica | Qué mide | Bueno | Mejorable | Malo |
| --- | --- | --- | --- | --- |
| LCP (Largest Contentful Paint) | Cuánto tarda en pintarse el elemento más grande visible | 2,5 s o menos | 2,5 a 4 s | más de 4 s |
| INP (Interaction to Next Paint) | Cuánto tarda la página en responder a las interacciones | 200 ms o menos | 200 a 500 ms | más de 500 ms |
| CLS (Cumulative Layout Shift) | Cuánto se mueve el contenido de forma inesperada | 0,1 o menos | 0,1 a 0,25 | más de 0,25 |

Un detalle clave: los umbrales se miden en el percentil 75 de tus usuarios reales. No basta con que te cargue rápido a ti; tiene que ir bien para el 75 por ciento de quien te visita, muchos desde móviles de gama media y redes que no siempre son las mejores.

## Cómo medirlos sin adivinar

Hay dos mundos: datos de laboratorio (una prueba controlada) y datos de campo (usuarios reales). Para Google manda el campo, así que prioriza esas fuentes.

- **PageSpeed Insights:** combina laboratorio (Lighthouse) y campo (CrUX) en una sola pantalla. El primer sitio donde mirar.
- **Search Console, informe de Core Web Vitals:** tus datos reales agrupados por grupos de URLs y con histórico. Imprescindible.
- **Chrome DevTools y Lighthouse:** para depurar en local mientras trabajas.
- **La librería web-vitals:** para medir en producción y enviar los datos a tu analítica.

## Cómo mejorar el LCP

- Optimiza la imagen principal: formato moderno (AVIF o WebP), tamaño correcto y buena compresión.
- Precarga el recurso LCP con `preload` y usa `fetchpriority="high"` en la imagen destacada.
- Sirve desde un hosting decente y, si tu audiencia es amplia, un CDN cercano a ella.
- Reduce el CSS y el JavaScript que bloquean el render; entrega primero lo crítico.
- Activa caché de página y de servidor para que el HTML llegue casi instantáneo.

## Cómo mejorar el INP

- Divide las tareas largas de JavaScript para no bloquear el hilo principal.
- Quita scripts de terceros que no aporten: chats, widgets y trackers de más son el sospechoso habitual.
- Usa debounce en eventos costosos y difiere el trabajo que no sea urgente.
- En frameworks como React, evita renders innecesarios y memoriza lo que toque.

## Cómo mejorar el CLS

- Reserva espacio: define `width` y `height` (o `aspect-ratio`) en imágenes y vídeos.
- Reserva hueco para anuncios y embeds antes de que carguen.
- Carga las fuentes con `font-display` y precárgalas para evitar el salto del texto.
- No insertes contenido encima de lo que el usuario ya está viendo.

## Qué priorizar según tu caso

| Tu situación | Por dónde empezar |
| --- | --- |
| WordPress con muchos plugins | Limpieza de plugins, caché y optimización de imágenes (LCP) |
| Tienda WooCommerce | LCP de las fichas más INP del carrito y el checkout |
| Mucho JavaScript o una SPA | INP: dividir tareas y revisar scripts de terceros |
| Te saltan banners y anuncios | CLS: reservar espacio antes de que carguen |
| Proyecto nuevo desde cero | Nacer rápido con un stack moderno tipo Astro o Next.js |

Si tu proyecto arranca de cero y la prioridad es el rendimiento, conviene elegir bien el stack: lo comparé en detalle en [Astro vs Next.js para landing pages](/astro-vs-next-js-para-landing-pages-rendimiento-y-seo-comparados). Y si dependes de WordPress pero quieres velocidad de aplicación moderna, una arquitectura [WordPress headless con Next.js](/wordpress-headless-con-next-js-arquitectura-ventajas-y-como-empezar) te da margen para clavar los tres Vitals sin renunciar al editor.

## Dónde empezar según lo que muestre Search Console

No persigas el 100 de PageSpeed: persigue el verde en los tres Vitals con datos de campo. Abre el informe de Core Web Vitals de Search Console, filtra por móvil y mira qué métrica está en rojo en la mayoría de los grupos de URLs.

Si es el LCP, empieza por la imagen principal, el hosting y la caché. Si es el INP, busca scripts de terceros y tareas largas de JavaScript. Si es el CLS, mira qué elementos no tienen espacio reservado: imágenes, anuncios, fuentes. Atacar una métrica a la vez te permite ver qué cambio movió el resultado.

Ten paciencia con la medición: los datos de campo de Chrome se calculan sobre una ventana móvil de 28 días, así que un arreglo tarda en reflejarse. Mientras tanto, valida en laboratorio con Lighthouse, pero guíate por el campo.

---

¿Tu web no pasa los Core Web Vitals y no sabes por dónde meterle mano? En [Codegea](/contacto) auditamos el rendimiento de tu sitio y lo dejamos en verde, ya sea en WordPress, WooCommerce o un stack headless a medida. Cuéntame tu caso y lo revisamos juntos.
