Migliorare la UX con la performance front-end

Immaginiamoci di essere ad un incrocio, in attesa che scatti il verde per attraversare la strada. Schiacciamo il pulsante per l’attraversamento pedonale e prendiamo in mano il telefono. Vogliamo fare una cosa: potremmo voler controllare l’email, aggiungere una voce alla nostra to-do list, o controllare Twitter. Abbiamo un tempo limitato per fare una di queste cose.

Tale quantità di tempo è quanto hanno i nostri utenti per portare a termine quello che vogliono fare sul nostro sito, ed è importante.

Secondo uno studio di Google, aggiungere mezzo secondo alla pagina dei risultati di una ricerca può fare diminuire il traffico e le entrate dalla pubblicità del 20%. Nello stesso articolo in cui appare questa affermazione, si dice che Amazon abbia scoperto che ogni 100 millisecondi aggiunti al tempo di caricamento fanno diminuire le vendite del 1%. Gli utenti si aspettano che le pagine si carichino in due secondi e, dopo tre secondi, fino al 40% delle persone semplicemente abbandonerà il sito.

Riuscite a tenere il passo? La risposta potrebbe essere “no” se state progettando siti pieni di contenuto, con molti elementi dinamici, con files JavaScript molto grandi e con grafica complessa.

È ora di rendere l’ottimizzazione della performance una parte fondamentale del modo in cui progettiamo, realizziamo e testiamo ogni singolo sito che creiamo, per tutti i device.

Progettare per la performance#section1

La performance di un sito web comincia con il design. Pesate l’impatto delle scelte di design sulla velocità di una pagina rispetto al suo impatto rispetto al conversion rate del vostro sito. Vi servono davvero otto diverse sfumature di blue? Che valore aggiunge un’immagine di background larga 1000 px? Sostituire una sprite con un icon font aggiunge davvero più peso alla pagina e rallenta il rendering oppure sarà più veloce che con l’immagine originale?

Non tutte le decisioni di design favoriranno la performance. Ho scoperto che nonostante lo stile di un pulsante rallenti leggermente la velocità della pagina riesca a far aumentare le conversioni, quindi in questo caso vale la pena sacrificare leggermente la performance web.

Tuttavia, a volte, vince la performance. Una volta avevo un redesign di una landing page che aggiungeva una significativa quantità di immagini alla pagina e non ero sicura se il risultato della performance avrebbe avuto un impatto negativo sulle conversioni, perciò mostrai il redesign a un piccolo sotto-insieme di utenti in un test A/B per vedere che impatto avrebbe avuto. Il nuovo design ci metteva il doppio del tempo a caricare e notati subito un alto exit rate e un conversion rate più basso, così tenni il design originale più leggero. Va bene sbagliare perché ci fornisce un benchmark.

In un altro esperimento, la homepage di dyn.com aveva una sezione di immagini thumbnail con 26 immagini a rotazione su 10 slot.

La homepage di dyn.com.

Il mio collega dell’epoca aveva messo tutte e 26 le immagini in una sprite, la quale:

• aveva fatto crescere la dimensione totale della pagina di 60K per via delle aumentate dimensioni dei file CSS, JavaScript e dell’immagine modificati per ricreare questo effetto con la sprite
• aveva fatto diminuire il numero delle richieste del 21%
• aveva tagliato il tempo di caricamento totale dell’homepage di un’enorme 35%

Questo prova che vale la pena sperimentare: non eravamo sicuri del suo successo o meno in termini di velocità della pagina, ma sentivamo che sarebbe stato utile imparare da un esperimento.

Programmare per la performance#section2

Ripulite il vostro HTML e tutto il resto verrà di conseguenza.

Cominciate con il rinominare gli elementi non-semantici nel vostro HTML. Questo sarà probabilmente il compito più difficile, ma una volta che avrete cominciato a pensare al tema in termini di semantica come “nave” o “article” e meno in termini di design o di griglia, farete dei progressi notevoli. Spesso si arriva agli elementi con nomi non semantici perché si ha bisogno di più peso nei selettori CSS e invece di pulire i nostri CSS e aggiungere la specificità da subito aggiungiamo degli ID e degli elementi non necessari al nostro HTML.

Poi, pulite il CSS. Per primi, rimuovete i selettori non efficienti. In uno studio fatto per writegoodcode.com, ho scoperto che aggiungere dei selettori inefficienti a un file CSS fa davvero aumentare il tempo di caricamento di una pagina del 5,5%. Selettori CSS più efficienti saranno più semplici da riprogettare e i loro stili saranno più semplici da personalizzare in futuro dal momento che sono più semplici da leggere nel proprio foglio di stile e hanno un significato semantico. Il codice riutilizzabile, modificabile, spesso va mano nella mano con una buona performance. In quel case study, ho risparmiato il 39% della dimensione del file CSS pulendo i file CSS.

Dopodiché, concentratevi sulla cura del vostro HTML per guarirlo dalla divite. Tipicamente, più sarà pulito il vostro markup, più sarà piccolo il vostro CSS e più sarà semplice riprogettarlo e modificarlo in futuro. Non solo fa risparmiare tempo di caricamento ma anche tempo di sviluppo.

Per ultimo, concentratevi sulla creazione di codice riutilizzabile, che vi faccia risparmiare tempo e risulti in file CSS e HTML più piccoli. Meno HTML e CSS saranno significativamente più semplici da mantenere e riprogettare in futuro e dimensioni di pagina più piccole avranno un impatto positivo sulla velocità della pagina.

