Velocizzare il caricamento del sito web è importante per ottenere un posizionamento migliore su Google? Questo esperimento di ottimizzazione vuole verificare sul campo cosa accade ad un sito web lento quando si porta il suo score di Google PageSpeed da un misero 45 al valore più alto, il tanto ambito 100/100.

Il sito in questione è proprio il mio www.ivanodibiasi.com, da quando mi sono fatto rifare la grafica del sito non ho mai avuto un attimo di tranquillità per verificare che tutto fosse a posto, che le immagini fossero ottimizzate, che i css fossero leggeri ecc.. Tutte quelle paranoie da nerd che hanno un po tutti i SEO.
Quando ho scoperto che il Google PageSpeed Insights mi indicava come sito web estremamente lento ho colto la palla al balzo per fare questo esperimento e mi sono chiesto “Cosa accadrà alle visite del mio sito se riesco a portarlo ad una velocità di 100 su 100?” ecco cosa ho fatto per velocizzare il mio sito web.

I problemi di velocità dei siti web secondo Google

Google ha varie metriche per dire se un sito sia lento o meno e si aspetta che il webmaster ed il sistemista facciano tutto il possibile per rendere il sito ed il server veloci, reattivi, ottimizzati per garantire all’utente una User Experience (per i nerd di settore UX) di alta qualità. Su questo non posso che essere d’accordo, una buona UX influisce drasticamente su tanti fattori misurabili nelle statistiche, utenti di ritorno, pagine viste per utente.

Di seguito vi elenco i problemi più importanti e poi vi do alcune dritte su come risolverli:

  1. Google ritiene che un sito sia da considerare lento se la prima chiamata HTTP, quindi quella che fornisce al browser l’HTML della pagina, non basti a far renderizzare (disegnare) al browser almeno la prima schermata visibile per l’utente (definita Above the fold)
  2. Google verifica che il server sia ben configurato e che risponda nel minor tempo possibile alla chiamata del browser.
  3. Google vuole che le risorse esterne come CSS e JS non pesino troppo e non rallentino la visualizzazione del sito
  4. Google vuole che non siano inviati dati inutili al browser quindi richiede l’utilizzo della browser cache.
  5. Google odia profondamente i JavaScript che non permettono di visualizzare l’above the fold prima che sia stato scaricata tutta la pagina (anche la parte non visibile)
  6. Google odia gli sprechi di banda, perchè inviare un’immagine di 100kb se ottimizzandola potrebbe pesare 10k ed essere praticamente identica?
  7. Google si chiede: “Perchè caricate decine e decine di script che non servono ai fini della visualizzazione della prima schermata?” date priorità ai contenuti visibili.
  8. Google vorrebbe che il server, invece di inviare tutto così com’è lo facesse utilizzando la compressione gzip per fare prima e non sprecare banda, tanto i browser la supportano tutti
  9. Il sito potrebbe essere velocizzando caricando i file JS e CSS da un domino diverso, in questo modo il browser può scaricare iù file contemporaneamente (CDN Content Delivery Network)
  10. I file CSS, JS, HTML possono essere compressi ancor prima di utilizzare GZip, basta utilizzare il Minify e togliere spazi e formattazioni inutili

