Core Web Vitals Explicado

Core Web Vitals son las métricas estandarizadas de Google para medir la experiencia del usuario en páginas web. Las tres métricas—Largest Contentful Paint (LCP), Interaction to Next Paint (INP) y Cumulative Layout Shift (CLS)—cuantifican velocidad de carga, interactividad y estabilidad visual, influyendo directamente en el ranking de búsqueda desde 2021.

Cómo Funcionan los Core Web Vitals

Core Web Vitals miden la experiencia real del usuario a través de datos de campo recolectados de cargas reales de páginas (Chrome User Experience Report). A diferencia de pruebas sintéticas de laboratorio, estas métricas reflejan lo que los usuarios realmente experimentan, haciéndolas críticas para SEO y satisfacción del usuario.

┌──────────────────────────────────────────────────────────────────┐
│                    Framework Core Web Vitals                     │
│                                                                  │
│   ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│   │      LCP        │  │      INP        │  │      CLS        │  │
│   │    Carga        │  │ Interactividad  │  │   Estabilidad   │  │
│   │                 │  │                 │  │                 │  │
│   │ "¿Qué tan       │  │ "¿Qué tan       │  │ "¿Los elementos │  │
│   │  rápido aparece │  │  rápido responde│  │  saltan por la  │  │
│   │  el contenido?" │  │  la página?"    │  │  pantalla?"     │  │
│   └────────┬────────┘  └────────┬────────┘  └────────┬────────┘  │
│            │                    │                    │           │
│            ▼                    ▼                    ▼           │
│   ┌─────────────────────────────────────────────────────────────┐│
│   │              Factor de Ranking Google                       ││
│   │       (Señal de Experiencia de Página desde May 2021)       ││
│   └─────────────────────────────────────────────────────────────┘│
└──────────────────────────────────────────────────────────────────┘

Las Tres Métricas Principales

1. Largest Contentful Paint (LCP)

Mide el rendimiento de carga rastreando cuándo el elemento de contenido visible más grande renderiza en el viewport.

Clasificación	Límite	Percepción del Usuario
Bueno	≤2,5 segundos	Contenido parece rápido
Necesita mejorar	2,5-4 segundos	Retraso perceptible
Malo	>4 segundos	Espera frustrante

Qué cuenta como “contenido más grande”:

Elementos <img>
Elementos <image> dentro de SVG
Elementos <video> (imagen poster o primer frame)
Elementos con background-image cargado vía url()
Elementos block-level conteniendo nodos de texto

Elementos LCP comunes:

<!-- Imagen hero (candidato típico de LCP) -->
<img src="hero.jpg" alt="Escaparate del producto">

<!-- Sección hero con background -->
<div class="hero" style="background-image: url('hero-bg.jpg')">
  <h1>Bienvenido a Nuestra Tienda</h1>
</div>

<!-- Poster de video -->
<video poster="video-preview.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

2. Interaction to Next Paint (INP)

Mide la interactividad rastreando la latencia de todas las interacciones de clic, toque y teclado durante todo el ciclo de vida de la página. INP reemplazó First Input Delay (FID) como Core Web Vital en marzo de 2024.

Clasificación	Límite	Percepción del Usuario
Bueno	≤200 milisegundos	Se siente responsivo
Necesita mejorar	200-500 milisegundos	Leve retraso
Malo	>500 milisegundos	Lento, sin respuesta

Cómo se calcula INP:

Sesión de Página:
  Clic #1: 120ms latencia
  Clic #2: 80ms latencia
  Clic #3: 450ms latencia ← Mayor interacción
  Toque #4: 95ms latencia

INP = 450ms (o percentil 99 para alta cuenta de interacciones)

INP vs FID:

Aspecto	FID (Descontinuado)	INP (Actual)
Alcance	Primera interacción solo	Todas las interacciones
Medición	Valor único	Peor caso o percentil 99
Captura	Primera impresión	Sesión completa
Precisión	Limitada	Comprensiva

3. Cumulative Layout Shift (CLS)

Mide la estabilidad visual cuantificando movimientos inesperados de layout que empujan contenido durante la carga.

Clasificación	Límite	Percepción del Usuario
Bueno	≤0,1	Estable, predecible
Necesita mejorar	0,1-0,25	Algún contenido salta
Malo	>0,25	Clics erróneos frustrantes

