Sapevate che quando ci sono intoppi e ritardi nei tempi di caricamento dei siti web, gli utenti possono sentirsi stressati quasi come se stessero guardando un film dell'orrore? Lo dice il Rapporto sulla mobilità 2016 di Ericsson.
Abbiamo esaminato l'interfaccia utente della Vectra AI Platform e, pur non assomigliando a un film dell'orrore, volevamo fornire un prodotto che fosse soddisfacente per gli utenti, soprattutto se lo guardano quotidianamente. In un mondo perfetto, il caricamento dell'interfaccia utente sarebbe istantaneo. In effetti, nell'articolo di Jacob Nielsen del 2010 sui tempi di risposta dei siti web, Nielsen descrive come il caricamento di una pagina web entro 0,1 secondi dia agli utenti la sensazione di una risposta istantanea, tanto che il risultato sembra causato dall'utente e non dal computer.
Ovviamente la perfezione è impossibile, ma non volevamo che la gente controllasse se la batteria del mouse fosse scarica o sentisse il bisogno di guardare l'ultima stagione di Bridgerton su un secondo monitor mentre aspettava il caricamento dell'interfaccia utente.
Il piano per tempi di caricamento ottimali
L'interfaccia utente della Vectra AI Platform viene utilizzata dai clienti per visualizzare i rilevamenti, indagare sulle minacce, rispondere agli attacchi, impostare le fonti di dati e gestire le impostazioni di configurazione per personalizzare la piattaforma in base alla propria attività. Man mano che la piattaforma si è evoluta per fornire maggiori funzionalità con grandi quantità di dati e che abbiamo supportato un maggior numero di casi d'uso cloud , gli utenti hanno iniziato a segnalare tempi di caricamento delle pagine più lunghi e ritardi nell'esecuzione dei flussi di lavoro principali. In precedenza, quando gli utenti avevano un cavo Ethernet da 10 GBps che li collegava direttamente alla nostra appliance, Vectra AI era velocissimo, ma anche piccole inefficienze possono accumularsi online.
Riconoscendo la necessità critica di un'esperienza utente più fluida e veloce, abbiamo intrapreso un'iniziativa su larga scala per rivedere le prestazioni dell'applicazione. I nostri obiettivi principali erano:
- Concordare in gruppo un obiettivo di livello di servizio (SLO) accettabile.
- Iniziare a rilevare e tracciare le metriche per il caricamento delle pagine e le azioni degli utenti per i flussi di lavoro principali.
- Lavorare per ridurre le metriche di carico della pagina e di azione dell'utente al valore SLO concordato per tutte le pagine del flusso di lavoro principale.
- Creare un processo di monitoraggio continuo di queste metriche in modo da essere avvisati se una qualsiasi metrica non soddisfa gli SLO concordati, in modo da poter affrontare rapidamente qualsiasi problema.
Fissando questi obiettivi ambiziosi, abbiamo cercato non solo di risolvere i problemi attuali, ma anche di proteggere la nostra applicazione dai potenziali colli di bottiglia delle prestazioni quando continueremo a scalare la piattaforma e ad aggiungere nuove funzionalità.
Un approccio sperimentale alla realizzazione del progetto
Uno dei primi passi da compiere è stato quello di definire gli obiettivi del livello di servizio (SLO) in collaborazione con il team di gestione del progetto. Questi SLO sono stati essenziali per stabilire obiettivi chiari e misurabili per il miglioramento delle prestazioni. Ci siamo concentrati su metriche chiave come il Largest Contentful Paint (LCP) che misura le prestazioni di caricamento della pagina e l'Interaction to Next Paint (INP) che misura l'interattività dell'utente.
Ulteriori informazioni su queste metriche sono disponibili su web.dev.
Tuttavia, prima di concordare questi SLO, abbiamo voluto capire come Vectra AI si comporta rispetto ai nostri colleghi e abbiamo eseguito un test ad hoc. Per CLS e INP, ci aspettavamo un feedback immediato, senza variazioni di layout dopo il caricamento, e lo abbiamo verificato con valutazioni soggettive. Per LCP, abbiamo utilizzato il collaudato metodo del cronometro. Fortunatamente avevo già un cronometro e non ho avuto bisogno di spiegare a Finance il motivo per cui dovevamo spendere un cronometro, non c'era tempo!
Il metodo era semplice.
Per prima cosa, ho misurato i miei tempi di reazione, avviando l'orologio e quando ho visto che scattava a 3 secondi ho premuto stop. Questo era il mio ritardo di reazione umano, ed era di 300 ms. (È facile imbrogliare, quindi può essere utile nascondere il contatore dei millisecondi, altrimenti si anticipa il tempo). Per ogni pagina, contate da 3 e avviate l'orologio mentre cliccate sul link; una volta caricato il contenuto critico, fermate l'orologio. Sottraete il vostro tempo di reazione e questo è il tempo di caricamento della pagina.
Il nostro test ad hoc ha confermato che i clienti avevano ragione su alcune interazioni dell'interfaccia utente e sui tempi di caricamento un po' "lenti". Tuttavia, rispetto ad altri fornitori di cybersicurezza e ad altri prodotti SaaS migliori della categoria, abbiamo offerto un'esperienza simile. La domanda che dovevamo porci, però, era se ci andava bene essere uguali o se volevamo puntare a tempi di caricamento eccellenti.
Come abbiamo migliorato la piattaforma Vectra AI
Grazie alla collaborazione dei nostri team di ingegneria, gestione del prodotto e UX/UI, l'applicazione è diventata più reattiva e affidabile , con miglioramenti apportati a:
- Percezione delle prestazioni di caricamento della pagina attraverso uno "skeleton screen".
- Le prestazioni delle nostre richieste API e delle operazioni di backend
- Tempi di caricamento delle pagine della piattaforma Vectra AI
- Maggiore efficienza nell'esperienza di login degli utenti
Le metriche chiave, come i tempi di caricamento delle pagine e i tempi di risposta delle API, hanno mostrato miglioramenti sostanziali, che si traducono direttamente in una maggiore soddisfazione e coinvolgimento degli utenti. La nostra attenzione all'ottimizzazione dei componenti front-end e back-end garantisce che la nostra piattaforma sia ora meglio equipaggiata per gestire grandi volumi di dati e interazioni complesse con gli utenti.
Approfondite il nostro progetto UI Performance nel nostro whitepaper qui.