Core Web Vitals: Mide y mejora el rendimiento web

Has creado un sitio web rápido, pero los usuarios aún se quejan de la lentitud. O tal vez tus rankings de SEO cayeron después de una actualización de Google. El culpable podrían ser los Core Web Vitals, las métricas de Google para la experiencia de usuario. En esta guía, aprenderás qué son, cómo medirlos con datos de usuarios reales y pasos prácticos para mejorarlos.

¿Qué son los Core Web Vitals?

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

• Largest Contentful Paint (LCP): Cuánto tarda en renderizarse el elemento visible más grande (por ejemplo, la imagen principal o el encabezado). Bueno: ≤2.5s.
• First Input Delay (FID): El tiempo desde que un usuario interactúa por primera vez (por ejemplo, hace clic en un enlace) hasta que el navegador responde. Bueno: ≤100ms.
• Cumulative Layout Shift (CLS): Mide la estabilidad visual: cuánto se desplazan los elementos de forma inesperada. 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. Pero, más importante aún, reflejan la frustración real del usuario.

Cómo medir los Core Web Vitals

Necesitas tanto datos de laboratorio como de campo. Los datos de laboratorio (por ejemplo, Lighthouse) ayudan a depurar, mientras que los datos de campo (monitoreo de usuarios reales) muestran el rendimiento real.

1. Usa Chrome UX Report (CrUX)

CrUX proporciona datos agregados de usuarios reales para millones de sitios. Puedes verlos en PageSpeed Insights o en el Panel de CrUX. Muestra la distribución de LCP, FID y CLS para tu origen.

2. Configura el monitoreo de usuarios reales (RUM)

Herramientas como Google Analytics 4, Vercel Analytics o librerías de código abierto (web-vitals) te permiten recopilar los Core Web Vitals de visitantes reales. Así puedes enviar métricas a tu endpoint de analítica:

import {onLCP, onFID, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);

Este fragmento utiliza la librería web-vitals para capturar métricas y enviarlas mediante sendBeacon sin afectar la carga de la página.

3. Usa Lighthouse para pruebas de laboratorio

Lighthouse (en Chrome DevTools o PageSpeed Insights) simula la carga de una página e informa los Core Web Vitals junto con oportunidades de mejora. Ejecútalo en páginas clave y realiza un seguimiento de los cambios a lo largo del tiempo.

Mejorar LCP

LCP suele ser la métrica más impactante. Para mejorarla:

• Optimiza las imágenes: Comprime imágenes, usa formatos modernos (WebP, AVIF) y sirve tamaños responsivos con srcset.
• Precarga recursos críticos: Usa <link rel="preload"> para la imagen o fuente LCP.
• Reduce el tiempo de respuesta del servidor: Usa CDN, caché y optimiza las consultas del backend.
• Elimina recursos que bloquean el renderizado: Difiere CSS/JS no crítico, inserta CSS crítico en línea.

Por ejemplo, precarga tu imagen principal:

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

Mejorar FID

FID mide la capacidad de respuesta a la entrada. Para mejorarla:

• Divide tareas largas: Usa setTimeout o requestIdleCallback para ceder el hilo principal.
• Minimiza el trabajo del hilo principal: Reduce el tiempo de ejecución de JavaScript, evita paquetes grandes.
• Usa web workers para cálculos pesados.
• Optimiza los manejadores de eventos: Aplica debounce o throttle a eventos rápidos.

También considera la transición a Interaction to Next Paint (INP), que reemplazará a FID en 2024. INP mide todas las interacciones, por lo que se aplican las mismas optimizaciones.

Mejorar CLS

CLS se trata de la estabilidad visual. Causas comunes y soluciones:

• Imágenes sin dimensiones: Siempre establece atributos width y height o usa CSS aspect-ratio.
• Anuncios, embeds e iframes: Reserva espacio con un marcador de posición o establece dimensiones fijas.
• Inyección de contenido dinámico: Evita insertar contenido por encima del contenido existente a menos que sea en respuesta a una interacción del usuario.
• Fuentes web: Usa font-display: swap y precarga fuentes para evitar texto invisible y cambios de diseño.

Ejemplo: reserva espacio para una imagen:

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

Comparación de Core Web Vitals

Herramientas para monitoreo continuo

Mejorar los Core Web Vitals no es una tarea única. Configura paneles para rastrear datos de campo. Usa:

• Google Search Console: El informe de Core Web Vitals muestra grupos de URL que necesitan atención.
• PageSpeed Insights: Combina datos de laboratorio y de campo.
• Extensión Web Vitals: Métricas en tiempo real mientras navegas.
• Herramientas RUM: Como SpeedCurve, Calibre o alternativas de código abierto.

Audita tu sitio regularmente, especialmente después de cambios importantes.

Preguntas frecuentes

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

Los Core Web Vitals son tres métricas (LCP, FID, CLS) que Google utiliza para medir la experiencia de usuario. Importan porque impactan en los rankings de SEO y reflejan la satisfacción real del usuario.

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

Continuamente mediante monitoreo de usuarios reales, y después de cualquier cambio significativo en código o contenido. Las pruebas de laboratorio deben ejecutarse durante el desarrollo y antes de los lanzamientos.

¿Puedo mejorar los Core Web Vitals sin un desarrollador?

Algunas soluciones como comprimir imágenes o establecer dimensiones de imágenes pueden hacerlas los editores de contenido. Pero las optimizaciones más profundas a menudo requieren la participación de un desarrollador.

¿Listo para optimizar tus imágenes para un mejor LCP? Prueba nuestro Compresor de Imágenes gratuito para reducir el tamaño de archivo sin perder calidad.