Core Web Vitals: Mide y mejora el rendimiento web

Web2026-10-30TryQuickToolBox

Has construido un sitio web rápido, pero los usuarios siguen quejándose de lentitud. O tal vez tus rankings SEO bajaron después de una actualización de Google. El culpable podrían ser las Core Web Vitals—las métricas de Google para la experiencia de usuario. En esta guía, aprenderás qué son, cómo medirlas y pasos concretos para mejorar cada una.

¿Qué son las Core Web Vitals?

Las Core Web Vitals son tres métricas que cuantifican aspectos clave de la experiencia de usuario:

Largest Contentful Paint (LCP): Cuánto tarda el elemento de contenido más grande (imagen, video o bloque de texto) en ser visible. Bueno: ≤2.5s.
Interaction to Next Paint (INP): Mide la capacidad de respuesta—el tiempo desde una interacción del usuario (clic, toque, pulsación de tecla) hasta el siguiente fotograma pintado. Bueno: ≤200ms.
Cumulative Layout Shift (CLS): Cuantifica los cambios de diseño inesperados durante la carga. Bueno: ≤0.1.

Estas métricas forman parte de las señales de experiencia de página de Google e impactan directamente en el SEO y la satisfacción del usuario.

Cómo medir las Core Web Vitals

Necesitas datos de laboratorio y de campo. Los datos de laboratorio (pruebas sintéticas) ayudan a depurar; los datos de campo (monitorización de usuarios reales) reflejan la experiencia real.

Herramientas de laboratorio

Lighthouse en Chrome DevTools: Ejecuta auditorías y obtén puntuaciones con oportunidades de mejora.
WebPageTest: Pruebas avanzadas con tiras de película y gráficos de cascada.
PageSpeed Insights: Combina datos de laboratorio y de campo de CrUX.

Herramientas de campo

Chrome User Experience Report (CrUX): Conjunto de datos público de métricas de usuarios reales.
Biblioteca JavaScript web-vitals: Recopila métricas de usuarios reales a través de analíticas.
Search Console: El informe de Core Web Vitals muestra grupos de URL que necesitan atención.

Así se usa la biblioteca web-vitals para enviar métricas a tu analítica:

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Usa navigator.sendBeacon si está disponible
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

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

Mejorar LCP

LCP suele ser la métrica más impactante. Para mejorarla:

Optimiza el elemento LCP: Identifícalo (normalmente una imagen principal o un encabezado) y asegúrate de que carga rápidamente.
Precarga recursos críticos: Usa <link rel="preload"> para imágenes, fuentes y hojas de estilo.
Usa formatos de imagen modernos: Sirve WebP o AVIF con alternativas.
Implementa lazy loading con cuidado: No apliques lazy loading a la imagen LCP; priorízala.
Reduce el tiempo de respuesta del servidor: Usa CDNs, caché y optimiza el backend.
Elimina recursos que bloquean el renderizado: Difiere CSS y JavaScript no críticos.

Ejemplo: precarga tu imagen principal:

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

Mejorar INP

INP mide la capacidad de respuesta. Un INP alto suele provenir de tareas largas que bloquean el hilo principal.

Divide tareas largas: Usa setTimeout, requestIdleCallback o scheduler.yield() para ceder al hilo principal.
Optimiza los manejadores de eventos: Aplica debounce o throttle a operaciones costosas.
Reduce la ejecución de JavaScript: Divide el código, aplica tree-shaking y difiere scripts no críticos.
Evita actualizaciones grandes del DOM: Agrupa cambios en el DOM y usa el DOM virtual sabiamente.
Usa web workers para trabajo intensivo en CPU.

Ejemplo: ceder con scheduler.yield() (donde esté soportado):

async function handleClick() {
  // Haz algo de trabajo
  await scheduler.yield();
  // Continúa después de ceder
}

Mejorar CLS

CLS se trata de estabilidad visual. Evita cambios inesperados:

Incluye siempre los atributos width y height en imágenes y videos.
Reserva espacio para anuncios e incrustaciones con CSS aspect-ratio o dimensiones fijas.
Evita insertar contenido encima del contenido existente a menos que lo active una interacción del usuario.
Usa transformaciones CSS para animaciones en lugar de propiedades que activen el layout.
Precarga fuentes y usa font-display: swap para evitar cambios de texto invisible.

Ejemplo: reserva espacio con aspect-ratio:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Comparación de Core Web Vitals

Métrica	Qué mide	Umbral bueno	Correcciones comunes
LCP	Rendimiento de carga	≤2.5s	Optimizar imágenes, precargar, reducir tiempo de servidor
INP	Capacidad de respuesta	≤200ms	Dividir tareas largas, optimizar JS, usar workers
CLS	Estabilidad visual	≤0.1	Establecer dimensiones, reservar espacio, evitar inserciones dinámicas

Herramientas y flujo de trabajo

Integra la monitorización de Core Web Vitals en tu flujo de desarrollo:

Ejecuta Lighthouse en CI para detectar regresiones.
Usa RUM (Real User Monitoring) para rastrear datos de campo.
Establece presupuestos de rendimiento y alertas.
Audita regularmente scripts de terceros—a menudo impactan INP y LCP.

Para una optimización rápida de imágenes antes de subirlas a tu sitio, prueba nuestro Compresor de Imágenes para reducir el tamaño de archivo sin pérdida de calidad.

Preguntas frecuentes

¿Cuáles son los umbrales actuales para Core Web Vitals?

LCP bueno ≤2.5s, necesita mejora ≤4s; INP bueno ≤200ms, necesita mejora ≤500ms; CLS bueno ≤0.1, necesita mejora ≤0.25.

¿Con qué frecuencia debo medir Core Web Vitals?

Continuamente mediante datos de campo, y en cada cambio significativo de código mediante herramientas de laboratorio. Configura alertas para regresiones.

¿Puedo mejorar Core Web Vitals sin reconstruir mi sitio?

Sí—muchas correcciones como optimización de imágenes, precarga y diferir scripts se pueden aplicar de forma incremental.