Web Vitals: La herramienta de Google para medir la experiencia de usuario en páginas web

Como ya nos tiene acostumbrados en los últimos años, Google, ha lanzado una nueva iniciativa a la que ha bautizado como Web Vitals con la cual pretende unificar algunos de los valores más importantes en el rendimiento de una página web en cuanto a experiencia de usuario se refiere.

En la cumbre de desarrolladores de Chrome del año pasado, Google anunció nuevas herramientas que ayudarían a reducir el tiempo de carga de las páginas web y a crear una experiencia de usuario nativa similar a la que conocemos de las aplicaciones móviles.

Google ya ha lanzado en el pasado algunas herramientas para desarrolladores con las que analizar el rendimiento de sus proyectos web como pueden ser Lighthouse, Chrome DevTools, Page Speed Insights y los informes de velocidad de Search Console. A pesar de este gran número de herramientas Google ha advertido que algunas de estas herramientas pueden llegar a ser difíciles de comprender para algunos propietarios de sitios web.

Google considera que los propietarios de sitios no deberían tener que ser gurús del rendimiento para comprender la calidad de la experiencia que ofrecen a sus usuarios. Por ello, quieren simplificar el panorama ayudando a los desarrolladores a enfocarse en las métricas más importantes para la UX a las que han llamado Core Web Vitals y a las que algunos se refieren como ”una guía unificada para las señales de calidad que son esenciales para ofrecer una excelente experiencia de usuario en la web”.

¿Qué es Google Core Web Vitals?

Se trata de un subconjunto de todos los “puntos vitales” que se aplican a todas las páginas web. Estos, deben ser medido y analizados por todos los propietarios de páginas web para garantizar una correcta salud de la experiencia de usuario que ofrecen a sus visitantes.

Actualmente, estos puntos se centran en tres aspectos de la experiencia del usuario: carga, interactividad y estabilidad visual, e incluyen las siguientes métricas (y sus respectivos umbrales):

• La pintura más grande de contenido (LCP) : mide el rendimiento de carga . Para proporcionar una buena experiencia de usuario, el LCP debe ocurrir dentro de los 2.5 segundos posteriores al inicio de la carga de la página.
• Primer retardo de entrada (FID) : mide la interactividad . Para proporcionar una buena experiencia de usuario, las páginas deben tener un FID de menos de 100 milisegundos .
• Cambio de diseño acumulativo (CLS) : mide la estabilidad visual . Para proporcionar una buena experiencia de usuario, las páginas deben mantener un CLS de menos de 0.1.

Para cada una de las métricas anteriores, para asegurarse de alcanzar el objetivo recomendado para la mayoría de sus usuarios, un buen umbral para medir es el percentil 75 de la carga de páginas, segmentado en dispositivos móviles y de escritorio.

Para ayudar a los desarrolladores a medir e informar estos Core Web Vitals, Google se compromete a mostrar estas métricas en sus herramientas.

La siguiente tabla detalla qué herramientas son compatibles con los Core Web Vitals:

Las herramientas como Lighthouse que cargan páginas en un entorno simulado sin un usuario no pueden medir el FID (no hay entrada del usuario). Sin embargo, la métrica del Tiempo total de bloqueo (TBT) es medible en laboratorio y es un excelente proxy para FID. Las optimizaciones de rendimiento que mejoran la TBT en el laboratorio deberían mejorar la FID en el campo (consulte las recomendaciones de rendimiento a continuación).

Medir Web Vitals con una extensión de Chrome

Los desarrolladores podrán medir cada Core Web Vital sin escribir ni una sola línea de código, utilizando la Extensión de Chrome de Web Vitals.

La extensión hace uso de la biblioteca web-vitals para medir estas métricas y mostrarlas a los usuarios mientras navegan por la web. La extensión también puede ser útil para comprender el rendimiento de los sitios web propios y los de la competencia.

Web Vitals Chrome Extension, que también está disponible en GitHub, muestra los Core Vitals en una ventana emergente con el color del semáforo correspondiente. La extensión se encuentra actualmente en fase Alpha, por lo que se prevé que reciba actualizaciones periódicas. Se pueden encontrar más detalles y planes para los Web Vitals en el blog de Chromium en Google.

