Web performances: definizione, a cosa servono ed esempi

In termini semplici, le web performances riguardano la rapidità e l'efficacia con cui un sito web si carica e funziona. Non mi riferisco solo al tempo necessario per caricare una pagina, ma anche al suo comportamento una volta aperta. La velocità di caricamento di una pagina web è fondamentale per catturare l'attenzione degli utenti e mantenerli interessati al contenuto del sito.

Un sito lento e inefficiente può causare frustrazione e portare gli utenti a chiudere la pagina, perdendo così potenziali visite e opportunità di conversione. Inoltre, un sito web lento può influire negativamente sul posizionamento nei motori di ricerca, poiché i motori di ricerca come Google tendono a favorire i siti che offrono un'esperienza utente ottimale. Pertanto, è essenziale ottimizzare le web performances al fine di garantire un'esperienza utente positiva e migliorare la visibilità e la reputazione del sito web.

La definizione di web performances

La definizione di web performance riguarda la velocità e l'efficienza con cui un sito web si carica e funziona. Non si tratta solo del tempo impiegato per il caricamento di una pagina web, ma anche di come essa si comporta una volta caricata, includendo fattori come l'interattività e la stabilità visiva.

Ad esempio, quanto velocemente i pulsanti rispondono ai clic o quanto rapidamente gli elementi multimediali si caricano sono parti integrali della performance web. Inoltre, una buona performance web è fondamentale per l'esperienza dell'utente e ha un impatto significativo sul posizionamento nei risultati dei motori di ricerca.

Gli aspetti fondamentali per misurare le performance includono:

1. Tempi di Caricamento
2. Interattività
3. Stabilità Visiva

Ti è mai capitato di chiudere un sito perché impiegava troppo tempo a caricarsi? Ecco, quello è un esempio lampante di cattiva web performance. Un sito veloce e reattivo non solo migliora l'esperienza utente, ma influisce anche sul posizionamento nei motori di ricerca.

Web performances e user experience

Cosa sono le web performances? Oggi la sfida non sta più nel fare un sito esteticamente bello ma riuscire a regalare una esperienza ai nostri utenti che sia unica (o almeno ci vada vicino) e che li porti a convertire. La difficoltà sta nel trovare il perfetto equilibrio tra i contenuti che vorremmo mostrare e la velocità finale del caricamento del sito, chiaramente in conflitto tra loro: se anche tu sei in lotta tra l'avere un sito pieno di cose ma veloce, la parola chiave per te è una sola. Conoscenza. Se sai puoi fare piani, prevedere comportamenti e ottenere risultati. Come ottenere la Conoscenza (notare la "C" maiuscola)? Semplice: monitorando tutto.

Le metriche possono essere divise in 3 macro-categorie: relative al front-end, relative al back-end, relative ai contenuti. Iniziamo la nostra analisi con le 4 metriche per valutare il front-end, cioè relative a come ogni browser interpreta le informazioni e in quanto tempo le presenta all'utente finale. Per ovvie ragioni queste metriche sono molto importanti perché sono quelle che più impattano nella percezione e giudizio finale dell'utente perché sono quelle con cui ha direttamente a che fare: quindi ogni azione su una delle seguenti metriche non solo avrà un impatto sui tempi di caricamento ma anche sulla soddisfazione del cliente e sulla sua esperienza (UX). Riferitevi a questi metriche in particolare se i bounce del vostro sito si alzano o si abbassano senza che cambi il contenuto.

1. Time to Title, il tempo che passa da quando il browser fa una chiamata al sito a quando il titolo di pagina appare nella tab della finestra del browser stesso. Se siete già un po' avvezzi ai tecnicismi, saprete già che in realtà il tempo per arrivare al titolo dipende in larga parte da fattori di back-end, in particolare da quanto tempo ci mette il vostro server a erogare i contenuti al browser. Viene però considerata una metrica da front-end perché impatta pesantemente, come detto, sulla percezione dell'utente.
2. Time to Start Render, è il tempo che passa dalla chiamata del browser a quando il primo contenuto appare sulla pagina: anche questa metrica va a pesare sulla percezione finale dell'utente, visto che a nessuno piace fissare una pagina bianca. A spanne, diciamo che ci perdiamo circa metà degli utenti dopo 2,5 secondi di attesa.
3. Time to Display, è il tempo che passa dalla chiamata del browser a quando il browser ha terminato di assemblare (fare un parsing, che non è proprio assemblare ma non trovo una traduzione migliore) gli elementi nella pagina html. Questo non significa che tutti gli elementi sono stati caricati per intero, ma almeno la pagina sembra una vera pagina di un sito serio anche se ci sarà ancora qualche blocco grigio.
4. Time to Interact, è il tempo che passa dalla chiamata al momento in cui l'utente può iniziare a interagire con il sito (interagire qui significa che la pagina risponde correttamente a sollecitazioni come cliccare, scrollare, scrivere in un form. Non è necessario che la pagina sia completamente caricata ma è sufficiente che l'utente possa interagire con essa dato che questo è il momento più importante.

