Core Web Vitals: Mide y mejora el rendimiento web

Has creado un sitio web rápido, pero los usuarios siguen quejándose de lentitud. O quizás Google Search Console muestra que tus páginas tienen Core Web Vitals "pobres". No estás solo: muchos desarrolladores luchan por traducir las métricas de rendimiento en mejoras reales. Las Core Web Vitals son las métricas centradas en el usuario de Google que cuantifican la carga, la interactividad y la estabilidad visual. Ignorarlas puede perjudicar tu posicionamiento en buscadores y la satisfacción del usuario. Esta guía te muestra cómo medir y mejorar cada vital con pasos prácticos.

¿Qué son las Core Web Vitals?

Las Core Web Vitals son un conjunto de tres métricas que Google utiliza para evaluar la experiencia de usuario:

• Largest Contentful Paint (LCP): mide el rendimiento de carga. Marca el tiempo en que el elemento de contenido más grande (imagen, bloque de texto o video) se hace visible. El objetivo es un LCP inferior a 2,5 segundos.
• First Input Delay (FID): mide la interactividad. Registra el tiempo desde que un usuario interactúa por primera vez (por ejemplo, hace clic en un enlace) hasta que el navegador responde. El objetivo es un FID inferior a 100 milisegundos.
• Cumulative Layout Shift (CLS): mide la estabilidad visual. Cuantifica los cambios de diseño inesperados durante la carga de la página. El objetivo es un CLS inferior a 0,1.

Estas métricas forman parte de las señales de experiencia de página de Google e influyen directamente en el SEO. Pero, más importante aún, reflejan la frustración real del usuario: cargas lentas, interacciones con retraso y contenido que salta.

Cómo medir las Core Web Vitals

No puedes mejorar lo que no mides. Existen dos enfoques principales: datos de laboratorio (pruebas sintéticas) y datos de campo (monitorización de usuarios reales).

Herramientas de laboratorio

• Lighthouse: integrado en Chrome DevTools, audita el rendimiento y proporciona puntuaciones para LCP, FID (como TBT) y CLS. Ejecútalo en modo incógnito para evitar que las extensiones distorsionen los resultados.
• WebPageTest: ofrece filmstrips detallados y gráficos de cascada, útil para diagnosticar cuellos de botella en LCP.
• PageSpeed Insights: combina datos de laboratorio y de campo, mostrando tanto las puntuaciones de Lighthouse como las métricas de usuarios reales del Chrome User Experience Report (CrUX).

Herramientas de campo

• Chrome UX Report (CrUX): conjunto de datos públicos de métricas de usuarios reales para millones de sitios. Accede a través de PageSpeed Insights o BigQuery.
• Google Search Console: en el informe "Core Web Vitals", agrupa las URL por estado (pobre, necesita mejorar, bueno).
• Biblioteca JavaScript Web Vitals: añade este fragmento a tu sitio para recopilar métricas a través de Google Analytics o tu propio endpoint.

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

function sendToAnalytics(metric) {
  // Reemplaza con tu endpoint de analítica
  console.log(metric.name, metric.value);
}

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

Comienza con datos de campo para identificar las páginas problemáticas, luego utiliza herramientas de laboratorio para profundizar en las causas.

Mejorar Largest Contentful Paint (LCP)

LCP suele ser la vital más difícil de corregir. El elemento más grande suele ser una imagen destacada o un bloque de texto grande. Así puedes optimizarlo:

1. Optimiza las imágenes: comprime imágenes usando formatos modernos como WebP o AVIF. Utiliza imágenes responsivas con srcset y sizes para servir imágenes del tamaño adecuado. Carga de forma diferida las imágenes que están por debajo del pliegue, pero nunca apliques lazy-load a la imagen LCP.
2. Precarga recursos críticos: añade <link rel="preload"> para la imagen o fuente LCP. Por ejemplo: <link rel="preload" as="image" href="#">.
3. Elimina recursos que bloquean el renderizado: difiere CSS y JavaScript no críticos. Incluye el CSS crítico en línea y carga el resto de forma asíncrona.
4. Usa una CDN: sirve los recursos desde una red de entrega de contenido para reducir la latencia.
5. Reduce el tiempo de respuesta del servidor: optimiza las consultas del backend, usa caché y considera el renderizado en el edge.

Para profundizar, consulta la guía de LCP de web.dev.

Mejorar First Input Delay (FID)

FID mide la capacidad de respuesta. Un FID alto significa que el hilo principal del navegador está ocupado y no puede responder rápidamente a la entrada del usuario. Para mejorar FID:

• Divide las tareas largas: fragmenta JavaScript en trozos más pequeños usando setTimeout o requestIdleCallback.
• Minimiza el trabajo del hilo principal: reduce el tiempo de ejecución de JavaScript mediante code-splitting, tree-shaking y eliminación de polyfills innecesarios.
• Usa web workers para cálculos pesados.
• Evita paquetes de JavaScript grandes: audita con webpack-bundle-analyzer y considera la carga diferida de scripts no críticos.

Nota: FID será reemplazado por Interaction to Next Paint (INP) en marzo de 2024. Las estrategias para mejorar INP son similares: enfócate en reducir el bloqueo del hilo principal.

Mejorar Cumulative Layout Shift (CLS)

CLS mide los cambios de diseño inesperados. Las causas comunes incluyen imágenes sin dimensiones, anuncios, embeds y fuentes web. Para corregir CLS:

• Incluye siempre los atributos width y height en imágenes y videos. Esto permite al navegador reservar espacio.
• Reserva espacio para anuncios y embeds: usa CSS aspect-ratio o elementos de marcador de posición.
• Evita insertar contenido encima del contenido existente a menos que sea en respuesta a una interacción del usuario.
• Usa font-display: swap para fuentes web para evitar texto invisible (FOIT), pero ten en cuenta que swap puede causar cambios de diseño si la fuente de respaldo tiene métricas diferentes. Considera usar size-adjust o font-display: optional.

Prueba con la API Layout Instability en Chrome DevTools para identificar los cambios.

Herramientas y flujo de trabajo para monitorización continua

El rendimiento no es una solución única. Establece un flujo de trabajo:

1. Línea base: ejecuta Lighthouse en páginas clave y registra las puntuaciones.
2. Monitoriza datos de campo: usa la biblioteca web-vitals para enviar métricas a tu plataforma de analítica. Configura alertas para regresiones.
3. Integra en CI: usa Lighthouse CI para fallar builds si se superan los presupuestos de rendimiento.
4. Auditorías regulares: programa revisiones mensuales de Core Web Vitals en Search Console.

Recuerda que las mejoras deben centrarse en el usuario, no solo en las métricas. Un sitio rápido deleita a los usuarios y mejora el SEO.

Preguntas frecuentes

¿Cuáles son los umbrales actuales para las 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 revisar las Core Web Vitals?

Los datos de campo se actualizan diariamente en Search Console, pero las tendencias significativas tardan semanas. Monitoriza continuamente mediante analítica y revisa mensualmente. Realiza pruebas de laboratorio después de cambios importantes en el código.

¿Mejorar las Core Web Vitals realmente afecta al SEO?

Sí, Google utiliza la experiencia de página como señal de posicionamiento. Aunque el contenido sigue siendo primordial, unas buenas Core Web Vitals pueden darte ventaja, especialmente en nichos competitivos.

¿Listo para optimizar tus imágenes y mejorar el LCP? Prueba nuestro Compresor de Imágenes gratuito para reducir el tamaño de archivo sin pérdida de calidad.