Velocizzare WordPress con CloudFlare CDN e W3 Total Cache del 76%, case study

Velocizzare WordPress con CloudFlare CDN e W3 Total Cache, case study

Visto che la velocità è sempre più importante nel web, mi sono chiesto: qual è il metodo più semplice, rapido ed economico per velocizzare il caricamento del proprio blog?

Sicuramente la distribuzione dei contenuti tramite una simil CDN, nello specifico CloudFlare, porta ad avere un netto miglioramento con il minimo sforzo, almeno fin quando si parla di server condivisi. Ah dimenticavo, senza spendere nulla!

L’idea

Il mio blog risiede attualmente su hosting condiviso BlueHost, con server in America. Il numero medio di visitatori unici giornalieri su tutto il dominio robertoiacono.it è di 1700, e (mannaggia a me :)) è anche bello pieno di immagini, quindi non proprio leggero per un server condiviso.

Il tempo di caricamento misurato con Pingdom (ovviamente i risultati sono molto variabili, quindi ho cercato di prendere un valore medio) sulla homepage il giorno 14 Febbraio 2013 è di 4.23 secondi. Sono tanti?

Sicuramente non sono pochi! Un buon valore si dovrebbe aggirare attorno ai 2 secondi.

Cosa posso fare per far diminuire questo tempo?

  • Se il server deve gestire tutto il traffico da solo, quindi con una buona dose di stress, sarà meno performante rispetto ad un server uguale ma poco stressato. E allora, perchè non far distribuire i contenuti statici (immagini, JS, CSS) da altri server alleggerendo il mio? Con CloudFlare, si può 🙂
  • Visto che il blog è in italiano, il target di riferimento sono gli italiani… e siccome il server è in America, ogni volta che un lettore vuole leggere una pagina del mio blog, parte una richiesta dall’Italia, attraversa (a nuoto) l’oceano, arriva in America, prende i contenuti, riattraversa l’oceano (sempre a nuoto) e ritorna in Italia. Questo, pur parlando di millisecondi, introduce un leggero aumento del tempo di caricamento rispetto ad avere un server in Italia. E allora, perchè non far distribuire i contenuti statici da un server che sia il più vicino possibile al lettore? Con CloudFlare, si può 🙂
  • Siamo sicuri che tutti gli utenti che navigano sul blog, e che quindi richiedono delle risorse al server, siano utenti reali? Oppure ci potrebbero essere anche degli utenti malintenzionati (quindi inutili, oltre che pericolosi)?
    Sicuramente ci saranno anche questo tipo di utenti. Rubano delle risorse preziose agli altri utenti, per cui si può agire anche qui. Come? Filtrando gli utenti malintenzionati. Con CloudFlare, si può 🙂

Per cui, cosa ho fatto?

Il giorno 14 Febbraio ho semplicemente utilizzato il servizio gratuito offerto da CloudFlare. sia per la sicurezza che per li distribuzione dei contenuti simil CDN, come ho scritto nella sezione Come usufruire del servizio di CloudFlare.

Le aspettative

Che risultati mi aspetto di avere?

Da quello che ha detto Matthew Prince, CEO di CloudFlare, mi aspetto:

  • diminuzione del tempo di caricamento, pari a circa il 50% di quello attuale.
  • risparmio di banda del 60%.
  • risparmio delle richieste del 65%.

Poi mi aspetto anche che diminuisca il Tempo trascorso per il download di una pagina (lo trovi dal Google Webmaster Tools), tempo medio impiegato dallo spider di Google per scaricare una pagina (tiene conto anche del tempo di risposta del server).

Infine, mi aspetto anche di ricevere più traffico dai motori di ricerca (direttamente o indirettamente) se è vero che Google ne tiene conto, e comunque dovrei avere una minor frequenza di rimbalzo nei primi secondi.

Dati reali

Ecco cosa è successo realmente analizzando l’homepage del blog con Pingdom Tools:

Comparazione prima e dopo

Prima di utilizzare CloudFlare, ciò che rallentava il caricamento della home erano le immagini (1), causato principalmente al tempo di connessione (in blu) del browser al server (che nel frattempo stava inviando altre immagini).

