Come velocizzare un Sito Web

Che si utilizzi Wordpress, Joomla, Drupal o HTML puro, migliorare la velocità di un sito oggi è importantissimo per non perdere visitatori e per migliorare il posizionamento su Google. In questo articolo spiego come velocizzare il tuo sito adottando alcuni piccoli accorgimenti tecnici, alcuni semplici e altri un po' più complessi che richiedono una buona preparazione tecnica.

Anzitutto dobbiamo fare un'analisi oggettiva della velocità del sito e scoprire a cosa siano dovuti eventuali rallentamenti. A tal proposito t'invito a leggere il mio articolo "Test velocità Sito: misura la velocità del tuo Sito Internet!".

Come ho scritto nell'articolo citato, uno dei migliori strumenti gratuiti per misurare la velocità del tuo sito e individuare i "colli di bottiglia" è GTmetrix e, anche se è in inglese, è a questo tool che farò riferimento nelle spiegazioni che seguono.

La prima cosa che devi comprendere è che inseguire maniacalmente l'obiettivo del punteggio "A (100%)" non è la strategia giusta.

Migliorare la velocità del tuo sito è importante ma non dev'essere l'obiettivo principale. La fruibilità e la qualità dei contenuti sono la priorità.
Inoltre, raggiungere il punteggio massimo non è sempre possibile perché alcune limitazioni tecniche non sono sempre superabili in modo semplice e/o economico.

Cos'è GTmetrix

GTmetrix è uno strumento parzialmente gratuito che permette di analizzare una pagina Web per determinarne la velocità di caricamento e le cause di eventuali rallentamenti.

Ho scritto "parzialmente gratuito" perché GTmetrix offre alcune funzioni di base gratuitamente ma, per poterne sfruttare tutte le potenzialità, bisogna sottoscrivere un piano a pagamento.
Però le funzioni di base sono sicuramente sufficienti per un utilizzo non professionale.

L'unica cosa che ti consiglio vivamente è di fare la registrazione gratuita premendo il pulsante Sign Up perché in questo modo potrai almeno cambiare dei parametri importanti come, per esempio, la collocazione geografica del server di test (senza registrazione puoi utilizzare soltanto quello in Canada), il browser (Firefox o Chrome) e la banda, cioè la simulazione della velocità di connessione.

Gli esempi di questo articolo saranno creati utilizzando la registrazione gratuita.

GTmetrix è molto semplice da usare:

1. Vai su gtmetrix.com.
2. Esegui la registrazione gratuita tramite il pulsante Sign Up.
3. Inserisci l'URL della pagina Web che vuoi collaudare.
4. Modifica le Analysis Options.
5. Premi Analyze.
6. Attendi la scansione (qualche secondo se il server non è impegnato).
7. Esamina i risultati.

Come si usa GTmetrix

Nel dettaglio, una volta eseguita la registrazione gratuita, potrai modificare alcuni parametri premendo il tasto Analysis Options:

Alla data in cui scrivo, è possibile scegliere la collocazione del server di test tra USA, Cina, Inghilterra, India, Australia, Brasile e Canada.
Ovviamente sceglierai quello più vicino al server che ospita il tuo sito Web. Per esempio, se il server del tuo sito web è in Italia, il server GTmetrix più vicino è quello di Londra ed è questo che selezionerai dalla lista:

Non potendo fare il test da un server italiano, i risultati che vedrai saranno un po' peggiori rispetto alla realtà, cioè rispetto alla reale esperienza che ha un italiano che visita il tuo sito.
Ma a te, più che le misure "reali" e "assolute", interessano quelle "relative", cioè vedere se la situazione migliora o peggiora in seguito alle eventuali modifiche che farai sul tuo sito web per migliorare la sua velocità.

Puoi lasciare invariate le altre opzioni (browser e banda). Premi Analyze e attendi che l'analisi sia completata...

I risultati