Cos'è la Web Performance Optimization o WPO

Per abusare di una citazione già ripresa da tutti quelli che si occupano di performance:

Se non lo puoi misurare, non lo puoi migliorare

Mi sentivo un po' escluso e ho voluto citare Lord Kelvin anche io e visto che oggi mi sento a mio agio con le citazioni... Kelvin, chi era costui? Uno sconosciuto qualsiasi che, oltre ad aver dato il suo nome alla omonima scala di misurazione della temperatura e aver inventato il telegrafo elettrico, a metà del 1800 aveva già capito il vero principio della WPO: conoscere quello che è successo ci aiuta a capire e prevedere meglio ciò che potrà succedere.

Ah scusate, ho detto "WPO". Vi presento la Web Performance Optimization, una neonata nel mondo delle scienze di ottimizzazione del proprio sito. Ovviamente oltre oceano questa è una pratica ormai diffusa e applicata anche al sito del proprio panettiere all'angolo, mentre qui prevediamo una sua diffusione nel corso dei prossimi anni. Perché quindi nei paesi digitalmente più avanzati le performance sono così importanti da essere diventati una specializzazione? Beh, primo perché sono importanti (vediamo qui sotto dei dati incontrovertibili). Secondo perché Internet è di fatto un mostro complesso che passa per Data Center sparsi in tutto il mondo, Provider altrettanto diffusi, eventuali CDN (Content Delivery Network), collegamenti dell'ultimo miglio che portano il segnale in casa, browser e infine per i device che possediamo. Ottimizzare un sito quindi significa tenere sotto controllo il numero più alto possibile di questi fattori.

Ma stavamo parlando di dati... ne snoccioliamo qualcuno, che con i numeri ci si capisce meglio.

In media un utente si aspetta che il sito venga caricato entro 2 secondi dall'ingresso: ogni secondo in più di loading può significare fino al 3% di abbandono del sito, 7% in meno di conversioni e il 16% in meno di soddisfazione del cliente. Sono numeri importanti che ci aiutano a capire quanto ogni millisecondo conti. Come ottimizzare il proprio sito? Come rendere il tutto più scorrevole, fluido e veloce? Cominciamo a dire che le web performances sono più che altro appannaggio dei designer che degli sviluppatori in quanto circa l'80% del peso di un sito è in front-end più che in ottimizzazioni della struttura del CMS.

Web performance, qualche esempio

Qualche esempio dell'importanza delle web performance?

Case Study #1, Amazon: è stato analizzato che 100ms di ritardo (un decimo di secondo, se non fosse chiaro) nel caricamento di una pagina equivale all'1% nella revenue totale del sito. Quando si dice che "il tempo è denaro".

Case Study #2, Mozilla Firefox: limando 2,2 secondi nelle sue landing page, ha aumentato le conversioni del 15,4% ottenendo circa 60 milioni di download in più ogni anno.

Case Study #3, Shopzilla: ha tagliato il caricamento della propria pagina di circa 4,5 secondi per arrivare ad un loading time di 1,2 secondi aumentando le revenue del 12% e le visite per pagina del 25%.

Come si Misurano le Web Performances

Tempi di Caricamento

La velocità di caricamento di una pagina web è un aspetto fondamentale che non può essere sottovalutato. Un sito lento non solo causa frustrazione agli utenti, ma può anche avere un impatto negativo sul posizionamento nei motori di ricerca come Google. I motori di ricerca tendono a favorire i siti web che offrono un'esperienza utente ottimale, quindi è importante assicurarsi che il proprio sito si carichi rapidamente per garantire una buona visibilità online.

Inoltre, un sito veloce e reattivo migliora l'esperienza dell'utente, aumentando le probabilità di mantenere gli utenti interessati al contenuto del sito e di convertire le visite in opportunità di business. Quindi, ottimizzare la velocità di caricamento del proprio sito web è un passo fondamentale per migliorare le web performances complessive.

Interattività

L'interattività è un aspetto fondamentale delle web performances e riguarda la capacità di una pagina web di rispondere rapidamente alle azioni dell'utente. Se i pulsanti e gli elementi interattivi di un sito impiegano troppo tempo a rispondere ai clic dell'utente, significa che ci sono dei problemi di performance che possono compromettere l'esperienza dell'utente. La lentezza nell'interazione può causare frustrazione e far perdere interesse agli utenti, portandoli a chiudere la pagina e cercare alternative più efficienti.

Per garantire una buona interattività, è importante ottimizzare il codice e ridurre al minimo il tempo di risposta dei pulsanti e degli elementi interattivi. In questo modo si assicura una navigazione fluida e reattiva, migliorando l'esperienza dell'utente e aumentando le possibilità di conversione.

Stabilità Visiva

Nessuno ama quando gli elementi di una pagina ballano freneticamente mentre stai cercando di leggere. La stabilità è una caratteristica essenziale. Quando visitiamo un sito web, ci aspettiamo che gli elementi si posizionino correttamente e rimangano stabili durante la nostra esperienza di navigazione. Immagina di leggere un articolo interessante e improvvisamente le immagini iniziano a saltellare e il testo si sposta continuamente. Questo non solo è fastidioso, ma può anche rendere difficile la lettura e l'assimilazione del contenuto.

