Métricas web principales para mejorar la calidad de la experiencia de usuario de un sitio web.
Las Core Web Vitals son un conjunto de métricas clave diseñadas por Google para medir la calidad de la experiencia del usuario en páginas web. Estas métricas están enfocadas en aspectos importantes como el rendimiento de carga, la interactividad y la estabilidad visual de una página web. Mejorarlas no solo optimiza la experiencia de los usuarios, sino que también puede impactar positivamente en el ranking de tu sitio en los motores de búsqueda.
De todas las métricas disponibles, las principales son un subconjunto conocido como Core Web Vitals, que evalúa tres aspectos clave:
Largest Contentful Paint (LCP): Mide el tiempo que tarda el contenido principal visible en cargarse completamente. Un buen LCP asegura que los usuarios puedan acceder al contenido más importante de la página lo antes posible.
Objetivo recomendado: Debería ocurrir antes de 2.5 segundos.
Ejemplo: El texto principal de un artículo o una imagen destacada debería aparecer rápidamente después de que el usuario abre la página.
Interaction to Next Paint (INP): Mide la capacidad de respuesta de una página, es decir, el tiempo que tarda una página en reaccionar a la interacción de un usuario (clics, toques o teclas). Este indicador evalúa si la interacción del usuario es fluida y libre de retrasos.
Objetivo recomendado: 200 ms o menos.
Ejemplo: Cuando haces clic en un botón, debería responder rápidamente con la acción correspondiente, como abrir un menú o cambiar de página.
Cumulative Layout Shift (CLS): Evalúa la estabilidad visual midiendo cuánto cambian los elementos en pantalla mientras se cargan. Un CLS alto significa que los elementos se mueven de forma inesperada, lo que puede frustrar a los usuarios.
Objetivo recomendado: 0.1 o menos.
Ejemplo: Si estás a punto de hacer clic en un botón y de repente este se desplaza porque se cargó un anuncio, eso afectará el CLS.
Existen diversas herramientas que puedes utilizar para medir las Core Web Vitals de tu sitio web. Algunas de las más recomendadas son:
Estos servicios anteriores están muy bien para analizar una página en concreto o con Google Search Console, analizar muchas páginas pero después de que los bots de Google las hayan visitado. Si necesitamos analizar todas las páginas en tiempo real podemos usar la librería web-vitals de JavaScript para mandar eventos a un servicio propio que guarde los eventos.
En caso de no disponer de este servicio propio, también se pueden enviar los eventos a Google Analytics
import {onCLS, onINP, onLCP} from 'web-vitals';
function sendToGoogleAnalytics({name, delta, value, id}) { // Asume que la función `gtag()` ya existe (Google Analytics ya está instalado en la página) ver: // https://developers.google.com/analytics/devguides/collection/ga4 gtag('event', name, { value: delta, // Usar `delta` para que el valor se pueeda sumar. // Parámetros personalizados: metric_id: id, // Se requiere para agregar eventos. metric_value: value, // Opcional. metric_delta: delta, // Opcional.
// Opcional: usa cualquier otro parámetro adicional o información de depuración. // Ver: https://web.dev/articles/debug-performance-in-the-field });}
onCLS(sendToGoogleAnalytics);onINP(sendToGoogleAnalytics);onLCP(sendToGoogleAnalytics);
Luego puedes usar herramientas como Looker Studio para hacer gráficos y dashboards mostrando los resultados de las métricas.
Hemos explicado qué son las Core Web Vitals, como pueden ayudar a mejorar la experiencia del usuario y hasta obtener un mejor posicionamiento en los buscadores. También qué servicios podemos usar para analizar las métricas y finalmente como usar una librería JavaScript para enviar las métricas en tiempo real.