Como sabes, la experiencia de usuario al navegar por una web es fundamental si quieres conseguir desde un mayor tráfico, hasta un mejor posicionamiento o más conversiones, entre otros factores. De hecho, la buena navegabilidad de una página se ha convertido en uno de los aspectos claves del SEO y, por tanto, de lograr los tan ansiados primeros puestos en los buscadores.

En este contexto, Google ha lanzado Web Vitals, que analiza los elementos comunes de una web con el objetivo de determinar la experiencia de los usuarios en cualquier página. 

¿Quieres saber más sobre esta herramienta? No pierdas detalle a este artículo, ¡te lo contamos todo!

 

¿Qué es Web Vitals?

Como te comentamos, Web Vitals es herramienta que permite analizar cualquier página web en base a tres métricas comunes con el objetivo de que desarrolladores, profesionales del marketing y propietarios de las empresas puedan estudiarlos y optimizar la experiencia de usuario. 

¿Lo mejor? Web Vitals es gratuita y muy fácil de utilizar. Además, está disponible como extensión de Google Chrome, pero también como biblioteca de Java Script instalable. 

A la hora de examinar la calidad y navegabilidad de una web, existen multitud de indicadores, muchos de ellos específicos y concretos de cada página y contexto, sin embargo, hay tres que sirven para cualquier site: la experiencia de carga, la interactividad y la estabilidad visual. Pues bien, Google Vitals mide estos tres datos y en base a los resultados, se podrán tomar mejores decisiones para que las páginas mejoren su experiencia UX. 

Finalmente, hay que recordar que Web Vitals se encuentra en fase alpha, por lo que es posible que se vayan añadiendo nuevas funcionalidades y se mejore su uso. 

 

¿Cómo funciona Web Vitals de Google?

El uso de Web Vitals es de lo más sencillo. Para las mediciones, Google utiliza el llamado 2020 Core Web Vitals, un documento en el que, a cada uno de los indicadores, se le otorga una calificación numérica. En la imagen posterior puedes verlo de manera gráfica. 

 

A cada métrica de Web Vitals se le asigna un número, que servirá para conocer el rendimiento de la página

¿Y cuáles son estas métricas?

 

Largest Contentful Paint o LCP

El LCP mide el rendimiento de la página e indica cuánto tiempo tarda en cargarse el contenido principal de la web. Para contar con unos buenos datos, no se deben superar los 2,5 segundos. 

 

First Input Delay o FID

El FID hace referencia a la interactividad, es decir, se analiza el tiempo que pasa desde que un usuario interactúa con una página (pinchando en un botón, haciendo clic en un enlace…) hasta que se responde a dicha comunicación. En este caso, para una buena experiencia UX, el FID no debe ser mayor a los 100 milisegundos.   

 

Cumulative Layout Shift o CLS

La tercera de las métricas se refiere a la estabilidad visual, es decir, cuantifica la cantidad de cambios de diseño y/o contenido que tienen lugar mientras un usuario se encuentra en la página web. 

Imagina que entras en una página y, mientras estás leyendo un artículo, la página se vuelve a cargar de nuevo y te lleva al principio del post o que, en el momento de pinchar sobre un enlace, el diseño “se mueve” y acabas clicando en otro lugar. Esto es lo que evalúa el CLS. 

Un buen dato se situaría en menos del 0,1, lo que indicaría que la estabilidad visual de la web es óptima. 

 

Instalando Web Vitals como extensión de Chrome

Web Vitals todavía está en fase alpha, por lo que aún no es posible descargarla y ejecutarla desde Google Chrome. Así, es necesario instalarla desde el repositorio de GitHub. 

Para ello, debes seguir los siguientes pasos:

1.- Descarga de esta página de GitHub la extensión Web Vitals. Si te fijas, verás un botón verde llamado “Clone or download” en el que tendrás que pinchar. Después, basta con que selecciones la opción ZIP y se te abrirá una página para guardarlo en tu ordenador. El archivo se llama “web-vitals-extension-master”.

2.- Descomprime el archivo, “web-vitals-extension-master” y abre el navegador Chrome

3.- En Chrome, a la derecha de la barra de búsqueda, hay un botón con tres puntos. Selecciónalo, pincha primero en “herramientas” y a continuación en “extensiones”. 

4.- En cuanto accedas a la nueva pestaña, habilita el modo de desarrollador y arrastra la carpeta que has descargado a la página. ¡Listo! Eso sí, no la borres de tu ordenador o la extensión dejará de funcionar. 

Ahora haz la comprobación. Entra en tu web y verás cómo en la derecha del navegador te aparece un pequeño cuadro con un color determinado. Si pinchas encima de él te dará todos los valores de los que hemos hablado anteriormente.

 

Al acceder a una página web, el color de Web Vitals puede ser verde, si todos los parámetros son óptimos o rojo, si alguno de ellos se puede mejorar

Como podrás comprobar, el icono puede tener tres colores: gris, cuando está deshabilitado; verde, cuando todos los parámetros son óptimos y rojo, cuando uno o varios indicadores ofrecen resultados que se pueden mejorar, por ejemplo, un tiempo de carga elevado o una mala interactividad. 

Además, verás que las métricas, dependiendo de la página de tu web en la que te encuentres, pueden variar, por lo que te recomendamos que hagas un análisis de tus url más importantes con el fin de conocer mejor su funcionamiento y optimizar la experiencia UX de los usuarios. Gracias a esto, la navegabilidad mejorará y con ella, tu posicionamiento SEO, el tráfico web y las ventas y conversiones. 

 

¿Qué te parece la herramienta gratuita Web Vitals? ¿Listo para empezar a utilizarla? Recuerda que en Clickage estamos a tu disposición para ayudarte a mejorar la experiencia UX de tu página web. Nuestro equipo de profesionales se encargará de diseñar una web completamente adaptada a tus clientes, para que la usabilidad y la navegabilidad sean óptimas. Por supuesto, todo el contenido estará adaptado al SEO, para que, además de ser visual y funcional, obtenga los mejores resultados en Google. 

Además, somos Google Partner, lo que significa que siempre estamos actualizados con las últimas novedades del buscador y, por lo tanto, siempre te ofreceremos las últimas y más pioneras soluciones. 

 

No lo dudes, ¡contáctanos y consigue una web optimizada que enamore a tu público objetivo!