Core Web Vitals: cómo medirlos y mejorarlos

Por qué importan los Core Web Vitals para tu sitio

Probablemente hayas visto informes de que tu sitio es lento, pero no sabes por dónde empezar. Los Core Web Vitals son las métricas de Google para la experiencia de usuario real: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) y Cumulative Layout Shift (CLS). Afectan al posicionamiento en buscadores y, más importante aún, a cómo perciben los usuarios tu sitio. Un LCP lento frustra a los visitantes, un INP alto hace que la página se sienta poco receptiva y un CLS deficiente provoca clics accidentales. Esta guía te muestra cómo medir estas métricas y mejorarlas con pasos prácticos.

Entendiendo los tres Core Web Vitals

Antes de optimizar, conoce qué mide cada métrica y sus umbrales.

Estos umbrales se basan en datos de campo (usuarios reales), no en pruebas de laboratorio. Apunta al rango "Bueno" para al menos el 75% de las cargas de página.

Cómo medir los Core Web Vitals

Necesitas tanto datos de laboratorio como de campo. Los datos de laboratorio te ayudan a depurar; los datos de campo reflejan la experiencia real del usuario.

Herramientas de laboratorio

• Lighthouse en Chrome DevTools: ejecuta una auditoría para obtener puntuaciones de rendimiento y oportunidades específicas.
• WebPageTest: pruebas avanzadas con filmstrips y gráficos de cascada.
• Chrome UX Report (CrUX): datos de campo de usuarios reales, accesibles a través de PageSpeed Insights o la API de CrUX.

Herramientas de campo

• PageSpeed Insights: muestra datos de laboratorio y de campo para una URL.
• Google Search Console: el informe de Core Web Vitals agrupa las URL por estado.
• Biblioteca JavaScript web-vitals: recopila métricas de usuarios reales en tu propio sistema de analítica.

Para instrumentar tu sitio, incluye la biblioteca web-vitals y envía las métricas a tu endpoint de analítica:

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

Esto te proporciona un flujo continuo de datos de campo para hacer seguimiento de las mejoras.

Mejorar Largest Contentful Paint (LCP)

LCP suele ser el mayor desafío. El elemento más grande normalmente es una imagen principal o un bloque de texto grande. Optimiza su ruta de carga.

1. Identifica el elemento LCP usando Lighthouse o el panel de rendimiento de DevTools.
2. Prioriza su carga: usa fetchpriority="high" en la imagen o precárgala con <link rel="preload">.
3. Optimiza las imágenes: comprime, usa formatos modernos (WebP/AVIF) y sirve tamaños responsivos con srcset.
4. Reduce el tiempo de respuesta del servidor: usa caché, una CDN y optimiza las consultas del backend.
5. Elimina los recursos que bloquean el renderizado: inserta el CSS crítico en línea y difiere el JS no crítico.

Ejemplo: precarga la imagen principal y establece la prioridad de carga:

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

Establece siempre el ancho y el alto para evitar desplazamientos de diseño.

Mejorar Interaction to Next Paint (INP)

INP mide la capacidad de respuesta. Las tareas largas bloquean el hilo principal y retrasan la retroalimentación visual. Para mejorar INP:

• Divide las tareas largas: usa setTimeout o scheduler.yield para ceder el control al navegador.
• Optimiza los manejadores de eventos: aplica debounce a la entrada y evita trabajo síncrono pesado.
• Reduce JavaScript: divide el código, elimina código no utilizado (tree-shaking) y difiere los scripts no críticos.
• Usa web workers para tareas intensivas en CPU.
• Evita actualizaciones grandes del DOM: agrupa los cambios del DOM y usa requestAnimationFrame.

Ejemplo: cede el control al hilo principal durante un bucle largo:

async function processItems(items) {
  for (let i = 0; i < items.length; i++) {
    // do work
    if (i % 50 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

Esto mantiene la página receptiva durante un procesamiento pesado.

Mejorar Cumulative Layout Shift (CLS)

CLS ocurre cuando los elementos se mueven inesperadamente. Causas comunes: imágenes sin dimensiones, anuncios, embeds y fuentes web.

• Incluye siempre ancho y alto en imágenes y videos.
• Reserva espacio para contenido dinámico (anuncios, embeds) con min-height de CSS o cajas de relación de aspecto.
• Usa font-display: swap y precarga las fuentes para evitar texto invisible y desplazamientos de diseño.
• Evita insertar contenido encima del contenido existente a menos que sea en respuesta a una interacción del usuario.

Ejemplo: usa aspect-ratio para reservar espacio:

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

Esto evita desplazamientos cuando se carga el video.

Monitorear e iterar

El rendimiento no es una solución única. Configura un monitoreo continuo con métricas de usuarios reales. Usa paneles para hacer seguimiento de LCP, INP y CLS a lo largo del tiempo. Después de cada cambio, verifica con herramientas de laboratorio y revisa los datos de campo después de unos días. Prioriza las correcciones que afectan a la mayoría de los usuarios.

Preguntas frecuentes

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

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

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

Monitorea los datos de campo continuamente y ejecuta pruebas de laboratorio después de cada cambio significativo. Revisa Search Console semanalmente para ver tendencias.

¿Puedo mejorar los Core Web Vitals sin reconstruir mi sitio?

Sí. Muchas mejoras como la optimización de imágenes, la precarga y los ajustes de CSS se pueden aplicar de forma incremental sin una reconstrucción completa.

¿Necesitas comprimir imágenes rápidamente para mejorar el LCP? Prueba nuestro Compresor de Imágenes gratuito para reducir el tamaño de los archivos sin perder calidad.