La stabilità visiva di un sito web è cruciale per garantire una buona esperienza utente. Gli utenti desiderano un'interfaccia fluida e stabile che consenta loro di interagire con il sito senza distrazioni o problemi. Quando i contenuti rimangono fermi e ben posizionati, l'utente può concentrarsi sulle informazioni presentate e godere appieno dell'esperienza di navigazione.

Per ottenere una stabilità visiva ottimale, è importante prestare attenzione alla progettazione e allo sviluppo del sito web. Assicurarsi che gli elementi vengano posizionati correttamente utilizzando tecniche di layout stabili e responsivi. Inoltre, è essenziale testare il sito su diversi dispositivi e browser per garantire che la stabilità visiva sia mantenuta su tutte le piattaforme.

La stabilità visiva non solo migliora l'esperienza utente, ma può anche influire sulla reputazione del sito web. Un sito che presenta problemi di stabilità può far apparire poco professionale e poco affidabile agli occhi degli utenti. Al contrario, un sito web stabile e ben progettato comunica professionalità e cura del dettaglio, migliorando la reputazione e l'affidabilità del sito agli occhi degli utenti.

Fattori che Influenzano le Web Performances

Vediamo quali sono le prime cose da guardare per migliorare le web performances in maniera abbastanza veloce. Se le hai già controllate tutte, allora il problema è più serio e bisogna fare una ricerca più approfondita.

1. Hosting. Un buon hosting è la base di ogni sito web veloce. Non lesinare in questo settore.
2. Codice. Un codice pulito e ben strutturato può fare la differenza.
3. Immagini e Media. Evita di caricare file enormi che rallentano il tuo sito. Comprimi sempre le immagini.
4. Cache. La cache può fare miracoli per la velocità del tuo sito. Impara a utilizzarla.
5. CDN. Un Content Delivery Network può aiutare a distribuire il carico, rendendo il tuo sito più veloce globalmente.

Web performances e backend: 4 fattori da controllare

Parlare di web performances non significa solo parlare necessariamente di frontend ma è possibile trovare anche metriche per misurare le performace del back-end, metriche che si riferiscono a come il tuo server passa i contenuti al browser dei tuoi utenti: in pratica misurano tutto quello che succede da quando l'utente prova a collegarsi a quando può iniziare ad interagire con gli elementi del sito.

Data Center, DSP, ultimo miglio sono tutti fattori inclusi in queste metriche. Qui i tempi sono ancora più ristretti rispetto alle metriche relative al front-end perché quella più lunga dovrebbe portare via al processo circa un secondo in un mondo perfetto. Anche se che queste metriche non impattano direttamente sulla User Experience (e lo fanno solo indirettamente) e quindi sulla percezione diretta dell'utente, se abbiamo un back-end lento l'intero processo ne uscirà rallentato a sua volta. A proposito di metriche:

1. DNS Time, è il tempo che il Provider impiega ad associare il DNS all'IP sottostante a partire da un immenso database. Il 50simo percentile della popolazione di siti è intorno ai 60ms.
2. Connection Time, è il tempo impiegato dalla chiamata del browser a quando questo riesce a stabilire un contatto con il server. La media è intorno ai 150ms, ma questo può dipendere da molti fattori esterni e non controllabili come la location da cui ci si connette, quanto è occupato il server in quel momento, i bot dei motori di ricerca o quanto il sito è trafficato in quel momento. Proprio per questi motivi non è sempre utile tenere monitorata questa metrica ma si può effettuare una specie di test da sforzo per valutare come il sito reagisce alla pressione con strumenti (a pagamento) come LoadStorm. Se si trovano seri problemi in questo punto, la soluzione potrebbe essere quella di scalare l'infrastruttura.
3. First Byte Time, dopo che è stabilita la connessione il primo byte parte dal server e prima o poi atterra nel computer dell'utente. La metrica in oggetto misura la durata di questo viaggio. L'unico impedimento per questa metrica è la scarsa bontà del codice con cui il sito è stato scritto: il contenuto statico (quello più standardizzato) deve essere sganciato dal resto e spedito immediatamente senza aspettare che si faccia accompagnare dal contenuto dinamico che solitamente, tra le altre cose, pesa di più.
4. Last Byte Time, al contrario l'ultima metrica registra il tempo che impiega l'ultimo byte del sito ad arrivare nel browser del nostro utente: in definitiva quanto ci vuole per inviare interamente il sito. Un tempo medio accettabile è intorno agli 0,7 secondi e dipende in larga parte da codice non ottimizzato o da query scritte in maniera approssimativa nel database.

In linea di massima la misurazione di queste metriche avviene attraverso strumenti, alcuni dei quali sono già stati affrontati. L'interpretazione dei dati e la ricerca delle cause, per le metriche di backend in particolare, invece può essere più complicato proprio per la molteplicità delle cause che possono intervenire.