Core Web Vitals 2026: el checklist práctico que sí entiendes

Qué son los Core Web Vitals#

Core Web Vitalsson 3 métricas que Google usa para cuantificar la experiencia que perciben tus usuarios al cargar e interactuar con tu sitio. Forman parte del “Page Experience” y son factor de ranking confirmado desde 2021.

Cada métrica mide una dimensión distinta de la experiencia:

• LCP: ¿cuándo se ve la página “cargada”?
• CLS: ¿hay saltos visuales molestos mientras carga?
• INP: ¿el sitio responde rápido cuando hago clic o escribo?

Los 3 umbrales 2026#

Google considera un sitio “optimizado” cuando el 75% de las visitas reales (no lab) caen en el rango “Bueno” para las 3 métricas. Es exigente.

LCP: Largest Contentful Paint#

Qué mide: tiempo hasta que se renderiza el elemento de contenido más grande visible en pantalla. Típicamente la imagen hero, el H1, o un bloque de texto grande.

Por qué importa:es la métrica que el usuario percibe como “ya cargó”. Por debajo de 2.5s la página se siente rápida.

Causas comunes de LCP malo:

• Imagen hero sin optimizar (PNG/JPG sin compresión, sin WebP).
• Imagen hero sin atributo width/height definido.
• Servir imágenes desde CDN lento o sin caché.
• JavaScript bloqueante que retrasa el render inicial.
• Fonts custom sin preload (FOIT).

Cómo mejorarlo:

1. Comprimir imagen hero, convertir a WebP o AVIF.
2. Usar <link rel="preload"> para la imagen hero y fonts críticas.
3. En Next.js: <Image priority /> en el hero.
4. Diferir JS no crítico con defer o async.
5. Servir desde CDN (Vercel, Cloudflare).

CLS: Cumulative Layout Shift#

Qué mide: cuánto se mueven los elementos visuales mientras carga la página. Esos saltos que hacen que hagas clic en el botón equivocado.

Por qué importa: CLS alto frustra y se asocia con rebote. Google lo penaliza fuerte porque indica mala UX percibida.

Causas comunes:

• Imágenes sin atributos width/height.
• Ads que se insertan después del render inicial.
• Fonts que se cargan con FOUT (fuente cambia visualmente).
• Banners de cookies que empujan el contenido hacia abajo.
• Embeds (YouTube, Twitter) sin reserva de espacio.

Cómo mejorarlo:

1. Todas las imágenes con width/height (o aspect-ratio en CSS).
2. Banners de cookies como overlay (no inline) o reservar espacio fijo.
3. Fonts con font-display: optional o preload + size-adjust.
4. Embeds con contenedor de altura fija.

INP: Interaction to Next Paint#

Qué mide: tiempo desde que el usuario interactúa (clic, tap, key) hasta que la página responde visualmente. Reemplazó a FID en marzo 2024.

Por qué importa:captura el “lag” percibido. Sitios con JS pesado pueden tener LCP ok pero INP horrible: cargan rápido, pero responden lento al interactuar.

Causas comunes:

• Hidratación de React/Vue pesada en mobile.
• Event handlers largos (cálculos complejos en clic).
• Third-party scripts (analytics, chat widgets, ads).
• Forced reflows en el DOM tras cada interacción.

Cómo mejorarlo:

1. Code splitting agresivo. Cargar solo el JS necesario para la primera interacción.
2. Mover trabajo pesado a Web Workers o pre-renderizar en servidor.
3. Lazy-load third-party scripts no críticos (chat, analytics no esencial).
4. Usar requestIdleCallback para tareas no urgentes.
5. En Next.js: pasar componentes pesados a Server Components cuando sea posible.

Lab vs Field: por qué tu Lighthouse no coincide con Search Console#

Hay dos formas de medir Core Web Vitals:

• Lab data: simulado en una máquina (tu Lighthouse local). Mismo entorno cada vez. Útil para iterar.
• Field data (CrUX): datos reales de Chrome de usuarios visitando tu sitio. Lo que Google usa para ranking.

Lighthouse local puede mostrar 95 mientras CrUX muestra “mala” porque tus usuarios reales tienen conexiones más lentas, dispositivos más débiles, o tu CDN responde peor en sus regiones.

Checklist práctico de optimización#

1. Imágenes: WebP/AVIF, con width/height, comprimidas, hero con preload.
2. Fonts: Self-hosted o con preload, font-display optional/swap, max 2 familias.
3. JS: Code splitting, defer no crítico, Server Components donde se pueda.
4. CSS: Critical CSS inline, resto lazy. Sin unused CSS grande.
5. Third-party: Auditar cada script externo. Eliminar lo no esencial.
6. Embeds: Contenedores con altura fija para evitar CLS.
7. Cookies banner: Overlay o altura reservada.
8. CDN: Vercel, Cloudflare, Fastly. Especialmente si tu mercado es multi-país.