Cómo mejorar Core Web Vitals en 2026 (LCP, INP, CLS explicados)
INP reemplazó FID en 2024. Esta guía explica las 3 métricas Core Web Vitals 2026, los rangos buenos/regulares/malos, y cómo arreglar cada una.
Las 3 métricas que Google mira (2026)
Desde marzo 2024, INP reemplazó FID como métrica Core Web Vital. Las 3 actuales son:
| Métrica | Mide | Bueno | Regular | Malo |
|---|---|---|---|---|
| LCP | Tiempo hasta que el elemento más grande del fold se renderiza | <2.5s | 2.5-4s | >4s |
| INP | Latencia de TODAS las interacciones (clicks, taps, teclas) | <200ms | 200-500ms | >500ms |
| CLS | Cuánto "salta" el layout durante la carga | <0.1 | 0.1-0.25 | >0.25 |
LCP: Largest Contentful Paint
Qué mide: cuánto tarda en aparecer el elemento más grande visible above the fold (hero image, headline, banner).
Cómo mejorar:
- Optimizar la imagen hero: si es JPG > 200KB, comprimila con Comprimir imagen. Considerá convertir a WebP.
- Preload del LCP element:
<link rel="preload" as="image" href="hero.webp">en el<head>. - Eliminar render-blocking: CSS crítico inline, defer al resto.
- CDN cercano al usuario (Vercel/Cloudflare globales).
- Server response time < 600ms (TTFB).
INP: Interaction to Next Paint
Qué mide: la latencia entre el click/tap del usuario y el siguiente paint visual. Mide TODAS las interacciones, no solo la primera (como FID).
Cómo mejorar:
- Reducir JavaScript main thread — code splitting, dynamic imports, web workers para tareas pesadas.
- Debounce / throttle event handlers caros (search, scroll listeners).
- Optimizar React rendering — useMemo, useCallback, React.memo para componentes pesados.
- Eliminar long tasks (>50ms) — partir en chunks con
scheduler.postTask()o setTimeout(0). - Si usás virtual scrolling: chequear que el rendering por scroll no genera tasks >100ms.
CLS: Cumulative Layout Shift
Qué mide: cuánto salta el contenido durante la carga (la barra de scroll donde estabas leyendo se mueve, los botones se mueven justo cuando ibas a clickear).
Cómo mejorar:
- Reservar espacio para imágenes con
widthyheightHTML attributes oaspect-ratioCSS. - Reservar espacio para anuncios con min-height en el contenedor (aunque el ad cargue después).
- Cargar fonts con `font-display: optional` o
fallbackcon font-metric matching para evitar FOIT/FOUT. - No insertar contenido encima del existente (banners de cookies arriba del header).
- Skeleton loaders para contenido async.
Tools para medir
- [Test velocidad web](/test-velocidad-web) — TTFB + total time (medición real)
- PageSpeed Insights (insights.pageexperience.google) — datos de campo de Chrome UX Report
- Lighthouse en Chrome DevTools — auditoría completa con sugerencias
- Web Vitals Chrome extension — overlay en cualquier página
Errores comunes
- Solo testear desktop — mobile es el que Google evalúa
- Solo testear home — el algoritmo evalúa cada URL relevante
- Testear con cache caliente — Lighthouse debe correr en modo incognito
- Pensar que CLS se mide solo durante el load — es durante TODA la sesión (un modal que abre y empuja contenido suma CLS)
Próximos pasos
Preguntas frecuentes
¿Cuándo reemplazó INP a FID como Core Web Vital?
El 12 de marzo de 2024. INP (Interaction to Next Paint) mide TODAS las interacciones de la página, no solo la primera (FID). Por eso es más estricto y representativo de la experiencia real del usuario.
¿Cuál Core Web Vital es la más difícil de arreglar?
Depende del sitio. Para sitios con muchas imágenes y SSR pesado: LCP. Para SPAs con mucho JavaScript: INP. Para sitios con ads dinámicos o lazy loading mal hecho: CLS. La regla: empezá por la que tu sitio falla en PageSpeed Insights.
¿Los Core Web Vitals son factor de ranking de Google?
Sí, oficialmente desde junio 2021 (Page Experience update). Su peso es modesto pero acumulativo — sitios rápidos ganan a sitios lentos en tie-breakers. Más importante: usuarios convierten mejor en sitios rápidos.