Core Web Vitals: Mide y mejora el rendimiento web

Web2026-10-15TryQuickToolBox

Has creado un sitio web rápido, pero los usuarios siguen quejándose de lentitud y tus rankings de búsqueda no están donde quieres. ¿El problema? No estás midiendo lo correcto. Las Core Web Vitals (CWV) son las métricas de Google para la experiencia real del usuario: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) y Cumulative Layout Shift (CLS). Si las ignoras, dejas rendimiento—y SEO—sobre la mesa.

Esta guía te muestra cómo medir las CWV con precisión y solucionar los problemas más comunes. Sin relleno, solo pasos accionables.

¿Qué son las Core Web Vitals?

Las Core Web Vitals son tres métricas específicas que cuantifican cómo perciben los usuarios la carga, la interactividad y la estabilidad visual:

LCP mide el rendimiento de carga. Marca cuándo el elemento de contenido más grande (imagen, video, bloque de texto) se vuelve visible. Objetivo: ≤ 2,5 segundos.
INP mide la capacidad de respuesta. Registra la latencia de todas las interacciones (clics, toques, pulsaciones de teclas) e informa un valor de percentil alto. Objetivo: ≤ 200 milisegundos.
CLS mide la estabilidad visual. Calcula los cambios de diseño inesperados. Objetivo: ≤ 0,1.

Estos umbrales se basan en datos de usuarios reales del Chrome User Experience Report (CrUX). Cumplirlos mejora la satisfacción del usuario y puede impulsar los rankings de búsqueda.

Cómo medir las Core Web Vitals

Necesitas datos de laboratorio y de campo. Las herramientas de laboratorio simulan condiciones; los datos de campo reflejan usuarios reales.

Herramientas de laboratorio

Lighthouse (en Chrome DevTools o CI) ofrece una instantánea con diagnósticos.
PageSpeed Insights combina datos de laboratorio y de campo para una URL.
Web Vitals Extension registra las CWV en la consola de Chrome mientras navegas.

Herramientas de campo

Chrome UX Report (CrUX) muestra datos agregados de usuarios reales de millones de sitios.
La librería JavaScript web-vitals te permite recopilar las CWV de tus propios usuarios y enviarlas a analytics.
Search Console informa el estado de las CWV de tu sitio según CrUX.

Comienza con datos de campo para identificar páginas problemáticas, luego usa herramientas de laboratorio para depurar.

Mejorar el LCP

El LCP suele ser el más fácil de mejorar con unos pocos ajustes específicos.

Optimiza las imágenes. Usa formatos modernos (WebP, AVIF), comprime sin pérdida de calidad visible y establece width/height explícitos. Herramientas como Image Compressor pueden ayudar a reducir el tamaño del archivo.
Precarga la imagen LCP. Añade <link rel="preload" as="image" href="#"> en el head.
Elimina los recursos que bloquean el renderizado. Incluye el CSS crítico en línea, difiere el CSS/JS no crítico y evita scripts síncronos en el head.
Usa una CDN. Sirve los recursos desde una ubicación cercana al usuario para reducir la latencia.
Habilita la compresión de texto. Brotli o gzip para HTML, CSS, JS.

Ejemplo de precarga de una imagen LCP:

<link rel="preload" as="image" href="/images/hero.avif" type="image/avif">

Mejorar el INP

El INP mide con qué rapidez responde tu página a la entrada del usuario. Las tareas largas bloquean el hilo principal y retrasan las interacciones.

Divide las tareas largas. Usa setTimeout o requestIdleCallback para ceder el hilo principal.
Optimiza los manejadores de eventos. Aplica debounce o throttle a eventos de alta frecuencia como scroll y resize.
Reduce el JavaScript. Divide el código, aplica tree-shaking y carga de forma diferida los scripts no críticos.
Usa web workers para cálculos pesados.
Evita tamaños de DOM grandes. Mantén el DOM por debajo de 1500 nodos si es posible.

Ejemplo de ceder el hilo principal:

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    await scheduler.yield();
  } else {
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

Mejorar el CLS

Los cambios de diseño ocurren cuando los elementos cambian de posición inesperadamente. Causas comunes: imágenes sin dimensiones, anuncios, embeds y contenido inyectado dinámicamente.

Establece siempre width y height en imágenes y videos. Esto permite al navegador reservar espacio.
Reserva espacio para anuncios y embeds. Usa CSS aspect-ratio o contenedores fijos.
Evita insertar contenido por encima del contenido existente a menos que se active por interacción del usuario.
Usa font-display: swap y precarga las fuentes para evitar cambios de texto invisible.
Ten cuidado con las animaciones. Usa transform y opacity en lugar de propiedades que activen el layout.

Monitorización y mejora continua

El rendimiento no es una solución única. Configura la monitorización para detectar regresiones.

Usa la librería web-vitals para enviar las CWV a tu analytics:

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

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

Configura alertas para cuando las métricas superen los umbrales.
Ejecuta Lighthouse en CI para cada pull request.
Revisa los datos de CrUX mensualmente para seguir las tendencias.

Comparación de las Core Web Vitals

Métrica	Qué mide	Umbral bueno	Soluciones comunes
LCP	Rendimiento de carga	≤ 2,5s	Optimizar imágenes, precargar, CDN
INP	Capacidad de respuesta	≤ 200ms	Dividir tareas largas, reducir JS
CLS	Estabilidad visual	≤ 0,1	Establecer dimensiones, reservar espacio

FAQ

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

LCP: bueno ≤ 2,5s, necesita mejora ≤ 4,0s, malo > 4,0s. INP: bueno ≤ 200ms, necesita mejora ≤ 500ms, malo > 500ms. CLS: bueno ≤ 0,1, necesita mejora ≤ 0,25, malo > 0,25.

¿Con qué frecuencia debo revisar las Core Web Vitals?

Monitoriza los datos de campo continuamente mediante analytics. Revisa CrUX y Search Console mensualmente. Ejecuta pruebas de laboratorio (Lighthouse) en cada cambio de código significativo.

¿Puedo mejorar las Core Web Vitals sin un desarrollador?

Algunas soluciones como comprimir imágenes o habilitar el almacenamiento en caché se pueden hacer mediante plugins o ajustes de hosting. Pero las optimizaciones más profundas (división de código, reducir JS) normalmente requieren la intervención de un desarrollador.

¿Listo para optimizar tus imágenes para un mejor LCP? Prueba nuestro Image Compressor gratuito para reducir el tamaño de los archivos sin perder calidad.