La velocità nei siti web

Pubblicato il 18/03/2017

Ovvero: come velocizzare il proprio sito web e vivere felici e contenti!

La velocità di caricamento di una pagina web è sempre stato uno dei parametri fondamentali determinanti la qualità della stessa.

Avere, infatti, una pagina che dopo 4-5 secondi resta ancora bianca, in attesa del caricamento è un sicuro indice di abbandono da parte degli utenti. Ricerche in tal senso dimostrano come dopo 2 secondi in cui non succede nulla nel sito facciano scappare, inesorabilmente, gli utenti verso altri lidi.

Se, a questo innegabile requisito, si aggiunge il fatto che Google stia spingendo, in un’altra delle sue “crociate” per il Web fatto bene, la velocità come uno dei parametri di cui tiene conto, a quanto dice, per il posizionamento, si può capire l’ansia che sta permeando tutti gli operatori web (e di convesso, i clienti finali) verso la creazione di pagine il più veloci possibili.

 

Bene: e come si velocizza allora un sito web?

Semplice no? Ora vi dico il trucchetto e zack, fatto!

Ecco, no, non è così semplice.

Innanzitutto partiamo da un concetto basilare: una pagina web, per esser veloce deve essere leggera. Su questo non ci piove. Se mettessimo su un server un sito consistente in un unica pagina bianca, senza stili né immagini e con solo scritto “ciao mondo”, avremmo, fatti salvi errori alcuni fattori, una pagina velocissima, una scheggia indecente che supererà a grandissimi voti tutti i test di velocità.

Bene: e che ci faremmo con un sito così?

La verità è che ogni sito web, ogni singola pagina, ha delle caratteristiche proprie, esclusive, dettate dalla strategia e dall’obiettivo e che, non sempre, questi sono compatibili con la velocità.

Un sito di impatto grafico, per semplificare il discorso, DEVE avere delle immagini in alta qualità. Alta qualità che si traduce in rallentamenti nel caricamento. Non si scappa: o si sceglie la qualità o la velocità pura.

È un po’ come le autovetture: se abbiamo bisogno di una macchina veloce, non possiamo pretendere che possa trasportare 30 tonnellate di cemento, se necessitiamo, viceversa, di un camion capiente, non possiamo pretendere che faccia i 300 Km/h.

Ciò che possiamo fare, però, è ottimizzare; se ci serve un veicolo veloce con un discreto carico (che so, le valigie per 4 persone) ci sono delle station wagon validissime; se dobbiamo trasportare dei pacchi non ingombranti e mediamente pesanti possiamo scegliere tra i furgoni più efficaci.

E, soprattuto, possiamo pretendere che chi li costruisca, lo faccia al meglio, ottimizzi il carico e i componenti meccanici in base alle richieste degli utenti.

Fatta tale doverosa premessa, vediamo come ottimizzare un sito web affinché sia il più veloce possibile.

 

Regole generali per una buona velocità di caricamento

Prima di vedere degli aspetti secondari occorre iniziare da quelli fondamentali:

ottimizzate il codice server side (php, asp, ruby etc etc);

ottimizzate le chiamate al database;

ottimizzate i tempi di risposta del server;

Tali tre norme sono la base per una buona, se non ottima, velocità di caricamento pagine; conosco “sviluppatori” che si preoccupano dei dettagli infinitesimali, come ad esempio il risparmio di pochissimi byte nei css/js, che basano il sito web su piattaforme lentissime, che non hanno ottimizzato i database e che, peggio, non sanno proprio di cosa si stia parlando.

È necessario che il codice sorgente sia scritto bene. Se utilizzate un CMS open, probabilmente lo è, nella versione base almeno. Se vi aggiungete plugin, ecco, il rischio che lo sia meno è notevole. E più plugin si aggiungono peggio è il risultato.

Primo consiglio pratico: evitate di inserire troppi plugin, specialmente quelli inutili; ad esempio: che senso ha caricare un plugin in wordpress per il codice analytics? A cosa serve far fare una chiamata in più al server per una riga di testo che può esser tranquillamente inserita nel template?

Capiamoci: tale plugin da solo non fa certo danni. Se ne usate 100, beh, il rischio che il server risponda lentamente esiste.

Se, viceversa, siete sviluppatori, usate le buone norme di programmazioni; ottimizzate le chiamate al database e soprattutto ottimizzate il database stesso; inserite gli indici! Non scendo nel dettaglio perché il discorso rischia di diventare troppo lungo. Però, capiamoci: è impossibile o quasi velocizzare un sito programmato male. Tenetene conto!

 

