Google lanzó una iniciativa llamada Web Vitals para proporcionarnos una guía unificada que identifica las señales de calidad que son esenciales para brindar una excelente experiencia de usuario en una página web.
Son conceptos complicados desde el punto de vista técnico pero su motivación es simple y acertada: que el usuario que acceda a una página web tenga una gran experiencia. Cuanto mejor sea la experiencia de usuario más tenderán los usuarios a quedarse en una página web y volver a ella.
Sabemos lo importante que es dar una buena primera impresión. Cuando el usuario accede a una página web la primera impresión puede marcar la diferencia entre que se convierta en un usuario leal, o que se vaya y nunca regrese. La pregunta es, ¿qué produce una buena impresión y cómo se mide el tipo de impresión que probablemente esté causando en sus usuarios? ¿es una métrica importante la experiencia del usuario?
Por esta razón, indagar en las métricas que propone Google nos parece interesante para así poder jerarquizar nuestras prioridades a la hora de evaluar entre otras cosas la experiencia del usuario.
Métricas vitales para medir la experiencia de usuario en una página web
Las métricas que componen Core Web Vitals nacen para medir precisamente esto y evolucionarán con el tiempo. El conjunto actual se centra en tres aspectos de la experiencia del usuario (carga, interactividad y estabilidad visual) e incluye las siguientes métricas (y sus respectivos umbrales):
1 Carga de la página
Para ello se usa la métrica Largest Contentful Paint (LCP): mide el rendimiento de carga. Para proporcionar una buena experiencia de usuario, la carga de la página debe ocurrir dentro de los 2.5 segundos desde que la página comienza a cargarse.
A nadie nos gusta cargar una página web y esperar mirando a una pantalla vacía mientras carga. Debemos tener en cuenta el uso tan generalizado de dispositivos móviles y de las redes de telefonía móvil. No todos los usuarios tienen planes de datos de alta velocidad en susu dispositivos. Cuanto más ligera sea la página web menos datos necesitan transmitirse y mejor es la experiencia de usuario.
No es fácil mantener una página web bajo este umbral de carga rápida pero puede conseguirse siendo muy cuidadosos con los recursos que se utilizan y optimizando la carga de los recursos para que sea escalonada y bajo demanda. Es decir, no cargar elementos grandes como videos hasta que el usuario quiera interactuar con ellos, cargar imágenes de tamaño más reducido para pantallas móviles, no abusar de librerias de programación ni de tipos de fuentes.
2 Interacción a la siguiente pintura
Se usa la métrica de Iteraction to Next Paint (INP): mide la interactividad. Para proporcionar una buena experiencia de usuario, las páginas deben tener un INP de 200 milisegundos o menos. Es decir, que INP se utiliza para evaluar la rapidez con la que una página responde a las interacciones del usuario, como clics, toques y pulsaciones de teclas.
Esta métrica Interaction to Next Paint (INP) sustituye desde el 12 de marzo de 2024, a la métrica First Input Delay (FID), como métrica oficial de Core Web Vitals para medir la reactividad de una página web.
Tanto FID como INP miden la latencia de las interacciones del usuario, pero lo hacen de manera ligeramente diferente. FID se centra en el tiempo que tarda el navegador en responder a la primera interacción del usuario , mientras que INP observa la latencia de todas las interacciones a lo largo de la visita del usuario a la página y reporta un único valor que representa el rendimiento general de la interactividad.
En general, INP se considera una métrica más completa y representativa de la experiencia del usuario que FID.
3 La estabilidad visual
Para esto se usa la métrica Cumulative Layout Shift (CLS): mide la estabilidad visual. Para proporcionar una buena experiencia de usuario, las páginas deben mantener un CLS de menor a 0.1 puntos.
A todos nos habrá pasado que cuando estás leyendo o haciendo clic sobre una página web que esta de repente mueve todo su contenido y esto causa que tu clic caiga en otro enlace que no querías o tu ojos pierden el hilo de la linea que estabas leyendo. Esta métrica pretende medir la experiencia de usuario en el ámbito de la estabilidad o quietud del contenido. No es agradable que la página web parezca un tio vivo de elementos en movimiento.
Estos movimientos inesperados en la página suelen suceder cuando se escalona la carga de elementos y se añaden dinámicamente a una página web que ya está cargada y esta siendo usada.
Esta métrica mide la estabilidad visual, es decir, si existe movimiento de los elementos de la página en cada fotograma de carga de la página web.
Por ejemplo, si en un fotograma un elemento ocupa el 50% de la pantalla pero en el siguiente fotograma se mueve hacia abajo un 25% del tamaño de la pantalla se tiene en cuenta la suma del área que ocupa el elemento durante estos dos fotogramas, es decir 50% + 25% = 75% la "infracción" sería en este caso de 0.75 puntos.
Esto demuestra que el umbral que se ha marcado para esta métrica también es muy baja, pero esto redunda en que el usuario de una página web se merece la mejor experiencia y todos nuestros esfuerzos deben ir en esta dirección.
Estas tres métricas no se presentan en términos absolutos sino relativos. Son indicadores hacia las áreas que debemos esforzarnos en mejorar.
Ahora prodrás reconocerlas en las webs que visitas o incluso en tu página web si eres propietario de una. Si notas que tu página no cumple con alguna de estas premisas o piensas que no es usable en todos los dispositivos contáctanos sin compromiso, podemos asesorarte sobre como mejorar tu página web o mejor aún crear una web nueva teniendo como principal objetivo la experiencia de usuario.
¡Prepárate para el futuro! Optimiza tu sitio web con Web Vitals
Google nos ofrece herramientas como la API * de PageSpeed Insights para evaluar a fondo las páginas web que creamos y así optimizar la experiencia del usuario. Tras obtener los resultados, analizamos las mejoras posibles y seleccionamos aquellas que tendrán un mayor impacto en la experiencia del usuario.
* Una API es una Interfaz de programación de aplicaciones, del ingés Application Programming Interface, es un conjunto de subrutinas, funciones y procedimientos que ofrece cierta biblioteca para ser utilizado por otro software como una capa de abstracción.
En la siguiente imagen puedes ver el resultado tras evaluar una de nuestras páginas webs con la API de PageSpeed Insights.
Existen otras herramientas que se utilizan para medir tus Core Web Vitals, como en la Search Console de Google, tenemos otra herramienta para webmasters. Esta herramienta incluye un informe de Core Web Vitals que muestra cómo un sitio web se desempeña en estas métricas. Y también, Web Vitals Extension, que es una extensión para navegadores web que nos permiten ver las puntuaciones de Core Web Vitals de cualquier página web en tiempo real.
Cuanto mejor sea la experiencia del usuario mas éxito tendrá tu página web en el largo plazo.
Conclusión
En el vertiginoso mundo digital actual, ofrecer una experiencia de usuario fluida y atractiva es fundamental para el éxito de un sitio web.
Reconociendo esto, Google introdujo Web Vitals, un conjunto unificado de pautas para identificar las señales de calidad clave que son esenciales para brindar una excelente experiencia de usuario en una página web. Al adherirte a las pautas de Web Vitals y optimizar tu sitio web en consecuencia, los propietarios de sitios web pueden mejorar la satisfacción del usuario, aumentar la participación y potencialmente mejorar su clasificación en los motores de búsqueda.
Web Vitals o las métricas vitales de Google engloba tres métricas principales:
- Carga de la página o Largest Contentful Paint (LCP)
- Interacción a la siguiente pintura o Interaction to Next Paint (INP)
- Estabilidad visual o Cumulative Layout Shift (CLS)
Estas métricas evalúan aspectos como la velocidad de carga, la interactividad y la estabilidad visual , todos los cuales contribuyen a una experiencia de usuario positiva.
Y como todo en el mundo digital dichas métricas evolucionan con el tiempo. Lo importante es no perder de vista el objetivo final: la impresión que tenga un usuario al usar una página web. Cuanto mejor sea la experiencia del usuario mas éxito tendrá tu página web en el largo plazo.
Podemos pensar en ello como una especie de ITV para páginas web, donde nos indicará las áreas de mejora en la experiencia de usuario. Por ejemplo, optimizar LCP asegura que el contenido principal de una página se cargue rápidamente, minimizando los tiempos de espera del usuario. INP, por otro lado, evalua la rapidez con la que una página responde a las interacciones del usuario, como clics, etc.. Finalmente, CLS evalúa la estabilidad visual de una página, asegurando que los elementos no se desplacen inesperadamente, interrumpiendo la experiencia del usuario.
Es sorprendente como unos pequeños cambios, a veces de origen técnico y a veces de diseño y maquetación, pueden hacer un gran impacto en las métricas y por ello también en la felicidad de los usuarios de tu web.
Fuentes
- Google Developers. Web vitals: https://web.dev/learn-web-vitals/
- Interacción a la siguiente pintura (INP): https://web.dev/articles/inp?hl=es-419
Categorías: Diseño páginas web
Etiquetas: Diseño UI Diseño UX Tendencias digitales