Definición
Core Web Vitals es el conjunto de tres métricas que Google utiliza para medir la experiencia real de usuario en una página web: velocidad de carga, interactividad y estabilidad visual. Desde 2021 forman parte oficial del algoritmo de ranking (Page Experience), lo que significa que afectan directamente a tu posicionamiento SEO y a tu tasa de conversión en eCommerce.
No son métricas "técnicas para developers". Son el pulso de tu tienda: si fallan, el usuario se va antes de añadir al carrito.
Las tres métricas actuales son:
- LCP (Largest Contentful Paint) → velocidad de carga percibida
- INP (Interaction to Next Paint) → capacidad de respuesta a la interacción (sustituyó a FID en marzo de 2024)
- CLS (Cumulative Layout Shift) → estabilidad visual
Analogía: la tienda física aplicada a tu web
Imagina que entras en una tienda DTC en Madrid:
- LCP = cuánto tardas en ver el escaparate y el producto estrella desde que cruzas la puerta. Si tardas 6 segundos, te vas.
- INP = cuánto tarda el dependiente en reaccionar cuando levantas la mano para preguntar. Si tarda 500 ms, desistes.
- CLS = si mientras hablas con el dependiente el suelo se mueve y los precios cambian de sitio. Frustrante, ¿verdad? Eso es un botón de "Comprar" que se mueve justo cuando vas a pulsarlo.
En eCommerce, cada milisegundo cuenta: un retraso de 1 segundo en LCP puede reducir las conversiones hasta un 7 % (dato de Deloitte/Google).
Fórmulas y umbrales oficiales
Google clasifica cada métrica en tres rangos: Bueno / Necesita mejora / Pobre. Los valores se calculan sobre el percentil 75 de las visitas reales (field data, no laboratorio).
| Métrica | Bueno | Necesita mejora | Pobre | Qué mide |
|---|---|---|---|---|
| **LCP** | ≤ 2,5 s | 2,5 s – 4,0 s | > 4,0 s | Tiempo hasta el mayor elemento visible |
| **INP** | ≤ 200 ms | 200 – 500 ms | > 500 ms | Latencia de la interacción más lenta |
| **CLS** | ≤ 0,1 | 0,1 – 0,25 | > 0,25 | Suma de desplazamientos inesperados |
Fórmula CLS (simplificada):
CLS = Σ (impact fraction × distance fraction)
Donde *impact fraction* es la proporción de viewport afectada y *distance fraction* es cuánto se desplaza el elemento.
Fórmula LCP (descomposición):
LCP = TTFB + Resource Load Delay + Resource Load Time + Element Render Delay
Esto es clave: si tu TTFB (Time To First Byte) ya es de 1,8 s por un hosting lento, tienes el margen casi agotado antes de cargar la imagen hero.
Core Web Vitals vs. otras métricas de rendimiento
| Métrica | ¿Ranking Google? | ¿Impacto en conversión? | Herramienta típica |
|---|---|---|---|
| **Core Web Vitals** | Sí (Page Experience) | Alto (directo) | PageSpeed Insights, CrUX |
| **TTFB** | Indirecto | Medio | WebPageTest, GTmetrix |
| **FCP** | No oficial | Bajo | Lighthouse |
| **TBT** | No (lab) | Proxy de INP | Lighthouse |
| **Speed Index** | No | Medio | WebPageTest |
En DTC, la combinación ganadora es: CWV verdes + TTFB < 500 ms + imágenes en AVIF/WebP.
Aplicación real en una tienda DTC
Escenario 1: ficha de producto en Shopify
- LCP alto por imagen hero sin lazy-load ni CDN → migrar a Shopify CDN + <img srcset> baja LCP de 3,8 s a 2,1 s.
- INP alto por apps de terceros (reseñas, upsell) → cargar con defer y limitar a 2 apps críticas. Reducción típica: de 340 ms a 180 ms.
- CLS por banners de cookies y pop-ups de descuento → reservar espacio con min-height fijo. CLS baja de 0,22 a 0,04.
Escenario 2: landing de campaña Black Friday
- Un CLS de 0,3 en móvil puede costar hasta un 15 % de conversión en tráfico pagado (dato interno de agencias DTC).
- Recomendación: precargar fuentes con font-display: swap y evitar inserts dinámicos above-the-fold.
Escenario 3: checkout
- INP es crítico aquí. Un botón "Pagar" que tarda 600 ms en responder genera abandono directo.
- Objetivo realista: INP < 150 ms en checkout móvil.
Datos concretos de referencia:
1. El 43 % de los sitios móviles suspenden INP según el informe CrUX 2024.
2. Mejorar LCP de 4 s a 2,5 s puede aumentar la conversión un 8-15 % en eCommerce.
3. Amazon calculó que 100 ms de latencia le costaban un 1 % de ventas.
Errores comunes (y caros)
1. Confundir lab data con field data. Lighthouse te da un dato puntual; CrUX te da el real de tus usuarios. Optimiza para field.
2. Perseguir el 100 en PageSpeed. Un 90 con buen INP convierte más que un 100 con CLS roto por scripts de tracking.
3. Ignorar el móvil. El 70-80 % del tráfico DTC es mobile. CWV se mide primero en móvil.
4. Cargar todo con lazy. El LCP debe cargarse eager y con fetchpriority="high".
5. Aceptar CLS por pop-ups de captura de email. Reserva el espacio o retrasa el pop-up 3 s.
6. Olvidar el tercero. Un chat, un pixel de Meta y un heatmap pueden destruir tu INP. Audítalos trimestralmente.
Términos relacionados
- Page Experience – conjunto de señales de UX que Google usa para ranking.
- CrUX (Chrome User Experience Report) – dataset público con datos reales de usuarios.
- TTFB (Time To First Byte) – tiempo de respuesta del servidor; base del LCP.
- FID (First Input Delay) – predecesor de INP, obsoleto desde 2024.
- TTI (Time To Interactive) – métrica de laboratorio, no oficial.
- Lighthouse – herramienta de auditoría de Google (lab data).
- PageSpeed Insights – combina lab + field data.
- Render-blocking resources – CSS/JS que bloquean el primer pintado.
- Layout shift – desplazamiento visual inesperado que alimenta el CLS.
Conclusión operativa: en DTC, Core Web Vitals no es un proyecto de IT, es una palanca de conversión. Mide en CrUX, prioriza INP y LCP en móvil, y revisa CLS cada vez que añadas un script. Un segundo ganado vale más que mil informes.