Core Web Vitals: Cómo medirlas y mejorarlas

Tus usuarios esperan páginas rápidas y responsivas. Las Core Web Vitals (CWV) de Google cuantifican esa experiencia: Largest Contentful Paint (LCP) mide la carga, Interaction to Next Paint (INP) mide la interactividad y Cumulative Layout Shift (CLS) mide la estabilidad visual. Las puntuaciones bajas afectan la satisfacción del usuario y pueden influir en el ranking de búsqueda. Esta guía te muestra cómo medir las CWV con precisión y solucionar problemas comunes con pasos prácticos.

¿Qué son las Core Web Vitals?

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

• LCP: Tiempo hasta que se renderiza el elemento de contenido más grande (imagen, bloque de texto). Bueno: ≤2.5s.
• INP: Tiempo desde la interacción del usuario hasta el siguiente pintado. Bueno: ≤200ms.
• CLS: Suma de las puntuaciones de desplazamiento de diseño. Bueno: ≤0.1.

Estos umbrales se evalúan en el percentil 75 de las cargas de página, lo que significa que el 75% de las visitas deben cumplir el objetivo.

Cómo medir las Core Web Vitals

Necesitas tanto datos 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: Ejecuta auditorías de rendimiento, accesibilidad y SEO. Proporciona puntuaciones de CWV de laboratorio y oportunidades de mejora.
• WebPageTest: Pruebas avanzadas con condiciones de red personalizadas y emulación de dispositivos.

Herramientas de campo

• Chrome UX Report (CrUX): Conjunto de datos público de métricas de usuarios reales. Accede a través de PageSpeed Insights o BigQuery.
• Biblioteca JavaScript web-vitals: Recopila CWV de usuarios reales y envíalas a tu analítica.

Utiliza datos de campo para identificar problemas reales, luego herramientas de laboratorio para depurar y verificar las correcciones.

Mejorar Largest Contentful Paint (LCP)

LCP suele ser la imagen principal o el encabezado principal. Optimiza estos elementos:

1. Optimiza las imágenes: Comprime imágenes, usa formatos modernos como WebP o AVIF y sirve tamaños responsivos con srcset.
2. Precarga recursos críticos: Añade <link rel="preload"> para la imagen o fuente LCP.
3. Reduce el tiempo de respuesta del servidor: Usa caché, CDNs y código backend eficiente.
4. Elimina recursos que bloquean el renderizado: Difiere CSS/JS no críticos, inserta CSS crítico en línea.

Ejemplo: precarga tu imagen LCP:

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

También establece fetchpriority="high" en la etiqueta <img> para indicar importancia.

Mejorar Interaction to Next Paint (INP)

INP mide la capacidad de respuesta a clics, toques y entrada de teclado. Las tareas largas bloquean el hilo principal. Para mejorar INP:

• Divide las tareas largas: Usa setTimeout o requestIdleCallback para ceder al navegador.
• Optimiza los manejadores de eventos: Aplica debounce o throttle a operaciones costosas.
• Reduce JavaScript: Divide el código, elimina código no utilizado y difiere scripts no críticos.
• Usa web workers para trabajo intensivo de CPU.

Ejemplo: ceder al hilo principal:

async function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

async function handleClick() {
  // Haz algo de trabajo
  await yieldToMain();
  // Continúa
}

Mejorar Cumulative Layout Shift (CLS)

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

• Establece ancho y alto en imágenes y videos, o usa CSS aspect-ratio.
• Reserva espacio para contenido dinámico (anuncios, embeds) con min-height.
• Usa font-display: swap y precarga fuentes para evitar texto invisible que cause desplazamientos.
• Evita insertar contenido encima del contenido existente a menos que se active por interacción del usuario.

Ejemplo: reserva espacio para un anuncio:

.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
}

Comparación de métricas y herramientas

Flujo de trabajo práctico para mejorar las CWV

1. Mide datos de campo con PageSpeed Insights o CrUX para identificar páginas con puntuaciones bajas.
2. Ejecuta Lighthouse en esas páginas para obtener oportunidades específicas.
3. Prioriza las correcciones por impacto: a menudo LCP y CLS son las más fáciles de mejorar.
4. Implementa cambios y prueba en laboratorio.
5. Despliega y monitorea los datos de campo para confirmar la mejora.
6. Itera sobre los problemas restantes.

Recuerda que las CWV están centradas en el usuario; valida siempre con datos de usuarios reales.

Preguntas frecuentes

¿Qué son las Core Web Vitals y por qué importan?

Las Core Web Vitals son tres métricas (LCP, INP, CLS) que cuantifican la carga, la interactividad y la estabilidad visual. Importan porque reflejan la experiencia real del usuario y Google las utiliza como señal de posicionamiento.

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

Monitorea los datos de campo continuamente y ejecuta pruebas de laboratorio después de cambios importantes. Una revisión mensual de los datos de CrUX es una buena práctica.

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

Sí. Muchas mejoras como la optimización de imágenes, la precarga y las correcciones de diseño se pueden aplicar de forma incremental sin una reconstrucción completa.

¿Necesitas comprimir imágenes para un LCP más rápido? Prueba nuestro Compresor de Imágenes gratuito para reducir el tamaño de archivo sin perder calidad.