sfruttate la cache del server;

Soprattutto se il vostro sistema necessita di chiamate pesanti, di calcoli complessi, una buona idea è quella di utilizzare la cache server per far fare le operazioni una volta e mostrarle n volte. Anche qui: discorso lungo e non poco. In linea di massima, cercate di far fare meno calcoli possibili al processore cercando di “staticizzare” (brr che brutto termine) le pagine richieste, soprattutto quelle più frequenti.

 

ottimizzate e comprimete le immagini

o meglio, cercate il giusto compromesso tra qualità e peso delle stesse. Come già detto occorre capire qual è il limite minimo di qualità richiesto; è inutile inserire immagini di 5000 pixel di lato se l’utente medio vede il sito con uno schermo di 800, 1000 o 1500 pixel. Non si coglierebbero i dettagli caricati e il sito ci metterebbe moltissimo a caricarsi. Stesso discorso può esser applicato alle immagini di *contorno*: è inutile caricare delle icone larghe 400 pixel se la loro funzione è quella di esser inserite in un box di 32.

Comprimete il più possibile fino ad arrivare al limite minimo di qualità richiesto dagli obiettivi; se il sito si rivolge a un target in cui l’immagine conta, utilizzate una compressione bassa, bassissima; se, viceversa, è rivolto ad un target diverso, più orientato al contenuto, potete comprimere molto di più.

 

utilizzate i sistemi di caching e di compressione dei client:

tutti i più moderni browser dispongono di sistemi di cache e di compressione utilissimi per velocizzare i tempi di risposta: sfruttateli. Se non avete idea di come fare, cercate mod_deflate, mod_expires e mod_headers per il web server apache, o, se siete fortunati e ne avete la possibilità, utilizzate mod_pagespeeds.

Tali moduli permettono, appunto, di scegliere quali file inviare in cache, per quanto tempo e con quale compressione farlo nonché danno la possibilità di attivare la compressione delle pagine.

 

utilizzate le versioni minimizzate di javascript e

se usate script già pronti, di solito si riconoscono dal .min nel nome (esempio: jquery.js è la versione di sviluppo, jquery.min.js è quella minimizzata). Se il css o il javascript lo scrivete voi usate uno dei tanti tool per renderli minimizzati. O, nel caso estremo, fatelo a mano: “basta” togliere tutti spazi inutili ed i commenti (e, se siete avventurosi, sostituire i nomi delle variabili con altri più corti… :P). Il risparmio in termini di tempo può esser significativo (soprattutto se avete 10-20 script caricati).

A tal proposito…

 

usate solo script e css necessari!

Ho visto siti caricare 100-150 javascript, magari con 4-5 frameworks diversi per poter fare degli effetti stupidi, fattibili con 2 righe di testo. Prestateci attenzione, diamine!

 

caricate in modo asincrono i contenuti

in special modo per pagine lunghe e complesse, può essere una buona idea caricare prima i contenuti visibili (quelli cosiddetti above-the-fold) e poi gli altri. In tal modo ridurrete di molto il tempo necessario: l’utente vedrà la prima parte subito e, contestualmente darete tempo al sito di caricarsi tutto.

 

evitate i contenuti inutili

togliete le parti non necessarie dal template, ripetute e ridondanti; se, ad esempio, avete una pagina di categoria con un rimando al dettaglio delle singole pagine, non caricate *tutto* il contenuto per poi nasconderlo; se inviate un utente alla pagina di contatto, non è necessario mostrargli, che so, le pagine correlate. A parte la velocità minore correte, en passant, il rischio di perdere la conversione a cui tanto aspirate.

 

Per terminare

velocizzare un intero sito web o una singola pagina è un lavoro non banale, è quasi un’arte. Non ci sono troppe scorciatoie: occorre progettare tutto il sito bene, partendo dagli obiettivi e dalle necessità strategiche.

Non ci sono trucchetti veloci!

Ci sono accortezze, attenzioni, certo, ma da sole non fanno molto. Se stavate cercando un plugin per wordpress, mi spiace, ma non son riuscito ad aiutarvi; ce ne sono certo ma, come avrete capito, sono dei placebo o poco di più.

Il trucco, per così dire, è progettare bene il sito all’inizio; se lo avete fatto avrete risolto il 90% dei problemi.

Ah, per finire poi, diffidate dei tools online. Sono, certamente, indicativi ma hanno il limite degli strumenti automatici: danno un numero senza però contestualizzarlo alla situazione.