Core Web Vitals: la guía definitiva para optimizar tu performance

1 segundo de retraso en la carga de tu sitio = 7% menos conversiones. Walmart mejoró 1 segundo y aumentó sus conversiones un 2%. Amazon calculó que 100ms de delay les costaría 107 millones de dólares al año.

Los Core Web Vitals no son métricas vanidosas. Son dinero directo en tu cuenta bancaria o fuera de ella.

¿Qué son los Core Web Vitals y por qué importan?

Son 3 métricas específicas que Google usa para medir la experiencia de usuario real. Desde junio 2021, son un factor de ranking directo y representan el 25% de las señales de Page Experience.

Los números que debes conocer

• ✅ Sitios que aprueban todas las métricas: +24% CTR y -19% bounce rate
• ✅ Páginas que cargan en 2.4s convierten 3X más que las de 5.7s+
• ✅ Solo el 38% de URLs prominentes pasan todas las Core Web Vitals (estándares muy exigentes)
• ✅ Google usa mobile-first indexing: tus puntuaciones móviles son las que cuentan

Las 3 métricas Core (actualizado marzo 2024)

1. LCP (Largest Contentful Paint) - Velocidad de Carga

Qué mide: El tiempo desde que el usuario inicia la carga hasta que se renderiza el elemento de contenido más grande visible.

Umbrales:

• ✅ Bueno: ≤ 2.5 segundos
• ⚠️ Necesita mejora: 2.5 - 4.0 segundos
• ❌ Pobre: > 4.0 segundos

Factores que lo afectan:

• Tiempo de respuesta del servidor (TTFB)
• Imágenes grandes sin optimizar
• JavaScript y CSS bloqueantes
• Renderizado del lado cliente

Cómo optimizarlo:

• Mejora TTFB: CDN + HTTP/3 (HTTP/3 reduce TTFB mediano en 41.8%)
• Formatos modernos: WebP (-25-35% vs JPEG), AVIF (-50% vs JPEG)
• fetchpriority="high" en imagen LCP (Etsy: +4% mejora)
• NUNCA lazy-load la imagen LCP
• Critical CSS inline: < 14KB minificado

2. INP (Interaction to Next Paint) - Interactividad

⚠️ CAMBIO CRÍTICO: El 12 de marzo de 2024, Google reemplazó oficialmente FID por INP como métrica Core Web Vital.

Qué mide: El tiempo desde que el usuario interactúa (click, tap, teclado) hasta que el navegador pinta el siguiente frame mostrando feedback visual. INP mide TODAS las interacciones durante la sesión, no solo la primera.

Umbrales:

• ✅ Bueno: ≤ 200 milisegundos
• ⚠️ Necesita mejora: 200 - 500 ms
• ❌ Pobre: > 500 ms

Factores que lo afectan:

• Long Tasks: Tareas > 50ms bloquean el main thread
• JavaScript pesado sin code splitting
• Event handlers costosos
• Falta de yielding (tareas que no ceden control al navegador)

Cómo optimizarlo:

• Break up Long Tasks: Usar setTimeout(0) o scheduler.yield()
• Code Splitting: Lazy loading de componentes React/Vue
• Defer JavaScript: WP Rocket "Load JavaScript deferred" = mejora dramática
• React 18 Concurrent Rendering: startTransition() para updates non-urgent
• Optimizar third-party scripts: defer/async strategically

3. CLS (Cumulative Layout Shift) - Estabilidad Visual

Qué mide: Desplazamientos inesperados del contenido visual durante toda la vida de la página.

Umbrales:

• ✅ Bueno: ≤ 0.1
• ⚠️ Necesita mejora: 0.1 - 0.25
• ❌ Pobre: > 0.25

Causas comunes:

• Imágenes/videos sin dimensiones definidas
• Fuentes web causando FOIT/FOUT
• Anuncios o embeds dinámicos sin espacio reservado
• Contenido inyectado dinámicamente

Cómo optimizarlo:

• SIEMPRE especifica width y height en imágenes: <img width="800" height="600">
• CSS aspect-ratio: aspect-ratio: 16 / 9;
• font-display: swap + size-adjust para matching (reduce CLS hasta 70%)
• Preload critical fonts: <link rel="preload" href="font.woff2" as="font">
• Reservar espacio para ads: min-height: 250px;

Herramientas de medición: Lab vs Field Data

Field Data (usuarios reales)

1. Chrome User Experience Report (CrUX)

• Datos de usuarios reales de Chrome
• Últimos 28 días rodantes
• Acceso: BigQuery, API, Dashboard Looker Studio

2. Google Search Console

• Core Web Vitals Report agrupado
• Identifica problemas a nivel de sitio
• Estos datos afectan tu ranking

3. PageSpeed Insights

• Híbrido: Field data (CrUX) + Lab data (Lighthouse)
• URL: https://pagespeed.web.dev/
• Actualización diaria

Lab Data (sintético, controlado)

1. Lighthouse

• Chrome DevTools, CLI, CI/CD
• Testing en condiciones controladas
• Perfecto para debugging

2. WebPageTest

