L’arte di ottimizzare i siti web - Parte 1
Dal 14 al 16 Dicembre 2018 a Catania si è tenuta la Dev Fest, un evento targato Google in cui si trattano tramite talk, workshop, hackathon argomenti da Developer, magari inerenti al mondo del colosso della ricerca. In questa occasione ho preparato un talk su come ottimizzare progetti web, qui lascio la trasposizione in articolo.
Partiamo dal fatto che la maggior parte dei servizi ad oggi disponibili sono fruibili online. Il problema è che non tutti hanno a disposizione una rete 5G e l’ultimo modello di iPhone per navigare e fruire questi servizi; questo comporta avere un tempo medio di caricamento intorno ai 15 secondi (fonte Google 2016) ed un tasso di abbandono del 53% per i domini che mostrano 3 secondi o più di white screen.
Come fare a rimediare a questa fuga di massa dai nostri progetti online? La soluzione è semplice: Scrivere codice ottimizzato ed efficace. Facile, no?
Lo stato dell’arte dei nostri siti
Facendo una rapida analisi dei siti maggiormente visti in italia secondo SEMrush scopriamo come l’ottimizzazione viene valutata poco nei team di sviluppo di queste aziende, che fanno del web una parte importante del loro business. Un esempio viene dato dai siti di bmw.it o mediasetplay.mediaset.it dove non vengono usate le principali e basilari regole per velocizzare il tempo di caricamento del sito.
Cosa significa aumentare le performance
Molte volte ottimizzare un sito web sembra un’attività inutile e si preferisce dedicare effort verso attività più “produttive” per l’azienda, ma in rete sono disponibili molti dati ed esempi su come rendere un sito più velocemente fruibile influenza anche altre KPI (Key Performance Indicator).
Un ottimo spunto ci viene fornito da Google tramite la piattaforma Web Fundamentals dalla quale prendiamo giusto quale esempio.
Ridurre il bounce rate
Il sito COOK dopo aver ridotto il tempo di caricamento del sito di 850ms (meno di un secondo) ha ridotto il bounce rate del 7%, quindi le persone erano più propense ad esplorare il sito a parità di design ed abbandonavano meno dopo aver visto per poco solo la home.
Aumentano gli utenti e le interazioni
A volte non serve neanche migliorare davvero le performance del sito ma lavorare su elemento psicologici per aumentare il modo in cui i nostri utenti interagiscono con il sito: è il caso di Pinterest che ha aumentato le registrazioni e l’uso della ricerca del 15% quando hanno ridotto il “tempo di attesa percepito” del 40% (scopriremo dopo come farlo).
Aumentano le conversioni
Migliorare la fruibilità del sito significa anche vendere di più e lo dimostra AutoAnything che quando ha investito nello sviluppo per dimezzare il tempo di caricamento del sito ha riscontato un boost del 12–13% sulle vendite del loro ecommerce.
Ottimizzazione: Entry Level
Quali sono i primi passi per ottimizzare un sito web? Cerchiamo di vederlo tenendo il livello accessibile anche a non esperti.
1.1 Rimuovi il superfluo
In ogni progetto in fase di sviluppo sono presenti librerie esterne capita molto spesso che mettiamo un sito in produzione senza prima scremare tutto il codice che non serve. La prima regola per alleggerire la nostra code base è quindi togliere tutto quello che non ci serve.
Alcune regole:
- Ogni risorsa ha un effettivo valore? es. Non ha senso usare Bootstrap tutte le volte, se dobbiamo sviluppare una semplice landing page o un login con i social forse bisognerebbe pensare di non usarlo.
- Se proprio non possiamo farne a meno possiamo usare la risorsa/libreria prendendo solo quello che ci serve? Per esempio posso importare solo le griglie/mixins di Bootrap per avere un boost istantaneo alla produttività!
- Magari qualche risorsa è utile al progetto, ma sarebbe possibile riscrivere una parte del codice per alleggerire il tutto, un buon esempio potrebbe essere quello di rimuovere JQuery (Come ha già fatto GitHub) ed usare le nuove API del browser per gestire il DOM.
- In generale cerchiamo di mischiare librerie che hanno parzialmente o totalmente la stessa funzionalità, jQuery in compagnia di Librerie/Framework JavaScript come VueJS, React, Angular risulta davvero superfluo. (Si non le mando a dire a jQuery)
1.2 Minifica il resto
La compressione lato server delle nostre risorse è un ottimo stratagemma per servire un contenuto leggero senza perdere qualità.
Alcune regole:
- Minifica HTML, CSS, JS: è gratis, i file si possono comprimere direttamente durante la fase di sviluppo senza passare da tool diversi da quelli che usiamo già (WebPack, parceljs, gulp) e possiamo risparmiare anche il 25–30% sulle risorse statiche.
- Abilita la compressione GZIP per risparmiare fino al 70% di spazio, è largamente supportata e non crea problemi, per evitare rallentamenti dovuti alla compressione on demand possiamo pre-comprimere tutto il nostro codice configurando in pochi passaggi il server.
1.3 Gestione dei media: Immagini e Video
Immagini e video rappresentano la maggior parte dei dati che passano dai nostri server, ottimizzare questo aspetto migliorerà di molto le prestazioni.
Alcune regole:
- Le immagini devono avere sempre i tag richiesti di fallback “alt” in modo tale da permettere a chi è dotato di una scarsa connessione di iniziare a capire che tipo di contenuto sarà fruibile nella pagina (e Google apprezzerà in ottica SEO).
- Caricare media della dimensione giusta: quante volte carichiamo immagini enormi perché non si sa mai? Meglio più grande in fondo no? Beh, non proprio, alcune immagini sono troppo grandi e si potrebbero ottimizzare con la compressione e servendole con la giusta dimensione.
- Se vengono scaricati troppi mediaperché non pensare di implementare il tanto amato lazy loading?
- Comprimi immagini e video, usa i Video al posto delle GIF, stesso peso, qualità maggiore: Se impostiamo il loop ed il muted nessuno troverà la differenza!
- WebP è il formato del futuro, è sviluppato da Google per le immagini sul web ed offre a parità di qualità un peso del 25–30% inferiore!
1.3.1 Immagini reattive
In ogni sito web ci sarà probabilmente un’immagine che a seconda della risoluzione dello schermo occupa una larghezza diversa all'interno della pagina, ora qui nascono due problemi:
1) scaricare un immagine grande perfetta per la visuale desktop sarà uno spreco per un dispositivo mobile che in media ha 400px di width;
2) le immagini desktop normalmente hanno una visuale orizzontale, quelle mobile per mantenere una buona visibilità dovrebbe avere un orientamento verticale.
Ora se vogliamo mostrare una immagine identica, ma più grande o più piccola in funzione del dispositivo non possiamo usando le immagini standard, che permettono solo di puntare a un singolo file sorgente.
Ma con HTML 5 possiamo usare gli attributi srcset e sizes per fornire diversi url di immagine addizionali per far scaricare un immagine adeguata al device:
Come funziona:
- Il browser verifica della larghezza del suo dispositivo
- Calcolo di quale sia la condizione tra la lista dell’attributo sizes ad essere vera
- Vede quale slot occupa l’immagine da media queries.
- Caricamento dell’immagine elencata nell’attributo srcset che più si avvicina alla dimensione della posizione (slot) scelta
1.4 Sfruttare la cache
Grandi file hanno bisogno di molto tempo e banda per il download, evitiamo di riscaricarli ogni volta. Per ogni file attualmente si fa una richiesta al server, più richieste si fanno al server più questo sarà carico di lavoro, con la cache lo teniamo leggero e pronto a lavorare per cose più importanti.
Alcune regole:
- Leverage browser caching: si utilizza per le risorse statiche e permette quando qualcuno visita la pagina di un sito, di scaricare dal server i file del tipo indicato salvandone una copia nel browser per evitare di scaricarle di nuovo se si dovesse tornare in quella pagina. è semplice da implementare, ecco un esempio per Apache:
- Local Databases: Se stiamo sviluppando una web app che usa un dataset che non cambia molto spesso perché non provare a salvare una copia di questi dati direttamente nel nostro browser? Sebbene siano largamente supportati dai browser ci sono molte librerie che si possono trovare online per rendere semplice lo sviluppo e l’interazione con il database, oltre al supporto cross browser.
1.4.1 PouchDb: Local DB
Il local database che ho personalmente usato con cui mi sono trovato davvero bene è PouchDb, è semplice da installare e funziona bene quasi dappertutto, inoltre c’è la possibilità di sincronizzare i dati con un nostro db online ogni tot.
Come funziona:
- NoSQL e JavaScript ready, se avete usato MongoDb sarà come tornare a casa, non dovrete imparare nulla.
- Scarica i dati e salvali in locale per non fare chiamate ridondanti
- Hai a disposizione le classiche operazioni CRUD (create, read, update, delete) tramite libreria usando delle API simili a Firebase / Mongoose
- Possibilità di sync con database online con CouchDb
Conclusione
Abbiamo imparato come ottimizzare un sito web possa essere importante per aumentare la platea, le conversioni ed i guadagni. Attraverso alcune semplici tecniche possiamo ottenere dei risultati straordinari, e le usiamo in fase di sviluppo possiamo anche “ottimizzare” i tempi.
Ora non abbiamo davvero più scuse per lasciare i nostri siti web in balia delle brutte abitudini! Noi ci rivediamo presto con il proseguo della serie su come ottimizzare i siti web.
Questo articolo fa parte di una serie:
- L’arte di ottimizzare i siti web — Parte 1 — Entry Level: https://medium.com/@ilasw/larte-di-ottimizzare-i-siti-web-parte-1-328378f8a9be
- L’arte di ottimizzare i siti web - Parte 2 -Medium Level: https://medium.com/@ilasw/larte-di-ottimizzare-i-siti-web-parte-2-medium-level-f48fb45fb202