Se non ci sono altre scansioni in coda, in pochi secondi apparirà il risultato della scansione divisa in due sezioni: un riepilogo generale delle prestazioni e, più in basso, le raccomandazioni (recommendation), cioè il dettaglio dei "punti deboli" della tua pagina Web e le possibili soluzioni. Diamo prima un'occhiata al riepilogo generale:

Performance Scores: in questo pannello puoi vedere la valutazione generale in percentuale della tua pagina Web, secondo i canoni di Google PageSpeed e Yahoo YSlow. I punteggi vanno da 0 a 100% e indicano la percentuale delle raccomandazioni, secondo Google PageSpeed e Yahoo YSlow, che la tua pagina rispetta.

Essendo Google il motore di ricerca più usato, probabilmente per te la valutazione secondo le raccomandazioni di Google PageSpeed saranno più importanti rispetto a quelle di Yahoo YSlow che, comunque, non sono molto differenti.

Page Details: questo pannello ci mostra le misurazioni totali, indicando il tempo di caricamento della pagina (Fully Loaded Time), la quantità di dati scaricati (Total Page Size) e il numero di richieste http (Requests).

Vicino a ciascuno di questi dati trovi anche una piccola icona che ti dice che:

questo valore è nella media delle misure eseguite sugli altri siti, con una tolleranza del ±5%,
questo valore è migliore della media,
questo valore è peggiore della media.

Le raccomandazioni

La lista dei possibili "punti deboli", cioè delle raccomandazioni, è lunga e spiegandoli tutti rischierei di generare confusione.
Ecco perché mi limiterò a descrivere quelli che, più frequentemente, sono causa di rallentamenti.

Anzitutto sappi che, purtroppo, non hai controllo su tutto. Alcune criticità possono essere dovute a siti di terze parti ai quali la tua pagina si collega e sui quali non hai alcuna possibilità di controllo e sui quali, quindi, non puoi migliorare se non adottando tecniche complesse alle quali accennerò più avanti, senza però approfondirle.

In modo analogo ai risultati generali, nelle raccomandazioni, troverai una lista di criticità con alcuni parametri. Vediamo le colonne della lista:

• RECOMMENDATION (raccomandazioni): in questa colonna sono elencati i suggerimenti per migliorare la velocità del tuo sito, in ordine decrescente di gravità (GRADE).
• GRADE (grado): qui puoi visualizzare un punteggio del tutto simile a quello visto per i risultati generali, espresso come voto (A, B, C, ecc...), come percentuale (0-100%) e con le stesse icone viste in precedenza per indicare la situazione rispetto alla media dei siti web, per quella particolare criticità.
• TYPE (tipo): la tipologia di criticità (JS, CSS, CSS/JS, SERVER, CONTENT, IMAGES).
• PRIORITY (priorità): indica la priorità con cui sarebbe meglio risolvere il problema, con tre livelli (HIGH, MEDIUM e LOW, cioè alto, medio e basso)

Nell'immagine c'è l'esempio per i parametri di Google PageSpeed ma il pannello relativo a Yahoo YSlow è del tutto simile.

Come puoi vedere nell'immagine, il sito di altraSoluzione, che ho utilizzato come esempio, ha degli ottimi punteggi un po' su tutto, con una grande quantità di A tranne tre punti in cui la valutazione è B.

Cominciamo col descrivere queste tre criticità e cerchiamo di capire perché non è possibile o non è conveniente migliorarle:

