Core Web Vitals: mide y mejora el rendimiento web

Tus usuarios esperan que las páginas carguen al instante, respondan sin demora y se mantengan visualmente estables. Las Core Web Vitals (CWV) de Google cuantifican estas expectativas: Largest Contentful Paint (LCP) mide la carga, Interaction to Next Paint (INP) mide la interactividad y Cumulative Layout Shift (CLS) mide la estabilidad visual. Una puntuación baja en CWV perjudica la experiencia de usuario y puede afectar al posicionamiento en buscadores. Esta guía te muestra cómo medir cada métrica y mejorarlas con pasos prácticos y orientados a desarrolladores.

¿Qué son las Core Web Vitals?

Las Core Web Vitals son tres métricas que reflejan la experiencia de usuario en el mundo real:

• LCP: tiempo hasta que se renderiza el elemento de contenido más grande (imagen, bloque de texto, vídeo). Bueno: ≤2,5 s, Necesita mejora: ≤4 s, Deficiente: >4 s.
• INP: tiempo desde la interacción del usuario (clic, toque, pulsación de tecla) hasta el siguiente fotograma pintado. Bueno: ≤200 ms, Necesita mejora: ≤500 ms, Deficiente: >500 ms.
• CLS: suma de las puntuaciones de desplazamiento de diseño por movimientos visuales inesperados. Bueno: ≤0,1, Necesita mejora: ≤0,25, Deficiente: >0,25.

Estos umbrales se basan en el percentil 75 de las cargas de página, segmentadas entre móvil y escritorio.

Cómo medir las Core Web Vitals

Necesitas datos tanto de laboratorio como de campo. Las herramientas de laboratorio simulan condiciones; los datos de campo provienen de usuarios reales.

Herramientas de laboratorio

• Lighthouse (en Chrome DevTools o PageSpeed Insights): audita LCP, CLS y el tiempo total de bloqueo (un proxy de INP).
• WebPageTest: análisis avanzado de filmstrip y cascada de red.
• Panel Performance de Chrome DevTools: registra interacciones para detectar tareas largas que afectan a INP.

Herramientas de campo

• Chrome UX Report (CrUX): datos agregados de usuarios reales para sitios públicos.
• Biblioteca JavaScript web-vitals: envía las métricas a tu analítica.
• Informe de Core Web Vitals de Search Console: agrupa las URL por estado.

Instala la biblioteca web-vitals vía npm o inclúyela desde un CDN y después registra las métricas:

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);

Usa sendBeacon para evitar bloquear la descarga. Recopila datos a lo largo del tiempo para ver tendencias.

Mejorar Largest Contentful Paint (LCP)

LCP suele ser la imagen principal o el encabezado principal. Optimiza la ruta crítica:

1. Prioriza el recurso LCP: añade fetchpriority="high" a la imagen LCP o precárgala.
2. Reduce el tiempo de respuesta del servidor: usa caché, CDN y consultas de backend eficientes.
3. Elimina los recursos que bloquean el renderizado: difiere CSS/JS no crítico, inserta el CSS crítico en línea.
4. Optimiza las imágenes: comprime, usa formatos modernos (WebP/AVIF) y define las dimensiones.
5. Usa una CDN para servir los recursos desde ubicaciones cercanas a los usuarios.

Ejemplo: precarga la imagen LCP y define fetchpriority:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">

Para comprimir imágenes, prueba nuestro Compresor de imágenes para reducir el tamaño del archivo sin pérdida visible de calidad.

Mejorar Interaction to Next Paint (INP)

INP refleja la capacidad de respuesta. Las tareas largas de JavaScript bloquean el hilo principal y retrasan la respuesta visual.

1. Divide las tareas largas: usa setTimeout, requestIdleCallback o scheduler.yield() para ceder el control al navegador.
2. Optimiza los manejadores de eventos: aplica debounce a la entrada, evita trabajo pesado en los manejadores de clic.
3. Reduce JavaScript: divide el código, aplica tree-shaking y difiere los scripts no críticos.
4. Usa web workers para trabajo intensivo de CPU.
5. Evita grandes actualizaciones del DOM: agrupa los cambios del DOM y usa virtualización para listas largas.

Mide INP en campo con la biblioteca web-vitals y usa el panel Performance para identificar tareas largas durante las interacciones.

Mejorar Cumulative Layout Shift (CLS)

CLS ocurre cuando los elementos se mueven de forma inesperada. Causas habituales: imágenes sin dimensiones, anuncios/embeds sin espacio reservado y fuentes que cargan tarde.

1. Define siempre width y height en imágenes y vídeos, o usa la propiedad CSS aspect-ratio.
2. Reserva espacio para contenido dinámico (anuncios, embeds) con min-height.
3. Usa font-display: swap y precarga las fuentes clave para evitar texto invisible y desplazamientos de diseño.
4. Evita insertar contenido por encima del contenido existente salvo que lo desencadene una interacción del usuario.

Ejemplo: define la relación de aspecto para imágenes responsivas:

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

Comparación de las Core Web Vitals

Flujo de trabajo práctico para mejorar las CWV

1. Mide la línea base: ejecuta Lighthouse y recopila datos de campo con web-vitals.
2. Identifica los cuellos de botella: usa el panel Performance y la cascada de red.
3. Prioriza las correcciones: céntrate en la métrica con peor puntuación.
4. Implementa los cambios: optimiza imágenes, difiere scripts, define dimensiones.
5. Prueba y monitoriza: vuelve a ejecutar las pruebas de laboratorio y sigue los datos de campo a lo largo del tiempo.

Recuerda que las CWV son métricas de campo; las herramientas de laboratorio ayudan a diagnosticar, pero los datos de usuarios reales son la fuente de la verdad.

Preguntas frecuentes

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

Bueno: LCP ≤2,5 s, INP ≤200 ms, CLS ≤0,1. Necesita mejora: LCP ≤4 s, INP ≤500 ms, CLS ≤0,25. Deficiente: por encima de esos valores. Se evalúan en el percentil 75 de las cargas de página.

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

Monitoriza los datos de campo de forma continua y ejecuta auditorías de laboratorio tras cambios importantes. Como mínimo, revisa mensualmente el informe de Core Web Vitals de Search Console y después de despliegues que afecten al rendimiento del frontend.

¿Puedo mejorar las Core Web Vitals sin rediseñar mi sitio?

Sí. Muchas mejoras son técnicas: comprimir imágenes, definir atributos width/height, diferir JavaScript no crítico y dividir tareas largas. Estos cambios suelen aportar mejoras significativas sin rediseño visual.

¿Listo para optimizar tus imágenes y mejorar el LCP? Usa nuestro Compresor de imágenes gratuito para reducir las imágenes manteniendo la calidad y mejorar tus puntuaciones de Core Web Vitals.