Google ha publicado Google Web Vitals, una herramienta que permite a desarrolladores y propietarios de páginas web, verificar el correcto funcionamiento de algunos elementos comunes que determinan la calidad de la experiencia de usuario durante su navegación.
Google ha lanzado Web Vitals, una herramienta para que los propietarios y desarrolladores de páginas web puedan verificar el correcto funcionamiento de los elementos comunes de las páginas y la calidad de la experiencia del usuario durante la navegación.
¿Qué es Web Vitals?
Se trata de una extensión de Chrome, que puedes instalar y te indica, de un vistazo, si el sitio web que estás visitando cumple con los parámetros básicos a nivel de UX.
Mide tres aspectos:
- Largest Contentful Paint (LCP): Es una métrica importante que mide el rendimiento de la página. Indica el momento en el que la web ha gargado el contenido principal. 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.
- First Input Delay (FID): Mide la interactividad . El FID mide el tiempo desde el momento en que un usuario interactúa por primera vez con una página (es decir, cuando hace clic en un enlace, toca un botón o usa un control personalizado con JavaScript) hasta el momento en que el navegador realmente puede responder a esa interacción .Para proporcionar una buena experiencia de usuario, las páginas deben tener un FID de menos de 100 milisegundos .
- Cumulative Layout Shifto (CLS): Mide la estabilidad visual. CLS mide la suma total de todos los puntos de los cambios de diseño individuales para cada cambio de diseño inesperado que ocurre durante toda la vida útil de la página.Se produce un cambio de diseño cada vez que un elemento visible cambia su posición de un cuadro a otro. Para proporcionar una buena experiencia de usuario, las páginas deben mantener un CLS de menos de 0.1.
Hay que recordar que hay otros Web Vitals además de estos. Y que además se espera que estos, y otros, vayan evolucionando y mejorando. Pero alcanzar los niveles indicados en estos tres niveles, tendrá un gran impacto en tu proyecto web.
¿Cómo funciona Web Vitals?
Muy fácil, Te instalas la extensión de Chrome y un cuadro, en modo semáforo, te indica si la web que está visitando cumple con los tres parámetros definidos anteriormente. Te indica mediante colores si estás bien o no. Te da tu puntuación.
Una vez que haya medido los valores esenciales de la Web y las áreas identificadas para mejorar, el siguiente paso es optimizar. Las siguientes guías ofrecen recomendaciones específicas sobre cómo optimizar sus páginas para cada uno de los principales Web Vitals.
¿Cómo corrijo los errores que me presente Google Web Vitals?
Sigue los pasos que te ofrecen las guías de Web.dev para cada uno de los principales Web Vitals:
¿Cómo Instalo Google Web Vitals?
Esta extensión de Chrome no está disponible para descargar y ejecutar. Se encuentra en fase alfa. Y por ello, la extensión se puede descargar e instalar como una extensión desempaquetada de este repositorio de GitHub.
- Descargue este repositorio como un archivo ZIP de GitHub .
- Descomprima el archivo y debería tener una carpeta llamada
web-vitals-extension-master. - En Chrome, vaya a la página de extensiones (
chrome://extensions). - Habilite el modo de desarrollador.
- Arrastre la
web-vitals-extension-mastercarpeta a cualquier lugar de la página para importarla (no elimine la carpeta después).
¿Cómo analizo los vitales de Google con Google Web Vitals?
Ambient Badge ayuda a verificar si una página pasa los umbrales de Core Web Vitals.
Una vez instalada, la extensión muestra un icono de insignia de estado deshabilitado hasta que navegue a la URL de una web. Una vez ahí, la exrtensión actualizará la insignia a verde o rojo dependiendo de si la web que estás visitando (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.
Si haces clic en el icono de la insignia, podrás profundizar en los valores métricos individuales. En este modo, la extensión también te va a decir 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.
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.
Hay que tener en cuenta que esta extensión es una ayuda para desarrolladores, y que los valores son orientativos. La extensión ofrece métricas desde un ordenador de escritorio o portátil. Normalmetne, desde estos equipos, los resultados de carga son significativamente más rápidos que el del teléfono móvil promedio que los usuarios puedan tener. Por esta razón, recomendamos probar utilizando herramientas como Lighthouse;y en hardware equipos reales (por ejemplo, a través de WebPageTest) para asegurarse de que todos sus usuarios tengan una experiencia positiva.
Foto de PhotoMIX Company en Pexels