Cómo se calcula CLS:

Fracción de Impacto × Fracción de Distancia = Puntuación de Layout Shift

Ejemplo:
  Elemento se mueve 200px hacia abajo (altura viewport: 800px)
  Fracción de Impacto: 0,25 (área ocupada por elemento)
  Fracción de Distancia: 0,25 (200/800)
  Puntuación del Shift: 0,0625

CLS Total = Suma de todas las puntuaciones de shift inesperados

Causas comunes de CLS:

<!-- Imágenes sin dimensiones -->
<img src="producto.jpg" alt="Producto">  <!-- Malo: causa reflow -->

<!-- Correcto: dimensiones reservadas -->
<img src="producto.jpg" alt="Producto" width="400" height="300">

<!-- Contenedores de anuncios sin espacio reservado -->
<div id="ad-slot"></div>  <!-- Malo: anuncio carga, empuja contenido -->

<!-- Correcto: reservar espacio -->
<div id="ad-slot" style="min-height: 250px;"></div>

Resumen de Límites de Métricas

Métrica	Bueno	Necesita Mejorar	Malo	Unidad
LCP	≤2,5	2,5-4	>4	segundos
INP	≤200	200-500	>500	milisegundos
CLS	≤0,1	0,1-0,25	>0,25	puntuación

Umbral de aprobación: Al menos 75% de las cargas de página deben alcanzar “Bueno” en las tres métricas para pasar la evaluación de Core Web Vitals.

Cómo Medir Core Web Vitals

Datos de Campo (Monitoreo de Usuarios Reales)

Chrome User Experience Report (CrUX):

// PageSpeed Insights API
fetch('https://www.googleapis.com/pagespeedonline/v5/runPagespeed?' +
  'url=https://ejemplo.com&category=performance')
  .then(response => response.json())
  .then(data => {
    const lcp = data.lighthouseResult.audits['largest-contentful-paint'];
    const cls = data.lighthouseResult.audits['cumulative-layout-shift'];
    const inp = data.lighthouseResult.audits['interaction-to-next-paint'];
  });

Biblioteca web-vitals JavaScript:

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

onLCP(console.log);  // Registra valor LCP
onINP(console.log);  // Registra valor INP
onCLS(console.log);  // Registra valor CLS

// Enviar a analytics
function enviarAAnalytics(metrica) {
  navigator.sendBeacon('/analytics', JSON.stringify({
    nombre: metrica.name,
    valor: metrica.value,
    clasificacion: metrica.rating,
    id: metrica.id
  }));
}

onLCP(enviarAAnalytics);
onINP(enviarAAnalytics);
onCLS(enviarAAnalytics);

Datos de Laboratorio (Pruebas Sintéticas)

Herramienta	Caso de Uso
Lighthouse	Pruebas locales, integración CI/CD
PageSpeed Insights	Auditoría rápida de URL con datos de campo
WebPageTest	Pruebas sintéticas multi-ubicación
Chrome DevTools	Debug en tiempo real

Lighthouse CLI:

# Ejecutar auditoría Lighthouse
npx lighthouse https://ejemplo.com \
  --only-categories=performance \
  --output=json \
  --output-path=./reporte.json

Estrategias de Optimización

Optimización de LCP

1. Precargar recursos críticos:

<head>
  <!-- Precargar imagen LCP -->
  <link rel="preload" as="image" href="hero.webp">

  <!-- Precargar CSS crítico -->
  <link rel="preload" as="style" href="critical.css">

  <!-- Preconectar a orígenes -->
  <link rel="preconnect" href="https://cdn.ejemplo.com">
  <link rel="dns-prefetch" href="https://analytics.ejemplo.com">
</head>

2. Usar CDN para entrega en el edge:

Sin CDN: Usuario ──────────────────> Servidor de Origen (100-300ms RTT)
                                    [distancia geográfica]

Con CDN: Usuario ───> Nodo Edge (10-50ms) ───> Origen (si necesario)
                   [PoP más cercano]

Optimización de INP

1. Dividir tareas largas:

// Malo: Tarea larga bloqueante
function procesarItems(items) {
  items.forEach(item => {
    // Computación pesada
    item.procesar();
  });
}

// Bueno: Procesamiento en chunks
async function procesarItems(items) {
  for (let i = 0; i < items.length; i += 50) {
    const chunk = items.slice(i, i + 50);
    chunk.forEach(item => item.procesar());
    await new Promise(r => setTimeout(r, 0)); // Ceder al hilo principal
  }
}