• Defer parsing of JavaScript (differisci l'analisi del JavaScript): questa linea m'informa che la mia pagina Web tenta di scaricare dei file JavaScript all'inizio, ritardando così il caricamento del codice HTML che realmente costruisce la parte "visibile" della pagina.
  In genere è meglio caricare le risorse "bloccanti" alla fine della pagina, in modo che il visitatore debba attendere meno per visualizzarla.
  Però ci sono alcuni casi in cui questo non è possibile oppure non è conveniente. Per esempio, se si usa un CMS (ed è il caso di questo sito), questi file JavaScript possono essere richiamati dai plugin sui quali non abbiamo controllo, non senza modificare il codice nei plugin, operazione molto poco conveniente.
  In altri casi, invece, è possibile intervenire perché magari abbiamo inserito noi quel codice e possiamo posticiparne il caricamento all'interno della pagina.
• Optimize the order of styles and scripts (ottimizza l'ordine degli stili e degli script): discorso simile al precedente che però riguarda la buona usanza di caricare i fogli di stile prima degli script. Anche in questo caso, non è sempre possibile intervenire in modo economicamente conveniente.
• Leverage browser caching (sfrutta il caching del browser): questa linea ci raccomanda di sfruttare la cache del browser per diminuire i tempi di caricamento delle risorse già scaricate dal visitatore.
  Per esempio, se utilizziamo un unico CSS per tutto il sito e il visitatore ha già visitato una pagina, visitandone un'altra non deve scaricare di nuovo il CSS perché il browser ce l'ha già nella sua memoria locale.
  È possibile farlo tramite le direttive ExpiresDefault e ExpiresByType di Apache inserite nel file .htaccess, come in questo esempio:
  

  ExpiresDefault "access plus 1 week"
  ExpiresByType image/gif "access plus 1 month"
  ExpiresByType image/png "access plus 1 month"
  ExpiresByType image/jpg "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  

  Purtroppo, possiamo agire soltanto sulle risorse scaricate dal nostro sito, non su quelle esterne.
  Per esempio, se utilizziamo Analytics e viene quindi scaricato il file https://www.google-analytics.com/analytics.js, non potremo gestire le direttive Expire... sul dominio google-analytics.com.
  L'unico modo per "scavalcare" questo problema è creare una copia locale del file https://www.google-analytics.com/analytics.js (da aggiornare frequentemente tramite un "cron job") e modificare l'indirizzo della risorsa in qualcosa di simile a https://www.miositoweb.it/scripts/analytics.js.
  Ma, così facendo, anche se avremo raggiunto lo scopo di migliorare il punteggio di GTmetrix per questa voce, non è detto che avremo effettivamente migliorato le prestazioni del sito perché:
  
  1. Non è detto che il nostro sito sia più veloce delle eccellenti CDN di Google sulle quali giace il file analytics.js
  2. La cache del browser conterrà quel file soltanto se il visitatore lo avrà già scaricato visitando il nostro sito e soltanto prima della scadenza della cache. Non ci sarà alcun beneficio alla prima visualizzazione mentre, se lasciamo il file di Google, visto che è utilizzatissimo, ci sono buone probabilità che il visitatore l'abbia già scaricato visitando un altro sito che l'utilizza.
  3. Il file https://www.google-analytics.com/analytics.js, nel momento in cui scrivo, ha un "expire time" impostato da Google di 2 ore, segno che viene aggiornato frequentemente. Aumentando questo tempo rischiamo di far girare sul computer del visitatore una copia non aggiornata di questo prezioso tool.
  Quindi, probabilmente, è molto meglio accontentarsi di un punteggio più basso su GTmetrix.

I miglioramenti più semplici

Ok, mi rendo conto che queste prime tre raccomandazioni non erano il massimo della semplicità e che la loro comprensione non è alla portata di tutti.
Le ho affrontate per prime soltanto perché erano le uniche "carenti" nell'esempio relativo alla Home Page di altraSoluzione.

Ora ne descriverò altre che possono essere affrontate anche da persone meno esperte e che possono essere risolte semplicemente imparando a lavorare con un po' di metodo:

• Avoid bad requests (evita le richieste errate): questo tipo di problema nasce quando la nostra pagina web contiene link a risorse non esistenti e generano un errore 404 (non trovato).
  Per esempio, se abbiamo inserito un'immagine con il tag <img src="/immagini/foto1.jpg"> ma per qualche motivo il file foto1.jpg non esiste più, oppure è stato rinominato o spostato, allora il browser tenterà di accedere a quella risorsa "scomparsa" rallentando il caricamento fino alla restituzione dell'errore 404 da parte del server.
  È buona norma controllare sempre i link sulla nostra pagina, quelli interni ma soprattutto quelli esterni, sui quali non abbiamo controllo.
  Su questo argomento ti suggerisco la lettura del mio articolo "Broken link: verifica i link del tuo sito!".
• Optimize images (ottimizza le immagini): le immagini sul tuo sito devono sempre essere ottimizzate, cioè compresse dove possibile e ridimensionate alle dimensioni esatte del "riquadro" in cui dovranno apparire, senza forzarle con i tag width e height che devono essere usati soltanto per soddisfare il prossimo punto.
  Anche su questo argomento ho scritto un articolo dettagliato: "Come creare le immagini per un sito web".
• Specify image dimensions (specifica le dimensioni dell'immagine): è raccomandabile, dove possibile, indicare le dimensioni delle immagini tramite i tag width e height.
  Per esempio: <img src="/immagini/foto1.jpg" width="640" height="480">.
• Serve scaled images (servi immagini scalate): stesso discorso affrontato nel punto precedente, con particolare riferimento alle dimensioni in pixel delle immagini.

Chiaramente, anche scegliere un hosting con prestazioni proporzionate al traffico che il sito deve gestire, è di grande aiuto nel miglioramento della velocità del tuo sito Web.

A tal proposito, io in genere raccomando ai miei clienti gli hosting di ServerPlan che, per un prezzo prezzo leggermente maggiore di altri famosi più economici, offrono prestazioni nettamente migliori.

Il coupon "ALTRASOLUZIONE35", ti agevola con uno sconto del 35% per il primo anno.

Time To First Byte (TTFB)

Un'attenzione particolare dev'essere rivolta al TTFB (Time To First Byte), cioè il tempo che passa tra la richiesta del browser e il primo byte di risposta dal server, prima ancora che il browser inizi a ricevere il codice della pagina Web richiesta e a "comporla" per visualizzarla.

Questo tempo è visibile nel pannello "Timings" ed è un indicatore della velocità del server:

Nel caso del sito di altraSoluzione questo valore è di poco più di circa un terzo di secondo, che è un tempo buono ma sicuramente migliorabile.
Però mi è capitato di vedere, su altri siti, tempi anche di 4 secondi o più!

Questo vuol dire che, dal momento della richiesta, il server impiega 4 secondi solo per iniziare a inviare i dati per la costruzione della schermata da visualizzare sul browser!

Un TTFB eccessivamente lungo può essere causato da molti fattori, tra i quali un server particolarmente lento oppure una pagina Web generata da un CMS (Wordpress, Joomla, Drupal, ecc...) molto, troppo complessa e che richiede tempi di elaborazione lunghi da parte del server.

Non mi addentrerò nei dettagli di questo tipo d'indagine ma voglio dirti che in molti casi è stato sufficiente disabilitare uno o più plugin particolarmente pesanti (e spesso inutili) per migliorare anche di uno o due secondi.

Quindi, la raccomandazione generale è di non utilizzare plugin che non siano indispensabili e di vincere la tentazione di installare nel tuo CMS tutti gli "add-on" che trovi nelle diverse librerie solo perché sono gratuiti.

Conclusioni

Per il momento mi fermo qui.

Ci sono tante altre voci nei suggerimenti di GTmetrix ma, a parte il fatto che per ciascuna voce c'è una spiegazione esauriente sullo stesso GTmetrix, non voglio appesantire la lettura di questo articolo "snocciolando" nel dettaglio tutti i possibili miglioramenti.
Volevo soltanto invogliarti a migliorare la velocità del tuo sito e fornirti uno strumento per individuare e correggere almeno i problemi più frequenti e semplici da risolvere.

Grazie per avermi letto fin qui!

Fabio Donna