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 Vectra AI , et même si elle ne ressemble pas à un film d'horreur, nous voulions proposer un produit dont l'utilisation soit agréable pour les utilisateurs, surtout s'ils y ont recours quotidiennement. Dans un monde idéal, nous viserions un chargement instantané de notre interface utilisateur. En effet, dans son article de 2010 intitulé « Website Response Times », Jacob Nielsen explique que le chargement d’une page web en moins de 0,1 seconde donne aux utilisateurs l’impression d’une réponse instantanée, de sorte que le résultat semble être le fruit de l’action de l’utilisateur, et non de 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 Vectra AI permet aux clients de consulter les détections, d'analyser les menaces, de réagir aux attaques, de configurer les sources de données et de gérer les paramètres de configuration afin de personnaliser la plateforme en fonction de leurs besoins métier. À mesure que la plateforme a évolué pour offrir davantage de fonctionnalités et traiter des volumes de données plus importants, et que nous avons pris en charge un plus grand nombre de cas cloud , les utilisateurs ont commencé à signaler des temps de chargement des pages plus longs et des ralentissements dans l'exécution des flux de travail essentiels. Auparavant, lorsque les utilisateurs disposaient d'un câble Ethernet de 10 Gbps les reliant directement à notre appliance, Vectra AI ultra-rapide, mais même les plus petites inefficacités 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 nous fixant ces objectifs ambitieux, nous avons cherché non seulement à résoudre les problèmes actuels, mais aussi à pérenniser notre application face aux éventuels goulots d'étranglement en matière de performances, à mesure que nous continuons à faire évoluer la plateforme et à y 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 encore amélioré la 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
- Temps de chargement des pages Vectra AI
- Amélioration de l'efficacité de l'expérience de connexion de l'utilisateur
Les indicateurs clés, tels que les temps de chargement des pages et les temps de réponse des API, ont enregistré des améliorations significatives, ce qui se traduit directement par une satisfaction et un engagement accrus des utilisateurs. L'attention particulière que nous portons à l'optimisation des composants front-end et back-end garantit que notre plateforme est désormais mieux équipée pour gérer de grands volumes de données et des interactions utilisateur complexes.
Pour en savoir plus sur notre projet de performance de l'interface utilisateur, consultez notre livre blanc ici.