Come si risolvono i problemi di velocità dei siti web

  1.  Per fare in modo che tutto l’HTML necessario al rendering venga caricato nella prima chiamata bisogna individuare tutti gli stili CSS che vengono utilizzati dall’HTML visibile nella prima schermata del sito, tagliarli dal file CSS in cui si trovano e metterli nell’header della pagina, direttamente nel codice, nel tag <head> e nell’apposito tag <style>.
    Quando lo mettete nell’head ricordate prima di fare il Minify, ci sono tanti siti online che vi permettono di fare il minify dei CSS, JS e HTML.
  2. La lentezza del server è un problema sistemistico quindi rivolgetevi a chi vi gestisce il server e chiedetegli quale sia il problema, potrebbe dipendere da tante cose. Ad esempio dalla latenza di rete se avete un server all’estero, oppure da una CPU inadeguata, poca memoria.
    Prima di rompere le scatole al sistemista però sappiate che il server potrebbe rispondere lentamente anche perchè il vostro sito web non è ben programmato, magari fa troppe query al database e perde tempo a generare la risposta per il browser. Se usate WordPress vi consiglio di staticizzare le pagine web con un sistema di caching come ad esempio l’ottimo W3 Total Cache impostando la cache Disk Enanched che in pratica fornirà le pagine direttamente dal disco come se fossero in HTML vecchio stile, quindi velocissime.
  3. Per velocizzare il caricamento dei CSS e JS utilizzate la versione minified (potete fare il minify dei file direttamente su siti specifici) e se vi è possibile provate a metterli su una CDN (Content Delivery Network).
    Io utilizzo un metodo rudimentale per avere una CDN low cost, utilizzo il servizio Aruba Cloud Servers, ho creato un server cloud con CPU ridicola ma su banda 100Mbit ed abbastanza spazio disco.
  4. Per evitare che l’utente scarichi sempre le stesse risorse anche se le ha già viste in precedenza, abilitate la browser cache sul vostro server. Per farlo chiamate il vostro sistemista oppure, se volete farlo da soli, seguite le informazioni di Google qui https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
  5. Eliminare i file Javascript che non servono per la visualizzazione di pagine specifiche. Spostare a fondo pagina il caricamento di Javascript che non servono alla visualizzazione dell’above the fold.
  6. Le immagini possono essere ottimizzate per il web quindi fatelo. E’ possibile risparmiare centinaia e centinaia di Kb per ogni singolo utente connesso, se il vostro sito cresce di visite nel tempo e non ottimizzerete le immagini, prima o poi il sito avrà dei colli di bottiglia e la crescita di visite si bloccherà quando saranno raggiunti i limiti fisici del server e della banda. Avere un sito ottimizzato, con immagini ottimizzate vi garantirà di poter servire più utenti contemporaneamente. Per ottimizzare le immagini PNG io utilizzo il software gratuito PNGGauntlet (per pc e mac) che potete scaricare qui
  7. Per dare priorità ai contenuti visibili è fondamentale strutturare l’html del sito ed il caricamento di CSS e JS in tale direzione. Bisogna in pratica mettere in secondo piano il caricamento di risorse che non servono per la visualizzazione dell’above the fold. Mettere in secondo piano significa evitare di fare preload ed inclusioni di file nell’header se non servono nell’immediato.
  8. Abilitare la compressione GZip sul server. Questo permette di inviare la pagina web zippata al browser. Qui ci sono le istruzioni su come fare https://developers.google.com/speed/docs/insights/EnableCompression
  9. Utilizzare un server secondario Aruba Cloud o quello che preferite e metteteci i file JS, CSS e le immagini per velocizzare il caricamento del vostro sito web. Ovviamente cambiate i percorsi alle risorse nel codice HTML del sito web per farli puntare al nuovo dominio. Esistono servizi specifici di CDN ma nessuno è abbastanza economico, io li ho scartati tutti.
  10. Salvate una copia dei vostri file CSS e JS sul vostro PC, poi utilizzate i vari servizi gratuiti online per fare il minify di JS, CSS e nel sito utilizzate le versioni “minifate”, risparmierete qualche Kb per ogni utente collegato, fa sempre bene alla velocità del sito.

Ho ottimizzato il mio sito web punto per punto ed ecco il risultato di Google PageSpeed

PageSpeed Insight SEO Cube

Questo è il PageSpeed lanciato sulla pagina di www.google.it che ha solo un LOGO + CASELLA DI TESTO + 2 BUTTONS

velocita sito google

E questo è il PageSpeed lanciato su www.ivanodibiasi.com, sito completo con JS, CSS ricchi ed immagini

page speed insight google

Volete sapere cosa è accaduto nelle SERP nei 15 giorni successivi? Praticamente NULLA, la velocità del sito web non ha alcuna influenza concreta nei posizionamenti nelle SERP ma devo dire che invece ho notato i seguenti miglioramenti:

  1. Più utenti di ritorno perchè il sito si naviga con piacere
  2. Più pagine viste per ogni singolo utente

Se il vostro sito web vive di PageViews vi consiglio vivamente di fare le stesse ottimizzazioni che ho fatto io, migliorerete notevolmente la User Experience, avrete più lettori assidui e sopratutto una profondità della visita decisamente più interessante.