Con CloudFlare le immagini vengono caricate immediatamente (2), con il ritardo di connessione del browser al server davvero modesto. In questa situazione, ciò che rallenta il tempo di caricamento del blog sono i pulsanti social (3).

In breve:

Tempo di caricamento cloudlfare

Il tempo di caricamento è migliorato del 56%, passando da 4.23 secondi a 1.86 secondi, solamente utilizzando CloudFlare! Strepitoso!

Mentre la dimensione della pagina è aumentata di circa 0.2 MB (probabilmente dovuta ai servizi utilizzati da CloudFlare, come Rocket Loader, che permette il caricamento asincrono degli scripts).

Nel dettaglio:

dati della homepage

Il tempo speso per caricare le immagini è diminuito, dall’84% iniziale al 58% con CloudFlare, un risparmio del 26% solo per le immagini!

Il tempo speso per caricare i contenuti del blog (dominio + immagini + CSS + JS) è passato da 89% a 57%! (essendo un valore percentuale, la differenza verrà ovviamente spalmata sui plugin sociali, che avranno un maggior impatto sul tempo di caricamento globale).

Il numero di script è diminuito utilizzando CloudFlare, probabilmente dovuto alla minificazione e fusione di più file in uno unico.

Dai dati di Google Analytics, ottengo questi risultati calcolati su 5 giorni:

Dati visitatori

Metto in evidenza alcuni risultati:

  • Computer – Visite: -6.86%, ci può stare. Probabilmente dovuti all’esclusione degli utenti malintenzionati.
  • Smartphone – Pagine/Visita: +6.51%, da 1.64 a 1.75, buon valore, vuol dire che il lettore riesce a navigare in maniera più agile rispetto a prima.
  • Smartphone – Durata media visita: +48.19%, da 2.04 min a 3.03 min, questo è un valore che fa riflettere sull’importanza della velocità sui mondo mobile. Evidentemente prima l’utente appena accedeva al blog, non riusciva a vedere i contenuti in un tempo ragionevole e se ne andava. Una durata maggiore non vuol dire necessariamente che l’utente visiti solo quella pagina prima di uscire dal sito.
  • Frequenza di rimbalzo: è leggermente negativa per entrambi, mi sarei aspettato qualcosa meglio, sicuramente un guadagno. Evidentemente, la mia frequenza di rimbalzo è dovuta ad uno scarso sistema di linking interno dei contenuti piuttosto che alla velocità del blog, infatti è molto alta, attorno al 65%.

Sorgente e tempi di caricamento medi

Ed ecco il risultato che non mi aspetto: -4.60% da Google! È possibile che sia dovuto agli utenti malintenzionati? Sì, ma non pensavo arrivassero da Google…

Mentre ottimi i risultati ottenuti da Google Analytics per quanto riguarda i vari tempi percepiti dagli utenti (quindi non dagli spider di Google).

Non posso dire lo stesso per il Tempo trascorso per il download di una pagina, quindi rilevato dallo spider di Google:

tempo spider

Infatti il tempo medio (da Google Webmaster Tools) è passato da 0.891 sec a 1.490 sec! (questo non va bene, meno è, meglio è). Penso sia proprio questo il dato utilizzato da Google per il posizionamento, ma preferirei attendere il parere di persone più esperte di me in questo campo.

A cosa può essere dovuto? Penso alla risposta del server più lenta (in disaccordo con quanto riportato con Analytics, ma è l’unica cosa che trovo sensata). Hai idee in merito?

Un valore simile è stato riscontrato analizzando il blog con il servizio My Pingdom (che tiene sotto osservazione le performance del proprio blog), passando da una media di 0.981 sec a 1.672 sec, un peggioramento del 70%!

Infine ecco le statistiche di CloudFlare nei primi 5 giorni di utilizzo:

cloudflare stats

Da notare:

  • 339 utenti malintenzionati rilevati e bloccati, ovvero il 4% degli utenti unici globali, guarda caso è quasi uguale al traffico che ho perso da Google.
  • 7 GB di banda risparmiata (il 58%)!
  • 186.451 richieste al server risparmiate (il 66%)!

