Core Web Vitals: Medir y mejorar el rendimiento web

Has creado una aplicación web moderna, pero los usuarios se quejan de que va lenta. Las posiciones en los buscadores bajan y la tasa de rebote aumenta. El culpable podría ser un mal Core Web Vitals: las métricas de Google para la experiencia de usuario real. En esta guía, aprenderás qué son, cómo medirlas con precisión y pasos prácticos para mejorar cada una.

¿Qué son Core Web Vitals?

Core Web Vitals son tres métricas que cuantifican aspectos clave de la experiencia de usuario:

• Largest Contentful Paint (LCP): Cuánto tarda el elemento de contenido más grande (imagen o bloque de texto) en ser visible. Bueno: ≤ 2,5 s.
• Interaction to Next Paint (INP): Mide la capacidad de respuesta: el tiempo desde una interacción del usuario (clic, toque, pulsación de tecla) hasta la siguiente actualización visual. Bueno: ≤ 200 ms.
• Cumulative Layout Shift (CLS): Cuantifica los cambios de diseño inesperados. Bueno: ≤ 0,1.

Estas métricas forman parte de las señales de experiencia de página de Google e impactan directamente en el SEO y la satisfacción del usuario.

Cómo medir Core Web Vitals

Necesitas datos de laboratorio y de campo. Los datos de laboratorio ayudan a depurar; los de campo reflejan a los usuarios reales.

Herramientas de laboratorio

• Lighthouse en Chrome DevTools: Ejecuta una auditoría para obtener LCP, CLS y TBT (un proxy de INP).
• WebPageTest: Pruebas avanzadas con filmstrips y gráficos de cascada.
• PageSpeed Insights: Combina datos de laboratorio y de campo.

Herramientas de campo

• Chrome UX Report (CrUX): Conjunto de datos público de métricas de usuarios reales.
• Biblioteca web-vitals: Envía métricas a tu analítica.

Ejemplo: Usar la biblioteca web-vitals para registrar 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);

Mejorar LCP

LCP suele ser la métrica más impactante de corregir. Causas comunes: respuesta lenta del servidor, recursos que bloquean el renderizado e imágenes no optimizadas.

1. Optimiza las imágenes: Comprime, usa formatos modernos (WebP/AVIF) y establece dimensiones. Para comprimir rápidamente, prueba nuestro Compresor de Imágenes.
2. Precarga recursos críticos: Usa <link rel="preload"> para imágenes principales y fuentes.
3. Reduce el tiempo de respuesta del servidor: Usa caché, CDN y optimiza las consultas del backend.
4. Elimina recursos que bloquean el renderizado: Incluye CSS crítico en línea, difiere el JS no crítico.

Ejemplo: Precargar la imagen LCP:

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

Mejorar INP

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

1. Divide las tareas largas: Usa setTimeout o scheduler.yield para ceder el hilo principal.
2. Optimiza los manejadores de eventos: Aplica debounce y throttle cuando corresponda; evita trabajo sincrónico pesado.
3. Reduce JavaScript: Divide el código, elimina código no usado (tree-shaking) y difiere scripts no críticos.
4. Usa web workers para tareas intensivas de CPU.

Ejemplo: Ceder con scheduler.yield (donde esté soportado):

async function handleClick() {
  // Haz algo de trabajo
  await scheduler.yield();
  // Continúa después de ceder
}

Mejorar CLS

CLS se trata de estabilidad visual. Los cambios de diseño ocurren cuando los elementos cambian de posición inesperadamente.

1. Establece atributos de tamaño en imágenes y videos (width/height).
2. Reserva espacio para anuncios e incrustaciones: Usa CSS aspect-ratio o dimensiones fijas.
3. Evita insertar contenido encima del contenido existente a menos que lo active una interacción del usuario.
4. Usa animaciones con transform en lugar de propiedades que desencadenan el layout.

Ejemplo: Reservar espacio con aspect-ratio:

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

Comparación de Core Web Vitals

Herramientas y flujo de trabajo

Integra el monitoreo de rendimiento en tu pipeline de CI/CD. Usa Lighthouse CI para detectar regresiones. Para datos de campo, configura un panel con web-vitals y tu analítica.

Al optimizar imágenes, puedes comprimirlas rápidamente con nuestro Compresor de Imágenes antes de subirlas a tu sitio.

Preguntas frecuentes

¿Qué son Core Web Vitals?

Core Web Vitals son tres métricas (LCP, INP y CLS) que Google utiliza para medir la experiencia de usuario en páginas web.

¿Con qué frecuencia debo medir Core Web Vitals?

Continuamente en el campo mediante analítica, y en cada despliegue en el laboratorio usando Lighthouse CI para detectar regresiones.

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

Sí. Muchas mejoras como la optimización de imágenes, la precarga y el establecimiento de dimensiones se pueden hacer de forma incremental sin un rediseño completo.

Empieza midiendo tus puntuaciones actuales con Lighthouse y luego aborda la métrica con mayor impacto. Las optimizaciones pequeñas y constantes conducen a mejoras significativas en la experiencia de usuario y el SEO.