2. Usar web workers para computación pesada:

// Hilo principal
const worker = new Worker('computar.js');

boton.addEventListener('click', () => {
  worker.postMessage({ datos: granDataset });
  // Hilo principal permanece responsivo
});

Optimización de CLS

1. Reservar espacio para imágenes:

/* Truco de aspect ratio */
img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* O usar CSS para reservar espacio */
.contenedor-imagen {
  width: 100%;
  padding-bottom: 56.25%; /* Aspect ratio 16:9 */
  background: #f0f0f0;
}

2. Prevenir saltos de cambio de fuente:

@font-face {
  font-family: 'FuenteCustom';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: optional; /* No cambiar si carga tarde */
}

Core Web Vitals y SEO

Impacto en el Ranking

Google usa Core Web Vitals como señal de ranking para resultados de búsqueda móviles. Páginas que pasan las tres métricas reciben un boost, mientras que páginas que fallan pueden ver visibilidad reducida.

Composición de la Señal de Experiencia de Página:

Core Web Vitals (LCP, INP, CLS)
Test Mobile Friendly
HTTPS y Navegación Segura
Sin intersticiales intrusivos

Problemas Comunes y Correcciones

Problemas de LCP

Problema	Corrección	Impacto
Respuesta lenta del servidor	CDN, caching, optimizar base de datos	-0,5 a -2s
JS/CSS bloqueando render	Async/defer, CSS crítico inline	-0,3 a -1s
Archivos de imagen grandes	WebP/AVIF, imágenes responsivas	-0,5 a -2s
Renderizado client-side	SSR, SSG, streaming	-1 a -3s

Problemas de INP

Problema	Corrección	Impacto
Tareas JavaScript largas	Code splitting, web workers	-100 a -400ms
Handlers de evento pesados	Debounce, throttle, chunking	-50 a -200ms
Scripts de terceros	Fachadas, lazy loading, remoción	-50 a -300ms

Problemas de CLS

Problema	Corrección	Impacto
Imágenes sin dimensiones	Atributos width/height	-0,1 a -0,5
Inserción de contenido dinámico	Reservar espacio, skeletons	-0,05 a -0,2
Web fonts	font-display: optional, preload	-0,05 a -0,15

FAQ

¿Cuál es la diferencia entre LCP y tiempo de carga de página? LCP mide cuándo el elemento de contenido más grande renderiza, mientras que tiempo de carga (onload) mide cuándo todos los recursos terminan de cargar. LCP refleja mejor la percepción del usuario de cuándo el contenido está utilizable.

¿Por qué INP reemplazó FID? FID solo medía la primera interacción, perdiendo problemas subsecuentes de responsividad. INP captura todas las interacciones durante toda la sesión, proporcionando un cuadro completo de interactividad.

¿Core Web Vitals afectan rankings desktop? Sí. Originalmente solo móvil, Core Web Vitals se convirtió en factor de ranking para resultados de búsqueda desktop en 2022.

¿Cuánto tráfico se necesita para datos de CrUX? Las páginas necesitan aproximadamente 1.000 visitas mensuales para aparecer en CrUX con datos de campo estadísticamente significativos. Sitios con menos tráfico deben depender de pruebas de laboratorio y RUM.

¿Puedo pasarar Core Web Vitals sin CDN? Sí, pero es más difícil. Los CDNs reducen LCP significativamente al servir assets estáticos desde ubicaciones de edge cercanas a los usuarios, eliminando latencia de ida-y-vuelta a servidores de origen.

Cómo Implementar en Azion

La red global de edge de Azion optimiza Core Web Vitals sirviendo contenido desde puntos de presencia dentro de 50ms de los usuarios mundialmente:

Mejora de LCP: Cache de edge entrega assets estáticos con <50ms de latencia vs. 100-300ms de orígenes centralizados
Edge Functions: Ejecuta server-side rendering en el edge para contenido dinámico sin ida-y-vuelta al origen
Optimización de Imágenes: Conversión automática WebP/AVIF y entrega de imágenes responsivas
Soporte HTTP/3: Tiempo reducido de establecimiento de conexión mejora todas las métricas

Ver: Edge Caching | Functions

Únete a nuestra comunidad