Sapevate che quando si verificano problemi tecnici e ritardi nei tempi di caricamento dei siti web, gli utenti possono provare uno stress simile a quello che provano guardando un film horror? È quanto afferma il rapporto Ericsson Mobility Report 2016.
Abbiamo esaminato l'interfaccia utente Vectra AI e, sebbene non assomigli a un film dell'orrore, volevamo offrire un prodotto che fosse soddisfacente da utilizzare per gli utenti, soprattutto se lo utilizzano quotidianamente. In un mondo perfetto, vorremmo che la nostra interfaccia utente si caricasse istantaneamente. Infatti, nell'articolo del 2010 sui tempi di risposta dei siti web, Jacob Nielsen descrive come vedere una pagina web caricarsi in meno di 0,1 secondi dia agli utenti la sensazione di una risposta istantanea, tanto che il risultato sembra essere causato dall'utente stesso e non dal computer.
Ovviamente la perfezione è impossibile, ma non volevamo che le persone controllassero se la batteria del mouse fosse scarica o sentissero il bisogno di guardare l'ultima stagione di Bridgerton su un secondo monitor mentre aspettavano che l'interfaccia utente si caricasse.
Il piano per tempi di caricamento ottimali
L'interfaccia utente della Vectra AI 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 alle proprie esigenze aziendali. Con l'evoluzione della piattaforma, che offre ora maggiori funzionalità con quantità di dati più elevate, e con il supporto di un numero maggiore di casi 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 disponevano di un cavo Ethernet da 10 Gbps che li collegava direttamente al nostro dispositivo, Vectra AI velocissima, ma anche le più piccole inefficienze possono sommarsi online.
Riconoscendo la necessità fondamentale di un'esperienza utente più fluida e veloce, abbiamo intrapreso un'iniziativa su larga scala per migliorare le prestazioni dell'applicazione. I nostri obiettivi principali erano:
- Concordare come team un obiettivo di livello di servizio (SLO) accettabile.
- Inizia a raccogliere e monitorare le metriche relative al caricamento delle pagine e alle azioni degli utenti per i flussi di lavoro principali.
- Lavorare per ridurre il tempo di caricamento delle pagine e le metriche relative alle azioni degli utenti al valore SLO concordato per tutte le pagine principali del flusso di lavoro.
- Imposta un processo per monitorare continuamente questi parametri in modo da essere avvisati se uno di essi non soddisfa lo SLO concordato, così da poter risolvere rapidamente eventuali problemi.
Fissando questi obiettivi ambiziosi, abbiamo mirato non solo ad affrontare i punti critici attuali, ma anche a rendere la nostra applicazione a prova di futuro contro potenziali colli di bottiglia nelle prestazioni, mentre continuiamo a espandere la piattaforma e ad aggiungere nuove funzionalità.
Un approccio sperimentale per la realizzazione del progetto
Uno dei primi passi concreti è stato definire gli obiettivi di livello di servizio (SLO) in collaborazione con il nostro team di gestione dei progetti. Questi SLO erano essenziali per fissare obiettivi chiari e misurabili per il miglioramento delle nostre prestazioni. Ci siamo concentrati su metriche chiave come Largest Contentful Paint (LCP), che misura le prestazioni di caricamento delle pagine, e Interaction to Next Paint (INP), che misura l'interattività degli utenti.
Maggiori informazioni su queste metriche sono disponibili su web.dev.
Tuttavia, prima di concordare questi SLO, volevamo capire come Vectra AI rispetto ai nostri concorrenti e abbiamo eseguito un test ad hoc. Per CLS e INP, ci aspettavamo un feedback immediato senza cambiamenti di layout dopo il caricamento e abbiamo verificato questi aspetti con valutazioni soggettive. Per LCP, abbiamo utilizzato il collaudato metodo del cronometro. Fortunatamente, avevo già un cronometro e non ho dovuto spiegare all'ufficio finanziario il motivo per cui era necessario acquistarne uno, non avevamo tempo!
Il metodo era semplice.
Per prima cosa, ho misurato i miei tempi di reazione, avviando il cronometro e premendo il pulsante di arresto quando il tempo raggiungeva i 3 secondi. Questo era il mio ritardo di reazione umano, pari a 300 ms. (È facile barare in questo caso, quindi può essere utile nascondere il contatore dei millisecondi, altrimenti si tende ad anticipare il tempo). Per ogni pagina, conta da 3 e avvia il cronometro quando clicchi sul link, una volta caricato il contenuto critico, ferma il cronometro. Sottrai il tuo tempo di reazione e otterrai il tempo necessario alla pagina per caricarsi.
Il nostro test ad hoc ha confermato che i clienti avevano ragione riguardo ad alcune delle nostre interazioni UI e ai tempi di caricamento piuttosto "lenti". Tuttavia, rispetto ad altri fornitori di sicurezza informatica e ad altri prodotti SaaS di prima classe, offrivamo in realtà un'esperienza simile. La domanda che dovevamo porci, però, era se ci andava bene essere uguali agli altri o se volevamo puntare a tempi di caricamento eccellenti.
Come abbiamo migliorato ulteriormente la Vectra AI
Grazie alla collaborazione tra i nostri team di ingegneri, product manager e UX/UI, abbiamo ottenuto un'applicazione più reattiva e affidabile con miglioramenti apportati a:
- Percezione delle prestazioni di caricamento della pagina attraverso uno "schermo scheletro"
- Le prestazioni delle nostre richieste API e delle operazioni di backend
- Tempi di caricamento della pagina Vectra AI
- Maggiore efficienza nell'esperienza di accesso dell'utente
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 attrezzata per gestire grandi volumi di dati e interazioni complesse con gli utenti.
Approfondisci il nostro progetto sulle prestazioni dell'interfaccia utente nel nostro white paper disponibile qui.