Cómo instalar la extensión Web Vitals en Chrome

Por el momento la extensión Web Vitals no está disponible al encontrarse en fase Alpha, no obstante, está disponible para descargar e instalar como una extensión desempaquetada desde GitHub.

Para instalarla hay que seguir los siguientes pasos:

1. Descarga el fichero ZIP desde GitHub.
2. Descomprime el archivo y que debería llamarse web-vitals-extension-master.
3. En Chrome, dirígete a la página de extensiones ( chrome://extensions).
4. Habilita el modo de desarrollador.
5. Arrastra la carpeta web-vitals-extension-master a cualquier lugar de la página para importarla.

Cómo usar Ambient Badge de Web Vitals

Ambient Badge ayuda a verificar si una página pasa los umbrales de Core Web Vitals.

Una vez instalada, la extensión mostrará un icono de insignia de estado deshabilitado hasta que navegue a una URL. En este punto, actualizará la insignia a verde o rojo, dependiendo de si la URL supera los umbrales de métricas de Core Web Vitals.

La insignia tiene varios estados:

• Deshabilitado – gris
• Pasando – verde
• Una o más métricas fallando – rojo

Si una o más métricas están fallando, la insignia animará los valores de estas métricas.

Desglose detallado de Web Vitals

Al hacer clic en el icono de la insignia Ambiental, podrá profundizar en los valores métricos individuales. En este modo, la extensión también dirá si un valor métrico might changeo requiere una acción del usuario.

Por ejemplo, el primer retraso de entrada requiere una interacción real (por ejemplo, hacer clic / tocar) con la página y estará en un waiting for inputestado hasta que este sea el caso. Recomendamos consultar la documentación de web.dev para LCP , CLS y FID para comprender cuándo se asientan los valores métricos.

En una versión futura, el desglose también incluirá datos agregados de rendimiento de campo de PageSpeed ??Insights y el Informe de experiencia del usuario de Chrome.

Cómo activar la superposición de datos de Web Vitals

La superposición muestra una pantalla de Heads up (HUD) que se superpone a su página. Es útil si necesita una vista persistente de sus métricas de Core Web Vitals durante el desarrollo. Para habilitar la superposición:

• Haga clic derecho en la insignia Ambient y vaya a Opciones.
• Marque Display HUD overlayy haga clic en ‘Guardar’
• Vuelva a cargar la pestaña de la URL que desea probar. La superposición ahora debe estar presente.

Medir Web Vitals con JS mediante API

Cada uno de los Core Web Vital se puede medir en JavaScript utilizando API web estándar.

La forma más fácil de medir todos los Vitales web centrales es usar la biblioteca JavaScript de vital importancia para la web , un pequeño contenedor listo para la producción alrededor de las API web subyacentes que mide cada métrica de una manera que coincide exactamente con la forma en que se informan por todos Herramientas de Google enumeradas anteriormente.

Con la biblioteca web-vitals , medir cada métrica es tan simple como llamar a una sola función (consulte la documentación para obtener información completa sobre el uso y la API ):

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}

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

Otras métricas vitales

Si bien los Core Web Vitals son las métricas críticas para comprender y brindar una excelente experiencia de usuario, también hay otras métricas vitales.

Estos otros Web Vitals a menudo sirven como indicadores proxy o complementarios para los Core Web Vitals, para ayudar a capturar una mayor parte de la experiencia o para ayudar a diagnosticar un problema específico.

Por ejemplo, las métricas Time to First Byte (TTFB) y First Contentful Paint (FCP) son aspectos vitales de la experiencia de carga y son útiles para diagnosticar problemas con LCP ( tiempos de respuesta lentos del servidor o recursos de bloqueo de procesamiento , respectivamente) .

Del mismo modo, las métricas como Tiempo total de bloqueo (TBT) y Tiempo para interactuar (TTI) son métricas de laboratorio que son vitales para detectar y diagnosticar posibles problemas de interactividad que afectarán a la FID. Sin embargo, no forman parte del conjunto de Core Web Vitals porque no se pueden medir en el campo ni reflejan un resultado centrado en el usuario .