Per ogni millisecondo di ritardo, hai una perdita nelle vendite: ecco perché la web performance del tuo sito è fondamentale.
Web Performance, o meglio: l’importanza di osservarla, analizzarla e migliorarla continuamente. Negli ultimi anni è uno dei temi più rilevanti per chi si occupa di web. Tanto per fare un esempio:
Sai che per ogni 100 millisecondi di ritardo nella visualizzazione di una pagina, Amazon calcola una perdita dell’1% nelle vendite?
Ecco, questo per capire che le web performance sono fondamentali per il business. Wikipedia le definisce: “Web performance refers to the speed in which web pages are downloaded and displayed on the user’s web browser”.
Detto in modo più semplice: il tempo che una pagina richiede per essere visualizzata su un browser da un utente. E quindi: più una pagina è veloce a essere visualizzata, meglio è. Ma perché? I motivi sono semplici e possono essere riassunti in 3 macro aree:
- Denaro
- SEO
- User Experience
Web performance è Denaro
Il tempo che un utente spende aspettando di vedere una pagina web è denaro per un’azienda. Come dicevamo: per ogni 100 millisecondi di ritardo nella visualizzazione di una pagina, Amazon calcola una perdita del 1% nelle vendite. Allo stesso modo, Google ha dichiarato che ogni mezzo secondo di ritardo nella generazione di una loro pagina con risultati di ricerca costa un 20% di traffico in meno.
Anche se questi esempi provengono da colossi milionari – e i tempi di cui parliamo si contano in millisecondi –, sono comunque dati che aiutano a dare un’idea della stretta relazione Web Performance e denaro.
Web performance è SEO
Assunto molto semplice quanto importante: più una pagina è veloce, più il suo posizionamento SEO aumenta. Da ormai anni Google ha iniziato ad assegnare maggiore visibilità a contenuti con una migliore velocità di caricamento, offrendo intere linee guide e tool per gli sviluppatori per aiutarli in questo compito. Un esempio semplice: Page Speed Insight.
Recentemente Google ha anche iniziato anche a offrire direttamente nuovi tool per l’ottimizzazione delle pagine tramite librerie javascripts, tramite il progetto AMP (Accelerated Mobile Pages). Se si vuole ottimizzare una pagina per il Seo, la velocità è ormai una parte dell’equazione, non più un’opzione secondaria.
Web performance è User Experience
Google si è prefissata di offrire pagine che non richiedano più di un secondo per caricare il contenuto “above the fold”. Un secondo è ben presto diventato il nuovo standard imposto da Google per il caricamento di una pagina. Il motivo di tanta attenzione verso la velocità di caricamento delle pagine e la user experience è presto spiegato.
Il cervello umano riconosce come “lento” o “non istantaneo” tutto ciò che richiede più di 400 millisecondi. Ovvero, il battito di ciglia. Un secondo appare attualmente un tempo “accettabile” per il caricamento da parte di un utente. Oltre un secondo l’utente avverte di stare utilizzando un sito “lento” o comunque di avere una esperienza non soddisfacente. Ma quindi cosa accade a un sito web “più lento” di un secondo?
Secondo le ultime statistiche,
un utente su 4 abbandona un sito web se questo richiede più di 4 secondi per caricarsi
E non dimenticare che user experience significa guadagni: il 46% per cento degli utenti web – da tradurre in “quasi metà delle gente su internet” – non visita una seconda volta un sito che risulta lento. Risultato: puoi avere il sito più interessante e ben concepito del web, con tutti i contenuti che l’utente sta cercando. Ma se il sito non viene caricato velocemente, nessuno attenderà abbastanza a lungo per vederlo.
Web Performance: da dove iniziare?
Abbiamo visto cosa si intende con il termine Web Performance e come queste abbiano una ricaduta sulle prestazioni, l’utilizzo e soprattutto l’economia di una pagina web. La domanda successiva è: come posso migliorare le prestazioni del mio sito in termini di web performance? La prima risposta: capire come funziona il processo tecnico che porta un utente a visualizzare una pagina web sul proprio device.
Per fare questo bisogna addentrarsi in alcuni dettagli tecnici più vicini al mondo degli sviluppatori, ma un punto importante da ricordare è questo: il frontend è uno dei maggiori punti critici per la web performance.
Uno dei colli di bottiglia per la visualizzazione delle pagine risiede infatti nei browser e su come essi gestiscono il render delle immagini, dei css e dei file javascripts. Detto in modo più chiaro:
[Steve Souders – 2007; Christian Heilmann – 2010]80-90% of the time spent by users waiting for pages to load is spent on the frontend, all the work that needs to be done after the HTML document has arrived.
Capire come funziona un browser e quali sono i suoi punti critici è un inizio. Google offre per esempio un ottimo punto di partenza nelle sue linee guida.
Web Performance sono raccolta dati e analisi
Una volta che si ha un po’ di dimestichezza con alcuni concetti base sul lato tecnico, si è pronti a cercare di capire cosa succede sul proprio sito. E qui si apre un altro grande punto: capire cosa cercare, come distinguere i punti critici per una ottimizzazione e come tenere sotto controllo le variazioni sul lungo periodo.
Attualmente vi sono infatti tantissimi dati, grafici, tools e siti web che permettono di analizzare la web performance di un progetto web, i quali offrono i dati più disparati e dettagliati possibili.
Il rischio, soprattutto all’inizio, è quello di “perdersi” letteralmente in questa vastità di informazioni, oppure focalizzarsi su alcuni dati non essenziali. Un’attenta e chiara analisi della web performance del proprio progetto è quindi la base. Meglio tenere conto di pochi semplici dati, facilmente riconoscibili e ben chiari, che provare a tenere sotto controllo una serie di infiniti dati di cui non si ha una chiara conoscenza.
Le web performance sono un percorso sempre in divenire, mai un risultato assoluto. Tanto vale iniziare a piccoli passi.
Web Performance: quali tool utilizzare?
Per iniziare consiglio sempre Page Speed Insight di Google: basta digitare il dominio del sito web che vogliamo analizzare e Google in pochi secondi ci offrirà un semplice risultato, basato su una scala da zero a cento (come a scuola), dove riceveremo una prima chiara analisi, divisa per device mobile o desktop. Inoltre Google ci indicherà in modo generico i punti critici che ha rilevato e alcuni link a pagine di approfondimento su ciascuno di essi e linee guida su come risolverli. Un perfetto punto di partenza per analizzare lo stato di salute del nostro sito.
Ovviamente questo è solo il punto di inizio: non aspettarti di trovare in un paio di pagine di linee guida la soluzione al tuo problema; a ogni punto segnalato da Google si apriranno nuove domande e problemi tecnici da studiare e risolvere. Ma tramite Google avremo un buon “maestro” che ci indica la via.
Un altro grande strumento di analisi, che inizia a offrire moltissimi dati grezzi, è il nostro browser, ovvero l’interfaccia di controllo sviluppo quale Firebug in Firefox o Chrome Dev Tool per Chrome. Ogni browser offre infatti moltissimi moltissimi tools per analizzare una pagina web anche sul lato delle performance e caricamento delle risorse.
Chrome in particolare lavora continuamente allo sviluppo e miglioramento dei propri tools. Senza scendere ora nei dettagli (conoscere e utilizzare a pieno i tool di Chrome Dev Tool è un lavoro nel lavoro), moltissimi dati relativi ai tempi di caricamento degli elementi di una pagina e sulla loro concatenazione possono essere visti nella sezione “Network” e “Timeline”.
Da qui possiamo avere facilmente informazioni sul caricamento di elementi della pagina, con anche una basilare visualizzazione in grafici e metriche.
Infine, per iniziare a usare strumenti più sofisticati, uno dei migliori servizi è Web Page Test, dove gratuitamente si può testare qualsiasi pagina web online, ricevendo letteralmente una mole di informazioni tecniche.
Inoltre questo tool online offre anche la possibilità di confrontare più pagine tra di loro, potendo avere dati su eventuali competitor. Nonché la possibilità di scaricare video dei test che si stanno facendo, avendo così anche un chiaro riferimento visivo di ciò che realmente accade mentre una nostra pagina viene caricata da un browser.
Il lato tecnico non è però l’unico su cui dovremo lavorare per permettere al nostro progetto di godere di un’ottima web performance. Esiste il mercato di riferimento e soprattutto qualcosa che Tim Kadlec ha già definito con un concetto: “Performance Budget”.
Ma di questo ne parleremo fra un mese, con la seconda parte di questa guida: segui Social Factor su Facebook e LinkedIn per sapere quando sarà online il secondo e ultimo articolo!
