Core Web Vitals 2026: cómo medir y mejorar LCP, INP y CLS

Core Web Vitals son las tres métricas con las que Google evalúa la experiencia técnica de tu sitio: velocidad percibida, capacidad de respuesta e inestabilidad visual. En 2026 siguen siendo factor de ranking confirmado y, sobre todo, son el “umbral mínimo” que casi todos los sitios fallan en mobile. Esta guía explica qué se mide, cómo medirlo bien y cómo mejorar cada métrica sin morir en el intento.

Las tres métricas que importan

• LCP (Largest Contentful Paint): tiempo hasta que se pinta el elemento principal visible (típicamente el hero, una imagen grande o el H1). Bueno: ≤2.5 s. Pobre: >4 s.
• INP (Interaction to Next Paint): latencia entre la interacción del usuario (clic, tap, tecla) y la siguiente pintura. Reemplazó a FID en marzo 2024. Bueno: ≤200 ms. Pobre: >500 ms.
• CLS (Cumulative Layout Shift): cuánto se mueve el contenido inesperadamente. Bueno: ≤0.1. Pobre: >0.25.

Para “aprobar” Core Web Vitals una URL necesita estar en “Bueno” en las tres métricas, medidas en datos reales de usuarios (CrUX), no en lab.

Datos lab vs datos de campo

• Lab (Lighthouse, PageSpeed Insights local): un test sintético en condiciones controladas. Útil para diagnosticar, no para aprobar.
• Campo (CrUX, RUM): datos reales de usuarios reales en Chrome. Es lo que Google usa para evaluar.

Si tu Lighthouse marca 95 pero CrUX marca rojo, gana CrUX. Optimiza para campo, no para puntaje de Lighthouse.

Cómo medir bien

• Search Console > Core Web Vitals: el dashboard oficial, agregado por grupo de URLs similares. Es la fuente de verdad para Google.
• PageSpeed Insights: combina lab + 28 días de CrUX para una URL específica.
• Chrome DevTools > Performance: análisis profundo de una carga concreta.
• Web Vitals extension: muestra valores en tiempo real al navegar.
• RUM propio (web-vitals.js + GA4 o tu backend): te da datos por URL/dispositivo/segmento.

Cómo mejorar LCP

• Optimiza el LCP element: identifica cuál es (usualmente hero image o H1). Si es imagen: formato moderno (AVIF/WebP), tamaño correcto, fetchpriority="high", preload.
• Reduce el TTFB: hosting decente, caché de página (LiteSpeed Cache, WP Rocket, Cloudflare), HTTP/2 o HTTP/3, evita redirects encadenados.
• Elimina render-blocking: CSS crítico inline, fuentes con font-display: swap, scripts de terceros con async o defer.
• Lazy load todo lo que no es above-the-fold: loading="lazy" en imágenes y iframes secundarios. NUNCA en el LCP element.

Cómo mejorar INP

• Reduce JavaScript: cada script suma a Total Blocking Time. Audita plugins WP, scripts de tracking, A/B testing tools.
• Code splitting: que cada página solo cargue el JS que necesita.
• Tareas largas (long tasks): divídelas con scheduler.yield() o setTimeout. Cualquier tarea >50 ms en el main thread es problema.
• Event handlers ligeros: el onclick que ejecuta 200 líneas de cálculo o llamada sincrónica a localStorage masivo arruina INP.
• Lazy load iframes pesados (YouTube embeds, mapas, widgets de redes). Usa facade pattern.

Cómo mejorar CLS

• Dimensiones explícitas en <img> e <iframe>: width y height siempre.
• Reserva espacio para ads y embeds: contenedor con altura mínima fija; nunca dejes que se “expandan” después.
• Fuentes: size-adjust + font-display: swap bien configurados. FOUT controlado > FOIT.
• Banner de cookies: que aparezca como modal, no que empuje el contenido.
• Animaciones: usa transform y opacity, no top/left/width/height.

Caso típico WordPress

En sitios WP con Astra/GeneratePress, los problemas más frecuentes:

• LCP malo por imagen hero sin optimizar y sin preload.
• INP malo por exceso de scripts (Elementor, sliders, popups).
• CLS malo por anuncios sin reserva o fuente custom mal configurada.

Combo recomendado: tema ligero + plugin de caché (LiteSpeed Cache si tu host lo soporta, o WP Rocket), Cloudflare proxy con APO, imágenes en CDN, fuentes locales y optimizar plugin por plugin midiendo INP antes/después.

Errores comunes

• Optimizar para puntaje de Lighthouse en vez de campo CrUX.
• Activar lazy load en TODAS las imágenes (incluido el LCP) y empeorar LCP.
• Instalar 5 plugins de “speed” que se pisan entre sí.
• Bloquear Google Fonts en preconnect y luego cargarlas síncronas.
• Asumir que CDN soluciona todo. CDN ayuda LCP pero no INP ni CLS.

Plan de mejora en 30 días

1. Auditoría CrUX en Search Console: identifica las 3 URLs más visitadas en rojo.
2. PageSpeed Insights de cada una: anota qué métrica falla.
3. Implementa el fix más impactante (típicamente preload LCP image o eliminar un plugin pesado).
4. Espera 28 días para ver impacto en CrUX (los datos se promedian a 28 días).
5. Itera URL por URL.

Documentación oficial

• web.dev/vitals — definiciones canónicas.
• PageSpeed Insights — herramienta de medición.
• CrUX — dataset de campo.

Lectura relacionada

Para entender dónde encaja CWV: auditoría SEO paso a paso, qué es el SEO. Si quieres saber cuánto te falta sin instalar herramientas, agenda un diagnóstico SEO gratis.

Por Polemicus — agencia SEO en Colombia. Actualizado mayo 2026.