Dalla web performance al performance budget il passo è breve: esempi concreti su un “nuovo” modo di lavorare nel web.
Qualche mese fa abbiamo parlato di web performance, attività fondamentale per il business online. Ora sappiamo cosa si intende e perché sia un tema rilevante per un progetto, oltre a quali siano gli strumenti che permettono di analizzarne e monitorare l’andamento. Ma nel concreto, la questione rimane: il nostro sito o progetto ha attualmente un certo livello di performance e vorremmo renderlo più veloce. Come fare?
Dalla Web performance al Performance budget
Partiamo da un esempio concreto. Diciamo che il nostro sito ha una velocità di caricamento di 4 secondi e un punteggio su speed insight di Google che si aggira sul 59%. Non male come risultato, ma vogliamo fare delle migliorie. Cosa dobbiamo fare?
Per prima cosa dobbiamo essere certi che il nostro progetto, sul lato tecnico, utilizzi al meglio tutte le buone pratiche per aumentarne la velocità. Un server settato in modo ottimale, un codice (css + html + js) concatenato, minificato, magari zippato in formato GZIP, sono la base.
Visto che il frontend è uno dei maggiori punti critici, magari possiamo scegliere alcune piccole strategie per aumentare l’efficienza: usare immagini compresse, utilizzare CDN per distribuire il nostro codice, limitare o ottimizzare l’uso di font customizzati, caricare immagini tramite tecniche di “lazy-loading” e così via. Senza addentrarci ora in questioni tecniche, possiamo anche tenere sotto controllo ciò che è chiamata “Critical Path” o “Critical Css” del nostro codice frontend e cercare di migliorarla con tool come Penthouse o CriticalJS
Se abbiamo fatto tutto per bene, dopo, alcune piccolo migliorie tecniche vedremo dei progressi rispetto la velocità del nostro sito. Ma il lato tecnico non è l’unica parte su cui dobbiamo lavorare.
A ogni progetto il suo “perché”
Nel mondo reale ogni progetto, o cliente, o sito web, ha le proprie caratteristiche, la propria storia, i propri obiettivi. Ciò che si applica a un sito non si può automaticamente applicare a un altro. Un esempio banale: un sito di ecommerce è ben diverso da un sito per un’azienda che produce biscotti. Ognuno di loro avrà un concetto, una grafica, una implementazione di features ben definite e probabilmente molto diverse.
A livello tecnico possiamo configurare una comune base di tecnologie e codice, ma ciò non basta. A un certo punto uno di questi siti richiederà una feature che renderà il sito piu lento e abbasserà le sue web performance: ad esempio un carousel fullscreen in homepage
A questo punto che fare? Tutte le vostre strategie per le web performance e rendere il sito caricato in meno di due secondi saranno messe a rischio. Come provare a evitare tutto ciò?
Non sempre è solo questione di “velocità”
Il termine è alquanto semplice: definite un “budget” per la vostra performance. Ecco come lo definisce il suo “creatore” Tim Kadlec:
A performance budget is just what it sounds like: you set a “budget” on your page and do not allow the page to exceed that.
Bella definizione: ma nel concreto che significa? Di base per un progetto iniziate a settare un “budget” e cercate di non superarlo. Per esempio, il tempo massimo di caricamento per la pagina. Tornando al nostro esempio di una nuova feature relativa a un carousel: se la feature renderà la vostra homepage troppo lenta, “sforando” quindi il budget che vi eravate prefissi per il caricamento della pagine, non implementate il carousel.
So già cosa stai pensando: “Davvero da domani dovrei andare da un eventuale cliente o da un collega e dirgli di non implementare un carousel perchè sfora una cosa chiamata Performance Budget?”
La risposta è complicata. Ma è SI.
Cos’è e come funziona il “Performance Budget”
Se davvero un progetto web ha come priorità la velocità di caricamento delle proprie pagine, perché esso si traduce in maggiore ricavo economico e più interazione con gli utenti, è tempo di parlare seriamente di Performance Budget e di come questo concetto potrà mutare il flusso di lavoro.
Perchè di base il Performance Budget non è un concetto tecnico, ma un un vero e proprio modello di lavoro che tiene sempre a mente le web performance e modifica in modo concreto il modo di pensare a un progetto, dal design allo sviluppo alla gestione delle risorse.
Il concetto di Performance Budget si basa su elementi tecnici, ma i suoi effetti vanno a toccare non tanto il mondo dei computer ma il mondo delle persone con cui lavorate e che utilizzano un sito web. Se tutte le persone coinvolte in un progetto accettano o credono nelle web performance, avendo una base comune su ciò che significa, che implica e che potrebbe portare, allora i cambiamenti non saranno mai non ritenuti errati.
Le Web Performance, l’analisi della velocità di caricamento delle pagine, i siti come Speed Insight di Google sono “solo” tool che offrono a te e ai tuoi colleghi dei dati tecnici. Il Performance Budget è ciò che viene dopo: un approccio di lavoro che, utilizzando questi dati, offre strategie per la gestione di un progetto. Ecco un semplice esempio di utilizzo di Performance Budget: un calcolatore di Performance Budget
Come vedi gli input possono essere pochi, semplici e facilmente comprensibili: in quanti secondi la tua pagina deve caricarsi con un certo tipo di connessione. Con un click avrai il tuo Performance Budget, in un dato semplice e oggettivo: kilobytes. E potrai cercare di fare “quadrare” i conti allocando i byte in questo o quel elemento (css, js etc..). Come con una coperta quando fa freddo, tirando da una parte rischierai di lasciare scoperto un’altra zona. E sarai te a decidere dove e come trovare un equilibrio.
In base alle scelte, basate su dati tecnici e oggettivi, avrai creato un strategia di lavoro: hai ridotto i byte for i font? Il design non potrà più basarsi su 3 font customizzati ma solo su uno. Hai aumentato i byte per le immagini? Ok, ora puoi avere il tuo carousel, ma magari dovrai rimuovere la mappa di Google in fondo alla pagina per “recuperare” preziosi byte. E queste scelte dovranno essere discusse e accettate non da computer, ma da persone come il collega, il capo, il cliente.
Una base comune per indirizzare al meglio le scelte
Non sempre tutto ciò sarà facile, anzi probabilmente molto spesso questo genere di strategie troveranno ostacoli e magari verranno addirittura ignorate. Parlare di Performance Budget obbliga tutte le persone che lavorano a un progetto ad avere una base comune relativa alle web performance e alla loro importanza, nonché a essere pronti a cambiare il proprio modo di lavorare in base a dati tecnici come “byte” e “velocità di caricamento di una pagina”.
Ma se davvero il tema delle Web Performance ti interessa, settare un “Budget” per esse diverrà una priorità. E fare conoscere queste strategie e informazioni alle persone con cui lavori farà anche esso parte del piano.
Per concludere, qui sotto c’è un video dedicato alla “cultura delle performance” dove Paul Lewis e Lara Swanson, esperti di performance rispettivamente per Google e Etsy, parlano di come esse influenzino direttamente le scelte delle loro aziende. Da notare: il loro intervento parla non tanto di problemi tecnici, ma di problemi tra persone e uso del web.
Perché in fondo una pagina web veloce è tecnicamente una cosa meravigliosa. Ma senza un utente felice di vederla rimane comunque una serie di byte persi nel freddo siderale del web.