• El "gold standard" para análisis forense
• Filmstrip, waterfall, múltiples ubicaciones
• URL: https://www.webpagetest.org/webvitals

3. Chrome DevTools Performance Panel

• Novedad 2025: Live view de Core Web Vitals sin grabar
• Color-coded según umbrales
• Layout Shifts track para debugging CLS

Real User Monitoring (RUM)

Top tools: DebugBear, Datadog RUM, Akamai mPulse, New Relic, CoreDash ($19/mes)

Por qué RUM: Mide usuarios reales, condiciones variadas, métricas que afectan ranking SEO.

Casos reales con mejoras medibles

Caso 1: Rakuten 24 (Google Case Study)

• ✅ Revenue per visitor: +53.37%
• ✅ Conversion rate: +33.13%
• ✅ Average order value: +15.2%
• ✅ Exit rate: -35.1%

Hallazgo: LCP bueno → hasta 61.13% aumento en conversión

Caso 2: Ray-Ban (Speculation Rules API)

• ✅ Mobile conversion rate (PDP): +101.47%
• ✅ Desktop conversion rate: +156.16%
• ✅ LCP improvement: 43% (desktop y mobile)

Caso 3: Swappie

Optimizaciones: Load time -23%, LCP -55%, CLS -91%, FID -90%

Resultados:

• ✅ Mobile revenue: +42%
• ✅ Mobile conversion rate: +10 puntos porcentuales

Caso 4: Vodafone Italia

• LCP mejorado 31%
• ✅ Resultado: +8% más ventas

Caso 5: iCook

• CLS mejorado 15%
• ✅ Ad revenue: +10%

Estrategias de optimización avanzadas

1. HTTP/3 y Brotli Compression

Impacto: TTFB -41.8% mediano, LCP 20-30% mejora especialmente mobile

2. Speculation Rules API (Tendencia 2025)

<script type="speculationrules">
{
  "prerender": [
    {"urls": ["/product-page"]}
  ]
}
</script>

Impacto: LCP casi 0 (página pre-renderizada), CLS reducido

3. Back/Forward Cache (bfcache)

Optimización crítica para CLS:

• ❌ NO usar unload event
• ✅ Usar pagehide event
• Impacto: 10% navegaciones desktop, 20% mobile usan back/forward

4. Service Workers + PWA Caching

// Workbox 8.x - Stale-While-Revalidate
import { StaleWhileRevalidate } from 'workbox-strategies';

registerRoute(
  ({request}) => request.destination === 'image',
  new StaleWhileRevalidate()
);

Tu roadmap de optimización

Quick Wins (Semana 1-2)

• Dimensiones en imágenes (width/height)
• fetchpriority="high" en imagen LCP
• Defer JavaScript no crítico
• Conversión WebP/AVIF

Impacto Medio (Semana 3-4)

• Critical CSS implementation
• Code splitting
• CDN setup
• HTTP/2/3 upgrade

Avanzado (Mes 2+)

• Speculation Rules API
• Service Workers + caching strategies
• bfcache optimization
• Real User Monitoring setup

Errores críticos que debes evitar

1. Lazy-load de imagen LCP

❌ MAL: <img src="hero.jpg" loading="lazy">

✅ BIEN: <img src="hero.jpg" fetchpriority="high">

2. No especificar dimensiones de imágenes

Causa directa de CLS alto. SIEMPRE usa width y height.

3. JavaScript sin defer

JavaScript en <head> sin defer o async = INP pobre

4. Ignorar Mobile Performance

Google usa mobile-first indexing. Si tu móvil es lento, no rankeas.

Monitoreo continuo: Setup mínimo

1. Google Search Console (gratis)

• Core Web Vitals Report
• Alertas de regresiones

2. PageSpeed Insights testing semanal

3. RUM tool (DebugBear, Datadog, etc.)

4. GA4 integration para tracking con web-vitals library:

import {onCLS, onINP, onLCP} from 'web-vitals';

function sendToGA4(metric) {
  gtag('event', 'web_vitals', {
    value: Math.round(metric.value),
    metric_id: metric.id
  });
}

onCLS(sendToGA4);
onINP(sendToGA4);
onLCP(sendToGA4);

ROI esperado por sector

E-commerce: Mejora de 1s en velocidad = 2% más conversión. Por cada segundo adicional 0-5s = conversiones caen 4.42% promedio.

Content sites: CTR +10-24% con mejores Core Web Vitals.

B2B/Services: Mejor engagement, más leads. Bounce rate -19% promedio.

Conclusión: Performance = Revenue

Los Core Web Vitals no son "nice to have". Son fundamentales para tu negocio.

La ecuación es simple: Velocidad → Experiencia → Conversión → Revenue

Tu plan de acción ahora:

1. Mide tus Core Web Vitals actuales en PageSpeed Insights
2. Identifica el bottleneck principal (LCP, INP o CLS)
3. Implementa las quick wins de esa métrica específica
4. Monitorea en Search Console semanalmente
5. Itera y optimiza continuamente

Recuerda: Cada 100ms que mejores = más dinero en tu bolsillo. Amazon lo sabe. Walmart lo sabe. Ahora tú también.