Core Web Vitals: Mide y mejora el rendimiento web

Has creado una aplicación web moderna, pero los usuarios se quejan de que va lenta. Las posiciones en buscadores están bajando y no sabes por qué. El culpable podrían ser unos Core Web Vitals deficientes: las métricas de Google para la experiencia de usuario. En esta guía, aprenderás qué son, cómo medirlos y, lo más importante, cómo mejorarlos con pasos accionables.

¿Qué son los Core Web Vitals?

Los Core Web Vitals son un conjunto de métricas específicas que Google utiliza para evaluar la experiencia de usuario de una página web. Se centran en la carga, la interactividad y la estabilidad visual:

• Largest Contentful Paint (LCP): Mide el rendimiento de carga. El tiempo que tarda el elemento de contenido más grande (por ejemplo, una imagen hero o un encabezado) en hacerse visible. Bueno: ≤ 2,5 segundos.
• First Input Delay (FID): Mide la interactividad. El tiempo desde que el usuario interactúa por primera vez (por ejemplo, hace clic en un botón) hasta que el navegador puede responder. Bueno: ≤ 100 milisegundos.
• Cumulative Layout Shift (CLS): Mide la estabilidad visual. Cuantifica los desplazamientos inesperados del diseño durante la carga. Bueno: ≤ 0,1.

Estas métricas forman parte de las señales de experiencia de página de Google y pueden afectar al posicionamiento en buscadores. Pero, más importante aún, reflejan la satisfacción real del usuario.

Cómo medir los Core Web Vitals

Necesitas datos de laboratorio y de campo para obtener una visión completa. Los datos de laboratorio (sintéticos) ayudan a depurar problemas, mientras que los datos de campo (monitorización de usuarios reales) muestran el rendimiento real.

Herramientas de laboratorio

• Lighthouse: Integrado 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: Pruebas avanzadas con ubicaciones y dispositivos personalizados.

Herramientas de campo

• Chrome User Experience Report (CrUX): Conjunto de datos públicos de métricas de usuarios reales. Accede a través de PageSpeed Insights o BigQuery.
• Biblioteca JavaScript web-vitals: Añádela a tu sitio para recopilar métricas de usuarios reales y enviarlas a tu analítica.
• Search Console: El informe de Core Web Vitals muestra el rendimiento del grupo basado en datos de CrUX.

Así se usa la biblioteca web-vitals para registrar métricas:

import {getLCP, getFID, getCLS} from 'web-vitals';

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

getLCP(sendToAnalytics);
getFID(sendToAnalytics);
getCLS(sendToAnalytics);

Mejorar el LCP

El LCP suele ser la métrica más complicada. Céntrate en estas áreas:

1. Optimiza las imágenes: Comprime las imágenes, usa formatos modernos como WebP o AVIF y sirve imágenes responsive con srcset. Aplica lazy-load a las imágenes fuera de pantalla.
2. Precarga recursos críticos: Usa <link rel="preload"> para imágenes hero, fuentes y CSS clave.
3. Reduce el tiempo de respuesta del servidor: Usa una CDN, activa el almacenamiento en caché y optimiza el código del backend.
4. Elimina los recursos que bloquean el renderizado: Inserta el CSS crítico en línea, difiere el JS no crítico y evita archivos CSS grandes.
5. Usa una CDN: Sirve los recursos desde ubicaciones perimetrales más cercanas a los usuarios.

Mejorar el FID

El FID tiene que ver con la capacidad de respuesta. Las tareas largas bloquean el hilo principal y retrasan la interactividad.

1. Divide las tareas largas: Usa setTimeout o requestIdleCallback para ceder el control al hilo principal.
2. Optimiza el JavaScript: Aplica code-splitting, tree-shaking y difiere los scripts no críticos.
3. Usa web workers: Mueve los cálculos pesados fuera del hilo principal.
4. Reduce el impacto de terceros: Audita y limita los scripts de terceros.

Mejorar el CLS

El CLS lo provocan los elementos que se desplazan durante la carga. Evítalo así:

1. Incluye siempre atributos width y height en imágenes y vídeos. Esto reserva espacio.
2. Reserva espacio para anuncios e insertos: Usa la propiedad CSS aspect-ratio o contenedores de tamaño fijo.
3. Evita insertar contenido encima del contenido existente: Salvo en respuesta a una interacción del usuario.
4. Usa transformaciones CSS para las animaciones: En lugar de propiedades que provocan un reflow.
5. Precarga las fuentes: Usa font-display: swap para evitar texto invisible y desplazamientos del diseño.

Comparación de las métricas de Core Web Vitals

Flujo de trabajo práctico para mejorar los Core Web Vitals

Sigue este proceso paso a paso:

1. Mide: Usa PageSpeed Insights para obtener una línea base tanto de datos de laboratorio como de campo.
2. Identifica los problemas: Revisa las oportunidades y los diagnósticos de Lighthouse.
3. Prioriza: Céntrate primero en la métrica con la peor puntuación.
4. Implementa las correcciones: Aplica las optimizaciones indicadas arriba.
5. Prueba: Vuelve a ejecutar Lighthouse y comprueba los datos de campo tras el despliegue.
6. Monitoriza: Configura la monitorización de usuarios reales con la biblioteca web-vitals y haz seguimiento a lo largo del tiempo.

Preguntas frecuentes

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

Para el LCP, bueno es ≤ 2,5s, necesita mejorar es ≤ 4s y deficiente es > 4s. Para el FID, bueno es ≤ 100ms, necesita mejorar es ≤ 300ms y deficiente es > 300ms. Para el CLS, bueno es ≤ 0,1, necesita mejorar es ≤ 0,25 y deficiente es > 0,25.

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

Monitoriza los datos de campo de forma continua y ejecuta pruebas de laboratorio tras cambios significativos. Google actualiza los datos de CrUX mensualmente, así que revisa Search Console con regularidad.

¿Puedo mejorar los Core Web Vitals sin un desarrollador?

Algunas correcciones, como la compresión de imágenes, se pueden hacer con herramientas, pero muchas requieren cambios en el código. Plantéate usar un plugin de optimización del rendimiento si usas un CMS como WordPress.

¿Listo para optimizar tus imágenes y mejorar el LCP? Prueba nuestro Compresor de Imágenes para reducir el tamaño de los archivos sin perder calidad.