Core Web Vitals: guía completa 2026

Los Core Web Vitals (CWV) son el conjunto de métricas de Google que miden la experiencia real del usuario: velocidad de carga, capacidad de respuesta de la interfaz y estabilidad visual. Desde mayo de 2021 forman parte de Page Experience e influyen en el posicionamiento.

Las tres métricas se evalúan por URL: las buenas puntuaciones de la portada no sirven de nada en las fichas de producto. Google toma los datos del Chrome UX Report (usuarios reales), no de simulaciones de laboratorio.

zoom_in

Qué son los Core Web Vitals

Historia: de FID a INP

Google presentó los Core Web Vitals en 2020 con tres métricas: LCP, FID (First Input Delay) y CLS. FID medía el retraso del primer toque: un dato valioso, pero que solo cubría una parte de la interactividad de la página.

LCP — Largest Contentful Paint

LCP registra el momento en que el bloque de contenido visible más grande de la página queda pintado por completo. Normalmente es una imagen principal (hero), la portada de un artículo o un H1 de gran tamaño.

Causas habituales de un LCP lento

• TTFB lento (servidor, CDN, falta de caché): supone hasta el 40 % del tiempo de LCP
• La imagen principal no está priorizada: falta fetchpriority="high"
• La imagen principal no está precargada (<link rel="preload">)
• El CSS y el JS que bloquean el renderizado retrasan el primer pintado
• Imágenes demasiado grandes: sin WebP ni AVIF, sin srcset
• El elemento LCP depende de un renderizado con JS (el SSR de React no ha terminado cuando se produce el LCP)

<!-- Prioritise the LCP image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

<img
  src="/hero.webp"
  alt="Hero"
  fetchpriority="high"
  loading="eager"
  decoding="async"
  width="1280"
  height="720"
/>

INP — Interaction to Next Paint

INP mide el retraso entre cualquier interacción del usuario (clic, pulsación de tecla, toque) y el siguiente pintado visual de la página. A diferencia de FID, INP tiene en cuenta todas las interacciones de la sesión y toma el peor caso, descartando los valores atípicos.

Qué rompe INP

• Las Long Tasks de más de 50 ms bloquean el hilo principal: el navegador no puede procesar la entrada
• Manejadores de eventos pesados: setState síncrono en React, actualizaciones masivas del DOM
• No se usa scheduler.yield() ni setTimeout(0) para trocear las tareas largas
• Los scripts de terceros (chat, publicidad, analítica) ocupan el hilo principal
• Animaciones con JS en lugar de transform u opacity de CSS

// Breaking up a Long Task with scheduler.yield()
async function processLargeList(items) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i]);
    // Yield to the main thread every 50 items
    if (i % 50 === 0) {
      await scheduler.yield();
    }
  }
}

CLS — Cumulative Layout Shift

CLS es una métrica sin unidades que describe el desplazamiento total e inesperado de los elementos de la página. Fórmula: fracción de impacto × fracción de distancia. No cuenta el desplazamiento de un botón que el usuario acaba de pulsar: solo los elementos que se mueven sin acción del usuario.

Fuentes habituales de CLS

• Imágenes sin los atributos width y height: el navegador no conoce su tamaño antes de cargarlas
• Fuentes web sin font-display: optional ni swap: el FOUT desplaza el texto
• Banners o avisos de cookies insertados dinámicamente en la parte superior de la página
• Animaciones CSS que cambian top, left o margin en lugar de transform
• Anuncios sin espacio reservado (min-height en el contenedor)

/* Reserve space for an ad slot */
.ad-container {
  min-height: 250px;
  width: 100%;
}

/* Animation without CLS: transform and opacity only */
.card:hover {
  transform: translateY(-4px);
  /* Wrong: margin-top: -4px — this shifts layout */
}

Impacto en el posicionamiento

Google confirmó que los CWV son una de las señales de Page Experience que participan en el posicionamiento. Pero actúan como desempate, no como factor principal. Una página con contenido excelente y mal CWV superará a una página con buen CWV y contenido flojo.

El efecto indirecto pesa más: las páginas rápidas reducen el abandono y aumentan la profundidad de sesión y la conversión. El argumento de negocio para los CWV es más sólido que el argumento de SEO. Amazon calculó que +100 ms de LCP equivalen a −1 % de ingresos.

Cómo medir los CWV

Hay dos tipos de datos: datos de laboratorio (simulación, con Lighthouse o WebPageTest) y datos de campo (usuarios reales, con CrUX o GSC). Google usa los datos de campo para el posicionamiento. El laboratorio sirve para diagnosticar.

Herramientas de diagnóstico

// web-vitals v4 — collect real CWV
import { onLCP, onINP, onCLS } from 'web-vitals';

function sendToAnalytics({ name, value, id }) {
  // Send to GA4
  gtag('event', name, {
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    metric_id: id,
    metric_delta: value,
  });
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

Lista de comprobación de optimización

zoom_in

LCP

• Añade fetchpriority="high" y quita loading="lazy" de la imagen principal
• Añade <link rel="preload" as="image"> para la imagen principal en el <head>
• Convierte las imágenes a WebP o AVIF y configura srcset
• Reduce el TTFB a ≤ 800 ms: CDN, caché, SSR en el edge
• Elimina los scripts que bloquean el renderizado del <head> (async, defer, module)
• Configura Cache-Control: max-age=31536000 para los recursos estáticos

INP

• Perfila las Long Tasks en Chrome DevTools → Performance → Main Thread
• Divide las tareas de más de 50 ms con scheduler.yield() o setTimeout(0)
• Aplica debounce a los manejadores de input y scroll (16–100 ms)
• Optimiza React: useMemo, useCallback, React.memo y virtualización de listas
• Mueve los scripts de terceros a Web Workers o cárgalos después del LCP
• Anima solo con transform y opacity en CSS

CLS

• Define width y height en todos los elementos <img>: el navegador reserva el espacio
• Usa aspect-ratio en los contenedores de dimensiones desconocidas
• Configura font-display: optional para las fuentes críticas
• Reserva min-height para los espacios de anuncios y el contenido dinámico
• Coloca los avisos (cookies, banners) abajo, no arriba de la página
• Revisa el FOUT: las fuentes sin fallback desplazan el texto al cargarse