Che numeri!

CloudFlare + W3 Total Cache

Di default CloudFlare non gestisce la cache del contenuto HTML (pagine, post, widget, ecc), ma solamente delle immagini, CSS e JS e altri file statici. Da qui, si può capire che conviene gestire la cache del contenuto HTML. Per far ciò, consiglio di utilizzare il plugin W3 Total Cache, come ho descritto nell’articolo W3 Total Cache + CloudFlare.

Dati reali

statistiche w3tc-cloudflare

Ho introdotto W3TC il 20 Febbraio. Il numero di richieste sono aumentate, ma la cosa interessante, molto interessante, è che il tempo di caricamento è diminuito del 43%, da 1.72 secondi a 0.984 secondi.

A quanto pare ora sono più veloce degli altri 89% siti testati tramite pingdom 🙂

Con W3TC + CF, il tempo tempo trascorso per il download di una pagina si è assestato attorno a 1.36 secondi, un guadagno del 9% rispetto ai 1.49 secondi di prima, ma comunque un peggioramento del 52% rispetto al valore iniziale di 0.891 secondi.

Invece, ho notato tramite il servizio My Pingdom che il tempo di download della pagina (che prima era simile a quello fornito da Google) è sceso notevolmente:

grafico Tempo Download

Ora il tempo di download della pagina medio è migliorato del 65% rispetto al caso con CloudFlare, passando da 1.672 secondi a 0.579 secondi. Ottimo! 🙂

Dati finali

In conclusione ecco i dati che ritengo più interessanti tra il caso di un blog classico (pre-CloudFlare) ed il caso con W3 Total Cache + CloudFlare.

dati finali

Il tempo di caricamento è diminuito del 76%, passando da 4.23 secondi a 0.984 secondi!

Le richieste sono aumentate a causa dell’introduzione di W3TC, di CloudFlare e ad un plugin aggiunto per la gestione dei banner (quindi che rallenta un pochino, altrimenti il risultato sarebbe stato ancora migliore ;)).

Mentre il tempo di download di una pagina, dai dati del Google Webmaster Tools, è peggiorato del 52%, passando da 0.891 secondi a 1.36 secondi.

Conclusioni

Queste sono le mie aspettative iniziali che sono state soddisfatte:

  • il tempo di caricamento è diminuito di più del 50% previsto, toccando il 56% solo con CloudFlare ed arrivando grazie a W3 Total Cache al 76% in meno :).
  • il risparmio di banda previsto era del 60%; io ho ottenuto un risparmio del 58%.
  • il numero delle richieste risparmiate era previsto del 65%; ho ottenuto un risparmio del 66%.

Queste sono le mie aspettative iniziali che non sono state soddisfatte:

  • il tempo trascorso per il download di una pagina è peggiorato del 52% anzichè migliorare.
  • il traffico proveniente dai motori di ricerca. Questo valore è diminuito del 4.60% (a quanto pare dovuto all’esclusione dal blog degli utenti malintenzionati), mentre mi aspettavo un aumento, anzi, un bell’aumento. Peccato 🙁

Nonostante il netto miglioramento del caricamento del blog, ho una preoccupazione: il peggioramento del tempo trascorso per il download di una pagina, può influenzare il posizionamento (in negativo)? Penso di sì, ma attendo un tuo parere. Attualmente, non ho riscontrato nessun peggioramento di posizionamento in SERP.

Che dire, questi sono i miei dati e, come puoi vedere, ho migliorato notevolmente le prestazioni del mio blog, senza spendere né tempo né tantomeno denaro. Non capita tutti i giorni 🙂

Probabilmente questo articolo sarà l’articolo che consiglierò come primo step a chi ha bisogno di velocizzare il proprio blog o sito web (e spero che lo farai anche te 😉 ).

Che ne pensi? Hai avuto esperienze in merito? I tuoi dati sono migliori o peggiori? Commenta qui sotto…

Sponsor

Vhosting
themeforest