Saviez-vous que lorsqu'il y a des problèmes et des retards dans les temps de chargement des sites web, les utilisateurs peuvent se sentir presque aussi stressés que lorsqu'ils regardent un film d'horreur ? C'est en tout cas ce que révèle le rapport 2016 d'Ericsson sur la mobilité.
Nous avons examiné l'interface utilisateur de la plateforme Vectra AI et, bien qu'elle ne ressemble pas à un film d'horreur, nous voulions fournir un produit dont l'utilisation soit satisfaisante pour les utilisateurs, surtout s'ils la regardent tous les jours. Dans un monde parfait, nous aurions voulu que notre interface utilisateur se charge instantanément. En fait, dans son article de 2010 sur les temps de réponse des sites web, Jacob Nielsen décrit comment le fait de voir une page web se charger en moins de 0,1 seconde donne aux utilisateurs le sentiment d'une réponse instantanée, de sorte que le résultat semble avoir été provoqué par l'utilisateur et non par l'ordinateur.
La perfection est évidemment impossible, mais nous ne voulions pas que les utilisateurs vérifient si la batterie de leur souris était déchargée ou qu'ils ressentent le besoin de regarder la dernière saison de Bridgerton sur un deuxième écran en attendant que l'interface utilisateur se charge.
Le plan pour des temps de chargement optimaux
L'interface utilisateur de la plateformeVectra AI est utilisée par les clients pour visualiser les détections, enquêter sur les menaces, répondre aux attaques, mettre en place des sources de données et gérer les paramètres de configuration afin de personnaliser la plateforme en fonction de leur activité. Au fur et à mesure que la plateforme évoluait pour offrir plus de fonctionnalités avec de plus grandes quantités de données, et que nous soutenions plus de cas d'utilisation cloud , les utilisateurs ont commencé à signaler des temps de chargement de page plus longs et des retards dans l'exécution des flux de travail de base. Auparavant, lorsque les utilisateurs disposaient d'un câble Ethernet de 10GBps les reliant directement à notre appliance, Vectra AI était rapide comme l'éclair, mais même des inefficacités mineures peuvent s'accumuler en ligne.
Reconnaissant le besoin critique d'une expérience utilisateur plus fluide et plus rapide, nous nous sommes lancés dans une initiative à grande échelle pour revoir les performances de l'application. Nos principaux objectifs étaient les suivants
- Convenir en équipe d'un objectif de niveau de service (SLO) acceptable.
- Commencez à capturer et à suivre les métriques pour les chargements de pages et les actions des utilisateurs pour les flux de travail principaux.
- S'efforcer de réduire la charge de la page et les mesures de l'action de l'utilisateur à la valeur SLO convenue pour toutes les pages principales du flux de travail.
- Mettre en place un processus de suivi continu de ces paramètres afin d'être alerté si l'un d'entre eux n'est pas conforme aux SLO convenus, de manière à ce que tout problème puisse être rapidement résolu.
En fixant ces objectifs ambitieux, nous voulions non seulement résoudre les problèmes actuels, mais aussi protéger notre application contre d'éventuels goulets d'étranglement en matière de performances, à mesure que nous continuons à faire évoluer la plateforme et à ajouter de nouvelles fonctionnalités.
Une approche expérimentale pour réaliser le projet
L'une des premières étapes réalisables a consisté à définir des objectifs de niveau de service (SLO) en collaboration avec notre équipe de gestion de projet. Ces SLO étaient essentiels pour fixer des objectifs clairs et mesurables pour l'amélioration de nos performances. Nous nous sommes concentrés sur des mesures clés telles que le Largest Contentful Paint (LCP), qui mesure les performances de chargement des pages, et le Interaction to Next Paint (INP), qui mesure l'interactivité des utilisateurs.
De plus amples informations sur ces mesures sont disponibles à l'adresse web.dev.
Cependant, avant de nous mettre d'accord sur ces SLO, nous voulions comprendre comment Vectra AI se comportait par rapport à nos pairs et nous avons effectué un test ad hoc. Pour CLS et INP, nous nous attendions à un retour d'information immédiat, sans changement de présentation après le chargement, et nous l'avons vérifié à l'aide d'évaluations subjectives. Pour LCP, nous avons utilisé la méthode éprouvée du chronomètre. Heureusement, j'avais déjà un chronomètre et je n'ai pas eu besoin d'expliquer au service financier l'intérêt d'en dépenser un, nous n'avions pas le temps !
La méthode est simple.
Tout d'abord, j'ai mesuré mon temps de réaction, en démarrant la montre et en appuyant sur stop dès que j'ai vu le temps passer à 3 secondes, ce qui correspondait à mon délai de réaction humain, et il était de 300 ms. Il s'agit de mon délai de réaction humain, qui était de 300 ms (il est facile de tricher ici, il peut donc être utile de masquer le compteur de millisecondes, sinon vous anticipez le temps). Pour chaque page, comptez à partir de 3 et démarrez la montre lorsque vous cliquez sur le lien ; une fois que le contenu critique est chargé, arrêtez la montre. Soustrayez votre temps de réaction et vous obtiendrez le temps de chargement de la page.
Notre test ad hoc a confirmé que les clients avaient raison en ce qui concerne certaines de nos interactions avec l'interface utilisateur et les temps de chargement quelque peu "lents". Cependant, en comparaison avec d'autres fournisseurs de cybersécurité et d'autres produits SaaS de premier ordre, nous offrons en fait une expérience similaire. La question que nous devions nous poser était de savoir si nous étions satisfaits de cette similitude ou si nous voulions nous efforcer d'obtenir d'excellents temps de chargement.
Comment nous avons amélioré la plateforme Vectra AI
Grâce aux efforts de collaboration de nos équipes d'ingénierie, de gestion des produits et d'UX/UI, l'application est plus réactive et plus fiable , et des améliorations ont été apportées :
- Perception des performances de chargement des pages à travers un "écran squelette"
- La performance de nos demandes d'API et de nos opérations de backend
- Vectra AI Temps de chargement des pages de la plate-forme
- Amélioration de l'efficacité de l'expérience de connexion de l'utilisateur
Des indicateurs clés, tels que les temps de chargement des pages et les temps de réponse des API, ont montré des améliorations substantielles, ce qui se traduit directement par une satisfaction et un engagement accrus de la part des utilisateurs. L'accent mis sur l'optimisation des composants frontaux et dorsaux garantit que notre plateforme est désormais mieux équipée pour gérer de grands volumes de données et des interactions complexes avec les utilisateurs.
Pour en savoir plus sur notre projet de performance de l'interface utilisateur, consultez notre livre blanc ici.