Core Web Vitals: Mide y mejora el rendimiento web

Tus usuarios esperan experiencias rápidas y fluidas. Las Core Web Vitals (CWV) de Google cuantifican esa experiencia: Largest Contentful Paint (LCP), First Input Delay (FID) y Cumulative Layout Shift (CLS). Las puntuaciones bajas perjudican el SEO y las conversiones. Esta guía te muestra cómo medir y mejorar cada métrica con pasos prácticos.

¿Qué son las Core Web Vitals?

Las Core Web Vitals son tres métricas centradas en el usuario que Google utiliza como señales de clasificación:

• LCP: Cuánto tarda el elemento de contenido más grande (imagen, bloque de texto) en ser visible. Bueno: ≤2.5s.
• FID: Tiempo desde la primera interacción del usuario (clic, toque) hasta la respuesta del navegador. Bueno: ≤100ms.
• CLS: Estabilidad visual: cuánto se desplaza inesperadamente el diseño de la página. Bueno: ≤0.1.

Estas métricas reflejan la experiencia del usuario en el mundo real, no solo en condiciones de laboratorio. Mejorarlas hace que tu sitio se sienta más rápido y estable.

Cómo medir las Core Web Vitals

Necesitas datos tanto de laboratorio como de campo. Las herramientas de laboratorio ayudan a depurar; los datos de campo (Real User Monitoring) muestran el rendimiento real.

Herramientas de laboratorio

• Lighthouse (en Chrome DevTools): Ejecuta auditorías de rendimiento, accesibilidad y SEO. Informa LCP, CLS y TBT (un proxy de FID).
• WebPageTest: Pruebas avanzadas con filmstrips y gráficos waterfall.
• Panel Performance de Chrome DevTools: Graba y analiza el rendimiento en tiempo de ejecución.

Herramientas de campo

• Chrome User Experience Report (CrUX): Conjunto de datos público de métricas de usuarios reales para millones de sitios.
• Google Search Console: El informe de Core Web Vitals muestra grupos de URL que necesitan atención.
• Biblioteca JavaScript web-vitals: Recopila métricas de usuarios reales y envíalas a tu analítica.

Utiliza datos de campo para identificar páginas problemáticas y luego herramientas de laboratorio para diagnosticar y corregir.

Mejorar Largest Contentful Paint (LCP)

LCP suele ser la imagen principal o el encabezado principal. Para acelerarlo:

1. Optimiza las imágenes: Comprime, usa formatos modernos (WebP, AVIF) y sirve tamaños responsivos. Herramientas como Image Compressor pueden ayudar a reducir el tamaño del archivo sin pérdida de calidad.
2. Precarga recursos críticos: Usa <link rel="preload"> para imágenes principales, fuentes y CSS clave.
3. Reduce el tiempo de respuesta del servidor: Usa caché, CDNs y optimiza las consultas del backend.
4. Elimina recursos que bloquean el renderizado: Difiere JS y CSS no críticos, inserta CSS crítico en línea.
5. Usa una CDN: Sirve recursos desde ubicaciones cercanas a los usuarios.

Ejemplo: precarga tu imagen LCP:

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

Mejorar First Input Delay (FID)

FID mide la capacidad de respuesta. Un retraso largo significa que el hilo principal está ocupado. Para mejorar:

• Divide las tareas largas: Usa setTimeout o requestIdleCallback para ceder el hilo principal.
• Optimiza JavaScript: Divide el código, elimina código no utilizado (tree-shaking) y difiere scripts no críticos.
• Reduce el impacto de terceros: Carga analíticas y anuncios de forma asíncrona o después de la interacción.
• Usa web workers para cálculos pesados.

También considera Interaction to Next Paint (INP), que reemplazará a FID en marzo de 2024. INP mide la capacidad de respuesta general a lo largo del ciclo de vida de la página. Se aplican las mismas optimizaciones.

Mejorar Cumulative Layout Shift (CLS)

CLS ocurre cuando los elementos se mueven inesperadamente. Causas comunes: imágenes sin dimensiones, anuncios, fuentes y contenido dinámico. Soluciones:

• Establece siempre ancho y alto en imágenes y videos, o usa CSS aspect-ratio.
• Reserva espacio para anuncios e incrustaciones: Usa elementos de marcador de posición con tamaño fijo.
• Evita insertar contenido encima del contenido existente a menos que sea en respuesta a una interacción del usuario.
• Usa font-display: swap y precarga fuentes para evitar texto invisible (FOIT) y desplazamientos de diseño.
• Anima con transform en lugar de propiedades que desencadenan el diseño.

Ejemplo: establece la relación de aspecto para imágenes responsivas:

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

Herramientas y flujo de trabajo

Integra el rendimiento en tu flujo de trabajo de desarrollo:

1. Ejecuta Lighthouse en CI para detectar regresiones.
2. Usa la biblioteca web-vitals para enviar datos de campo a tu analítica.
3. Monitorea CrUX y Search Console para tendencias de usuarios reales.
4. Prioriza las correcciones por impacto: a menudo LCP y CLS producen las mayores ganancias.

Para una optimización rápida de imágenes, prueba nuestro Image Compressor para reducir las imágenes críticas para LCP.

Preguntas frecuentes

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

LCP: bueno ≤2.5s, necesita mejorar ≤4s, pobre >4s. FID: bueno ≤100ms, necesita mejorar ≤300ms, pobre >300ms. CLS: bueno ≤0.1, necesita mejorar ≤0.25, pobre >0.25.

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

Monitorea los datos de campo continuamente mediante RUM. Ejecuta auditorías de laboratorio en cada cambio significativo de código y al menos mensualmente para detectar regresiones.

¿Mejorar las Core Web Vitals realmente afecta el SEO?

Sí, Google utiliza la experiencia de página (incluidas las CWV) como señal de clasificación. Aunque el contenido sigue siendo primordial, unas buenas CWV pueden darte una ventaja y mejorar la satisfacción del usuario.