Core Web Vitals: Mide y mejora el rendimiento web

Tus usuarios son impacientes. Si tu sitio tarda más de unos segundos en cargar, se van. Los motores de búsqueda también lo notan: las Core Web Vitals son señales de posicionamiento. Pero mejorarlas parece un laberinto de métricas y herramientas. Esta guía elimina el ruido. Aprenderás qué significa cada métrica, cómo medirla con precisión y pasos concretos para mejorarla.

¿Qué son las Core Web Vitals?

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

• Largest Contentful Paint (LCP): Cuánto tarda en cargarse el contenido principal. Objetivo: menos de 2,5 segundos.
• Interaction to Next Paint (INP): Con qué rapidez responde la página a la interacción del usuario. Objetivo: menos de 200 milisegundos.
• Cumulative Layout Shift (CLS): Cuánto salta el diseño durante la carga. Objetivo: menos de 0,1.

Estas métricas se miden a partir de sesiones de usuarios reales (datos de campo) y pruebas sintéticas (datos de laboratorio). Los datos de campo son los que importan para el posicionamiento.

Cómo medir las 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 y oportunidades.
• PageSpeed Insights: Combina datos de laboratorio y de campo para una URL.
• WebPageTest: Análisis avanzado de cascada.

Herramientas de campo

• Chrome User Experience Report (CrUX): Datos de usuarios reales de Chrome, disponibles a través de PageSpeed Insights o BigQuery.
• Biblioteca JavaScript web-vitals: Recopila métricas de tus propios usuarios y envíalas a tu analítica.

Para recopilar datos de campo, añade la biblioteca web-vitals a tu sitio:

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 métricas de usuarios reales.

Mejorar el LCP

El LCP suele ser la imagen, el vídeo o el bloque de texto más grande. Para mejorarlo, céntrate en la ruta crítica.

1. Optimiza las imágenes: Comprime las imágenes, usa formatos modernos como WebP o AVIF y establece width y height explícitos. Herramientas como el Image Compressor pueden ayudar a reducir el tamaño del archivo sin pérdida visible de calidad.
2. Precarga el recurso LCP: Añade <link rel="preload"> para la imagen principal o la fuente.
3. Reduce el tiempo de respuesta del servidor: Usa una CDN, activa el almacenamiento en caché y optimiza las consultas del backend.
4. Elimina los recursos que bloquean el renderizado: Inserta el CSS crítico en línea y aplaza el JavaScript no crítico.
5. Usa imágenes adaptables: Sirve imágenes del tamaño adecuado con srcset.

Ejemplo de precarga de una imagen LCP:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

Mejorar el INP

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

• Divide las tareas largas: Usa setTimeout o requestIdleCallback para ceder el control al hilo principal.
• Optimiza los manejadores de eventos: Aplica debounce o throttle a los manejadores costosos.
• Reduce el JavaScript: Elimina el código no utilizado, divide el código y carga de forma diferida los módulos no críticos.
• Usa web workers para cálculos pesados.
• Evita DOM de gran tamaño: Mantén el DOM por debajo de 1.500 nodos.

Ejemplo de cesión del control al 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

El CLS ocurre cuando los elementos se desplazan inesperadamente. Causas comunes: imágenes sin dimensiones, anuncios, embeds y contenido inyectado dinámicamente.

• Establece siempre width y height en imágenes y vídeos.
• Reserva espacio para anuncios y embeds usando CSS aspect-ratio o contenedores fijos.
• Evita insertar contenido por encima del contenido existente a menos que lo active la interacción del usuario.
• Usa font-display: optional para evitar desplazamientos por el intercambio de fuentes, o precarga las fuentes.
• Aplica animaciones con transform en lugar de propiedades que provoquen un reflow.

Ejemplo de reserva de espacio para una imagen:

<img src="#" width="800" height="600" alt="...">

Herramientas y flujo de trabajo

Integra las comprobaciones de rendimiento en tu flujo de trabajo de desarrollo:

• Ejecuta Lighthouse en CI para detectar regresiones.
• Usa web-vitals para monitorizar los datos de campo y configurar alertas.
• Analiza los registros del servidor para identificar endpoints lentos. El Nginx Log Analyzer puede ayudarte a detectar solicitudes lentas y errores.
• Prueba en dispositivos reales y redes con limitación de velocidad.

Comparación de métricas y objetivos

Preguntas frecuentes

¿Qué son las Core Web Vitals?

Las Core Web Vitals son tres métricas —LCP, INP y CLS— que miden la carga, la interactividad y la estabilidad visual. Google las utiliza como señales de posicionamiento.

¿Cómo mido las Core Web Vitals?

Usa herramientas de laboratorio como Lighthouse para depurar y herramientas de campo como la biblioteca web-vitals o CrUX para datos de usuarios reales. Ambas son importantes.

¿Qué es una buena puntuación de LCP?

Un buen LCP es inferior a 2,5 segundos. Cualquier valor por encima de 4 segundos es deficiente. Optimiza las imágenes, precarga los recursos críticos y reduce el tiempo de respuesta del servidor.

¿Listo para acelerar tu sitio? Empieza comprimiendo tus imágenes con nuestro Image Compressor gratuito para mejorar el LCP al instante.