Sabías que cuando hay fallos y retrasos en los tiempos de carga de los sitios web, los usuarios pueden sentirse casi tan estresados como viendo una película de terror? El Informe de Movilidad 2016 de Ericsson sin duda lo dice.
Nos fijamos en la interfaz de usuario de la plataforma Vectra AI y, aunque no se parece a una película de terror, queríamos ofrecer un producto cuyo manejo resultara satisfactorio para los usuarios, sobre todo si lo ven a diario. En un mundo perfecto, nuestro objetivo sería que la interfaz de usuario se cargara instantáneamente. De hecho, en el artículo Website Response Times de Jacob Nielsen de 2010, Nielsen describe cómo ver una página web cargarse en 0,1 segundos da a los usuarios la sensación de respuesta instantánea, de forma que el resultado parece causado por el usuario, no por el ordenador.
Obviamente, la perfección es imposible, pero no queríamos que la gente comprobara si se había agotado la batería del ratón o sintiera la necesidad de ver la última temporada de Bridgerton en un segundo monitor mientras esperaba a que se cargara la interfaz de usuario.
El plan para tiempos de carga óptimos
La interfaz de usuario de la plataformaVectra AI es utilizada por los clientes para ver las detecciones, investigar las amenazas, responder a los ataques, establecer fuentes de datos y gestionar los ajustes de configuración para personalizar la plataforma y adaptarla a su negocio. A medida que la plataforma ha ido evolucionando para ofrecer más funcionalidades con mayores cantidades de datos, y a medida que dábamos soporte a más casos de uso cloud , los usuarios empezaron a notificar tiempos de carga de página más largos y retrasos en la realización de flujos de trabajo básicos. Antes, cuando los usuarios tenían un cable ethernet de 10 GBps que les conectaba directamente a nuestro dispositivo, Vectra AI era rapidísimo, pero incluso las pequeñas ineficiencias pueden acumularse en línea.
Reconociendo la necesidad crítica de una experiencia de usuario más fluida y rápida, nos embarcamos en una iniciativa a gran escala para revisar el rendimiento de la aplicación. Nuestros objetivos principales eran:
- Acordar en equipo un objetivo de nivel de servicio (SLO) aceptable.
- Comience a capturar y realizar un seguimiento de las métricas de las cargas de páginas y las acciones de los usuarios para los flujos de trabajo principales.
- Trabajar para reducir la carga de la página y las métricas de acción del usuario al valor SLO acordado para todas las páginas de flujo de trabajo principales.
- Establecer un proceso para supervisar continuamente estas métricas de modo que seamos alertados si alguna de las métricas no cumple con el SLO acordado para que cualquier problema pueda ser abordado rápidamente.
Con estos ambiciosos objetivos no sólo pretendíamos resolver los problemas actuales, sino también proteger nuestra aplicación de posibles cuellos de botella en el rendimiento a medida que ampliamos la plataforma y añadimos nuevas funciones.
Un enfoque experimental para realizar el proyecto
Una de las primeras medidas prácticas fue definir objetivos de nivel de servicio en colaboración con nuestro equipo de gestión de proyectos. Estos SLO fueron esenciales para establecer objetivos claros y medibles para nuestras mejoras de rendimiento. Nos centramos en parámetros clave, como la mayor carga de contenido (LCP), que mide el rendimiento de carga de la página, y la interacción con la siguiente carga (INP), que mide la interactividad del usuario.
Más información sobre estas métricas en web.dev.
Sin embargo, antes de acordar estos SLO, queríamos saber cómo se comportaba Vectra AI frente a nuestros competidores y realizamos una prueba ad hoc. Para CLS e INP, esperábamos una respuesta inmediata sin cambios de diseño tras la carga, y lo comprobamos con evaluaciones subjetivas. Para LCP, utilizamos el método del cronómetro. Afortunadamente, yo ya tenía un cronómetro y no tuve que explicar a Finanzas los motivos económicos para adquirir uno.
El método era sencillo.
En primer lugar, medí mis tiempos de reacción, poniendo en marcha el reloj y una vez que vi que llegaba a los 3 segundos pulsé stop. Este era mi retardo de reacción humano, y era de 300 ms. (Es fácil hacer trampas aquí, así que puede ayudar ocultar el contador de milisegundos o de lo contrario estarás anticipando el tiempo). Para cada página, cuenta desde 3 y pon en marcha el reloj mientras haces clic en el enlace; una vez cargado el contenido crítico, detén el reloj. Resta tu tiempo de reacción y esto es lo que tarda en cargarse la página.
Nuestra prueba ad hoc confirmó que los clientes tenían razón sobre algunas de nuestras interacciones de IU y los tiempos de carga algo "lentos". Sin embargo, en comparación con otros proveedores de ciberseguridad y otros productos SaaS de primera clase, en realidad ofrecíamos una experiencia similar. La pregunta que teníamos que hacernos, sin embargo, era si nos sentíamos cómodos siendo iguales o si queríamos esforzarnos por conseguir tiempos de carga excelentes.
Cómo hemos mejorado aún más la plataforma Vectra AI
Los esfuerzos conjuntos de nuestros equipos de ingeniería, gestión de productos y UX/UI han dado como resultado una aplicación más fiable y con mayor capacidad de respuesta , con mejoras en:
- Percepción del rendimiento de carga de la página a través de una "pantalla esqueleto"
- El rendimiento de nuestras solicitudes API y operaciones backend
- Tiempos de carga de las páginas de la plataforma Vectra AI
- Mayor eficacia en la experiencia de inicio de sesión de los usuarios
Las métricas clave, como los tiempos de carga de la página y los tiempos de respuesta de la API, han mostrado mejoras sustanciales, lo que se traduce directamente en una mayor satisfacción y compromiso de los usuarios. Nuestro enfoque en la optimización de los componentes front-end y back-end garantiza que nuestra plataforma esté ahora mejor equipada para gestionar grandes volúmenes de datos e interacciones complejas de los usuarios.
Profundice en nuestro proyecto de rendimiento de la interfaz de usuario en nuestro libro blanco aquí.