¿Qué es Core Web Vitals?

Los Core Web Vitals (CWV) son un conjunto de tres métricas específicas definidas por Google que evalúan la experiencia de usuario real (real user monitoring) en páginas web. Se convirtieron en factor oficial de ranking en junio de 2021 como parte de la Page Experience Update.

Las tres métricas actuales (2025) son:

• LCP (Largest Contentful Paint): Mide la velocidad de carga percibida. Bueno: < 2.5s
• INP (Interaction to Next Paint): Mide la capacidad de respuesta a interacciones. Bueno: < 200ms (reemplazó a FID en marzo 2024)
• CLS (Cumulative Layout Shift): Mide la estabilidad visual. Bueno: < 0.1

Google publica los datos reales de CWV en Google Search Console y en el Chrome User Experience Report (CrUX), basándose en visitas reales de usuarios.

Los CWV se miden automáticamente en navegadores Chrome cuando los usuarios visitan una página. Google recopila estos datos anónimamente y los usa como señal de ranking.

Una página se evalúa como "pasa" o "no pasa" basándose en si el percentil 75 de visitas cumple los umbrales "good":

• LCP: Se dispara cuando el elemento más grande visible (imagen hero, bloque de texto principal) termina de renderizarse. Lo afectan: velocidad del servidor, CDN, lazy-loading incorrecto, fuentes bloqueantes.
• INP: Mide el peor retraso entre interacción (click, tap, teclado) y respuesta visual, considerando TODAS las interacciones en la página. Lo afectan: JavaScript pesado, long tasks, main thread bloqueado.
• CLS: Calcula cuánto se mueven los elementos inesperadamente durante la carga. Lo afectan: imágenes sin dimensiones, anuncios insertados dinámicamente, web fonts sin preload.

Optimizaciones concretas para mejorar cada métrica:

• LCP < 2.5s: Preload del recurso LCP, imágenes en WebP/AVIF, CDN, server response < 600ms, eliminar render-blocking resources.
• INP < 200ms: Dividir JavaScript en chunks pequeños, usar Web Workers, evitar third-party scripts pesados, debounce/throttle en event handlers.
• CLS < 0.1: Definir width/height en imágenes y vídeos, reservar espacio para ads, usar font-display: swap con preload, evitar insertar contenido encima del fold dinámicamente.
• Monitoreo continuo: Implementa real user monitoring (web-vitals JS library) para tener tus propios datos.
• Prioriza arriba del fold: Los recursos críticos (fuentes, CSS crítico, hero image) deben cargar primero.
• HTTP/3 y Brotli: Usa protocolos modernos y compresión efectiva.
• Lazy-load selectivo: Solo lazy-load imágenes bajo el fold, nunca la imagen LCP.

Un e-commerce con CWV por debajo del umbral: LCP 4.8s, INP 280ms, CLS 0.28. Plan de optimización:

1. LCP: Preload de imagen hero + migración a WebP + CDN → LCP baja a 1.9s
2. INP: Refactorización de JS, división en chunks, eliminación de librerías innecesarias → INP baja a 150ms
3. CLS: Definir dimensiones en todas las imágenes, reservar espacio para banners → CLS baja a 0.05

Resultado después de 2 meses: Los 3 CWV en "good", mejora del ranking orgánico del 15% y reducción del bounce rate del 22%. El tráfico orgánico sube un 35%.