Wussten Sie, dass sich Nutzer bei Störungen und Verzögerungen bei den Ladezeiten von Websites fast so gestresst fühlen können wie beim Ansehen eines Horrorfilms? Der Ericsson Mobility Report 2016 sagt das jedenfalls.
Wir haben uns die Benutzeroberfläche der Vectra AI Plattform angeschaut, und obwohl sie nicht an einen Horrorfilm erinnert, wollten wir ein Produkt liefern, das für die Benutzer zufriedenstellend zu bedienen ist, vor allem, wenn sie es täglich ansehen. In einer perfekten Welt würden wir anstreben, dass unsere Benutzeroberfläche sofort geladen wird. In Jacob Nielsens Artikel über die Reaktionszeiten von Websites aus dem Jahr 2010 beschreibt Nielsen, dass das Laden einer Website innerhalb von 0,1 Sekunden den Nutzern das Gefühl gibt, dass das Ergebnis vom Nutzer und nicht vom Computer verursacht wurde.
Natürlich ist Perfektion unmöglich, aber wir wollten nicht, dass die Leute prüfen, ob die Batterie ihrer Maus leer ist, oder dass sie die letzte Staffel von Bridgerton auf einem zweiten Monitor laufen lassen müssen, während sie darauf warten, dass die Benutzeroberfläche geladen wird.
Der Plan für optimale Ladezeiten
Die Benutzeroberfläche der Vectra AI Plattform wird von Kunden verwendet, um Erkennungen anzuzeigen, Bedrohungen zu untersuchen, auf Angriffe zu reagieren, Datenquellen einzurichten und Konfigurationseinstellungen zu verwalten, um die Plattform an ihr Unternehmen anzupassen. Als die Plattform weiterentwickelt wurde, um mehr Funktionen mit größeren Datenmengen bereitzustellen, und als wir mehr cloud Anwendungsfälle unterstützten, begannen die Benutzer über längere Seitenladezeiten und Verzögerungen bei der Durchführung von Kernarbeitsabläufen zu berichten. Früher war Vectra AI blitzschnell, wenn die Benutzer über ein 10-GBit/s-Ethernetkabel direkt mit unserer Appliance verbunden waren, aber selbst kleine Ineffizienzen können sich online summieren.
Wir erkannten den dringenden Bedarf an einer reibungsloseren, schnelleren Benutzererfahrung und begannen mit einer groß angelegten Initiative zur Überarbeitung der Leistung der Anwendung. Unsere Hauptziele waren:
- Einigen Sie sich im Team auf ein akzeptables Service Level Objective (SLO).
- Beginnen Sie mit der Erfassung und Verfolgung von Metriken für Seitenaufrufe und Benutzeraktionen für die wichtigsten Arbeitsabläufe.
- Arbeiten Sie daran, die Metriken für die Seitenbelastung und die Benutzeraktionen auf den vereinbarten SLO-Wert für alle Kern-Workflow-Seiten zu senken.
- Einrichtung eines Prozesses zur kontinuierlichen Überwachung dieser Kennzahlen, so dass wir gewarnt werden, wenn eine der Kennzahlen nicht den vereinbarten SLO entspricht, so dass alle Probleme schnell angegangen werden können.
Mit diesen ehrgeizigen Zielen wollten wir nicht nur die aktuellen Probleme angehen, sondern unsere Anwendung auch für die Zukunft gegen mögliche Leistungsengpässe absichern, wenn wir die Plattform weiter skalieren und neue Funktionen hinzufügen.
Ein experimenteller Ansatz zur Verwirklichung des Projekts
Einer der ersten umsetzbaren Schritte war die Definition von Service Level Objectives (SLOs) in Zusammenarbeit mit unserem Projektleitungsteam. Diese SLOs waren entscheidend für die Festlegung klarer, messbarer Ziele für unsere Leistungsverbesserungen. Wir konzentrierten uns auf wichtige Messgrößen wie Largest Contentful Paint (LCP) zur Messung der Seitenladeleistung und Interaction to Next Paint (INP) zur Messung der Benutzerinteraktivität.
Weitere Informationen zu diesen Metriken finden Sie unter web.dev.
Bevor wir uns jedoch auf diese SLOs einigten, wollten wir verstehen, wie Vectra AI im Vergleich zu unseren Mitbewerbern abschneidet und führten einen Ad-hoc-Test durch. Bei CLS und INP erwarteten wir eine unmittelbare Rückmeldung ohne Layout-Verschiebungen nach der Belastung und überprüften dies mit subjektiven Bewertungen. Für LCP haben wir die bewährte Stoppuhr-Methode verwendet. Glücklicherweise besaß ich bereits eine Stoppuhr und musste der Finanzabteilung nicht erklären, warum es sich lohnt, eine solche Uhr anzuschaffen - wir hatten keine Zeit!
Die Methode war einfach.
Zunächst habe ich meine Reaktionszeit gemessen, indem ich die Uhr startete und auf Stopp drückte, sobald sie 3 Sekunden anzeigte. Dies war meine menschliche Reaktionszeit, und sie betrug genau 300 ms. (Es ist leicht, hier zu schummeln, daher kann es hilfreich sein, den Millisekundenzähler auszublenden, da man sonst die Zeit vorwegnimmt.) Zählen Sie für jede Seite von 3 an und starten Sie die Uhr, wenn Sie auf den Link klicken; sobald der kritische Inhalt geladen ist, stoppen Sie die Uhr. Ziehen Sie Ihre Reaktionszeit ab, und das ist die Zeit, die die Seite zum Laden braucht.
Unser Ad-hoc-Test bestätigte, dass die Kunden mit einigen unserer Benutzeroberflächen-Interaktionen und den etwas "langsamen" Ladezeiten Recht hatten. Im Vergleich zu anderen Anbietern von Cybersicherheitsprodukten und anderen erstklassigen SaaS-Produkten boten wir jedoch ein ähnliches Erlebnis. Die Frage, die wir uns stellen mussten, war jedoch, ob wir uns damit zufrieden geben, gleich zu sein, oder ob wir uns um hervorragende Ladezeiten bemühen wollten.
Wie wir die Plattform Vectra AI noch besser gemacht haben
Durch die Zusammenarbeit unserer Teams für Technik, Produktmanagement und UX/UI ist eine reaktionsschnellere und zuverlässigere Anwendung entstanden, bei der Verbesserungen vorgenommen wurden:
- Wahrnehmung der Seitenladeleistung durch einen "Skelett-Bildschirm"
- Die Leistung unserer API-Anfragen und Backend-Vorgänge
- Vectra AI Ladezeiten der Plattformseiten
- Verbesserte Effizienz bei der Benutzeranmeldung
Wichtige Kennzahlen wie Seitenladezeiten und API-Antwortzeiten haben sich deutlich verbessert, was sich direkt in einer höheren Nutzerzufriedenheit und -bindung niederschlägt. Unser Fokus auf die Optimierung sowohl der Front-End- als auch der Back-End-Komponenten stellt sicher, dass unsere Plattform nun besser für die Verarbeitung großer Datenmengen und komplexer Nutzerinteraktionen gerüstet ist.
Einen tieferen Einblick in unser UI-Performance-Projekt erhalten Sie in unserem Whitepaper hier.