Ottimizzare le richieste#section3

Si parla di richieste quando il vostro browser deve andare a prendere qualcosa come un file o un record DNS. Più sarà pulito il vostro markup, meno richieste dovrà fare il browser, il che porterà i vostri utenti a dover aspettare di meno che il browser faccia queste richieste.

Oltre al markup pulito, minimizzate le richieste JavaScript caricandolo solo quando è assolutamente necessario. Non richiamate un file su ogni pagina se non ne avete bisogno su ogni pagina. Non caricate un file JavaScript in un design responsive se occorre solo per gli schermi più grandi. Per esempio, sostituite gli script social con dei semplici link. Potete anche caricare JavaScript in maniera asincrona, cosicché il JavaScript non bloccherà la resa a video di alcun contenuto.

Sebbene un design responsive solitamente implichi un maggior numero di CSS e di immagini (maggior peso della pagina), potete ancora ottenere dei tempi di caricamento più rapidi per dimensioni di pagina più grandi se si tagliano le richieste.

Ottimizzare le immagini#section4

Risparmiate quante più richieste per le immagini potete. Per prima cosa, concentratevi sulla creazione di sprite. Nel mio studio per writegoodcode.com, ho scoperto che una sprite per le icone nell’esempio aveva tagliato il page load del 16,6%. Mi piace cominciare a pulire le immagini creando una sprite per i background che si ripetono. Potreste aver bisogno di crearne una per le ripetizioni verticali e una per quelle orizzontali.

Poi, create una sprite trasparente per i background che non si ripetono. Questa includerà cose come il logo e le icone. Man mano che migliorate, potrete anche usare tool come Grunticon, che prende le icone SVG e le immagini di background e trova il modo migliore per distribuirle a seconda delle capacità del browser.

Dopo aver rigenerato le immagini, fatele passare attraverso un optimizer come ImageOptim. In maniera simile, le immagini dimensionate per i retina display possono essere rese più piccole con una vasta compressione che però non si nota nel risultato finale.

Cercate ora di capire quali immagini potete sostituire con i gradienti CSS3. Questo non solo ridurrà il tempo di caricamento della pagina, ma renderà anche infinitamente più semplice modificare il sito in un secondo tempo, perché gli sviluppatori non dovranno recuperare i file originali per modificarli, rigenerarli e ri-ottimizzarli in futuro.

Da ultimo, cercate di usare Base64 encode, che vi permette di inserire un’immagine nel file CSS invece che di richiamarla usando un URL separato. Alla fine, appare così:

#nav li:after {
	content:url(data:image/png;base64,
         iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAI0lEQVQIW2P4//8/
         w8yZM//DMIjPAGPAMIiPWxCIMQQxzAQAoFpF7lGFr24AAAAASUVORK5CYII=);
}

Le lettere e i numeri casuali si aggiungono a un piccolo cerchio che è usato in molti posti all’interno di dyn.com. Fare l’embed delle immagini vi permette di risparmiare una richiesta per l’immagine ogni qualvolta la si voglia usare nel proprio design. Inserire le immagini usando questo metodo renderà più grandi i vostri file CSS, quindi occorre testare il tempo di page load prima e dopo per essere sicuri che stiate facendo dei miglioramenti.

Misurare la performance#section5

Adesso viene il bello: determinare se gli sforzi vengono ripagati.

Sia PageSpeed di Google sia YSlow di Yahoo! offrono dei suggerimenti su come migliorare il tempo di page load, inclusa l’identificazione di quali elementi bloccano il rendering della pagina e la dimensione dei vari componente della pagina come CSS o HTML.

Vi raccomando anche l’estensione YSlow 3PO, che controlla l’integrazione sul vostro sito di script di terze parti molto popolari come Twitter, Facebook e Google+. Il plugin vi dà dei consigli su come ottimizzare ulteriormente i social script presenti sulla vostra pagina per migliorarne il tempo di caricamento.

WebPageTest.org è stato il mio benchmarking tool preferito fin da quanto ho cominciato a fare dei miglioramenti basandomi sui suggerimenti di PageSpeed e YSlow. Dà delle informazioni molto dettagliate sulle richieste, sulle dimensioni dei file, sul tempo e offre varie locations e browser in cui fare i propri test.

Il benchmarking può aiutarvi a risolvere i problemi man mano che progettate. Misurare la performance ed analizzare i risultati vi aiuta a velocizzare il design sia per i grandi schermi sia per quelli piccoli. Potete anche testare e fare il benchmark di tecniche come il caricamento condizionale di immagini man mano che si prende confidenza con lo sviluppo per la performance.

L’impatto della performance web#section6

La performance web influenza gli utente e questo vuol dire che tutti dobbiamo comprenderla, misurarla e migliorarla. Tutte queste tecniche porteranno a un miglior tempo di caricamento della pagina, che crea un miglioramento significativo della user experience del proprio sito.

Utenti più felici implicano migliori conversion rate, sia che li misuriate in entrate, signup, returning visit o download. Con un tempo di page load veloce, le persone possono usare il vostro sito e portare a termine quello che vogliono in un tempo breve, anche se stanno solo aspettando il verde per l’attraversamento pedonale.

Illustrazioni: {carlok}