velocizzare wordpress : wprocket cloudflare studiopress siteground

Se il tuo blog wordpress è troppo lento ed il caricamento di una singola pagina supera abbondantemente i 10 secondi allora ti consiglio di soffermarti qualche minuto a leggere questa guida su come velocizzare wordpress usando wp rocket, cloudflare, studiopress e siteground.

Ti mostrerò cosa ho fatto io in prima persona su questo blog per renderlo più performante, veloce e soprattutto appetibile ai motori di ricerca, perché forse non lo sai ma Google non ama i siti lenti.

Il punto di partenza

Purtroppo il punto di partenza di pensando.it era abbastanza critico, questo blog ha subito nell'ordine:

• Migrazione di CMS (da dblog a wordpress)
• Migrazione di Hosting Provider e relativo Sistema Operativo (Da Aruba Windows a Netsons Linux)
• Vari cambi look ossia cambi del template grafico
• Molti plugin installati / rimossi / aggiornati

Considera che ha la tenera età di 10 anni, circa 500 articoli pubblicati ed oltre 1600 commenti.

Le  visite uniche giornaliere sono circa 1.100 con picchi che arrivano ed a volte superano i 1.500 accessi unici giornalieri, che fanno circa 30.000 / 35.000 visite uniche mensili.

Questi i dati di google analytics per l'ultimo anno

E questi i dati ricavati da un tool di mia invenzione (nodelog) che mostra gli accessi totali al website ed alla pagina che ho usato per il benchmark

Insomma, è un bel “mostriciattolo” e renderlo veloce era una bella sfida.

Come fare il benchmark ovvero come capire cosa migliorare

Esistono moltissimi tool online che ti consentono di capire come funziona il tuo blog, tuttavia ti consiglio di limitare il tuo raggio d'azione ad uno massimo due tool.

Quelli che ho usato io sono i più famosi:

• pingdom
• gtmetrix

Entrambe molto validi e semplici da usare, inserisci la pagina del tuo blog che vuoi analizzare, clicchi “start“, aspetti qualche secondo e ti vengono fornite tutta una serie di informazioni riguardo: tempi di risposta (il parametro più importante), performance del tuo website (solitamente in percentuale o sotto orma di lettera) e consigli su come e cosa migliorare.

Anche qui mi sento di consigliarti di analizzare due massimo tre pagine: la “home page”, una pagina “dinamica” ossia una articolo del tuo blog con molti commenti e molto testo ed una pagina “statica” tipo la pagina “chi sono“.

Questo il report di pingdom per una mia pagina web molto lunga e con molti commenti prima dell'ottimizzazione.

e quello di GTMetrix

Insomma … un vero disastro!

8 secondi su pingdoom e 18 su GTMetrix non sono accettabili per un blog che si rispetti, senza considerare tutti gli indici di bontà della pagina (performance grade) erano decisamente sotto la soglia di accettabilità.

Su cosa agire per migliorare

Per migliorare le perfomance del mio blog mi sono concentrato su quattro aspetti:

• Cache locale
• Cache remota e reverse proxy
• Tema ottimizzato in ottica seo / performance
• Hosting Provider e relativo piano di hosting

Tutti e quattro questi aspetti sono molto importanti in ottica ottimizzazione.

In questa guida ti mostrerò non solo le mie scelte, quindi quali plugin, temi e quale provider ho adottato ma ti indicherò anche le motivazioni che mi hanno spinto a scegliere uno invece dell'altro, spesso suffragate da test empirici e verifiche sul campo.

Il mio obiettivo finale? 

Abbassare drasticamente il tempo di risposta delle mie pagine, volevo passare dagli 8 secondi iniziali al secondo circa per le pagine oggetto di test.

Non ci crederai ma alla fine ci sono riuscito, ho abbattuto tutti i tempi di risposta passando a questi:

• pagina pilota: 1,46 sec
• pagina home:  0,463 sec
• pagina chi sono: 0,264 sec

Se vuoi sapere come ho fatto continua a leggere questa guida.

1. I migliori plugin wordpress per la gestione della cache

Il primo aspetto su cui mi sono concentrato è la gestione della cache locale con wordpress.

In pratica attivando la gestione della cache, tutti i contenuti (anche dinamici) vengono “pre caricati” e quindi la response della pagina è molto più veloce perché php non deve ricostruire ogni volta la richiesta ma se la trova già pronta su disco o in memoria.

Per fare un esempio è come se ogni volta che ci chiedono un preventivo noi dobbiamo rifarlo da capo oppure usiamo un vecchio preventivo già bello e fatto.

I plugin dedicati alla gestione della cache per wordpress che ho considerato sono tre:

• wp rocket plugin premium ma dal costo contenuto e di sicuro valore.
• w3 total cache plugin gratuito molto valido, ma le cui funzionalità “evolute” sono a pagamento e non molto intuitivo.
• wp super cache altro plugin gratuito molto valido, ma abbastanza semplice e basilare.

Alla fine dopo averli provati tutti e tre (wp rocket costa 33€) ho scelto di puntare sul plugin a pagamento wp rocket, principalmente per via della possibilità di customizzare praticamente ogni aspetto dell'ottimizzazione e comunque perché è risultato il migliore sia come tempi di risposta che come ottimizzazione dei parametri di bontà della pagina (performance grade).

A questo link trovate una interessantissima tabella comparativa che potrà farti capire perché ho deciso di puntare su questo plugin premium invece che scegliere un tema gratuito.

Questa la tabella comparativa per la pagina target:

	startup	W3 Total Cache	WP Rocket	Wp Super Cache
pingdom	8.39 (C)	3.63 sec (C)	3.81 sec (C)	3.78 sec (C)
GTMetrix	18.00 (F, F)	10.8 (F, F)	14.6 (F, F)	15.05 (F, F)

E queste le snapshot della risposta ottenuta da pingdom e gtmetrix dopo l'installazione e configurazione del plugin

Sono subito sceso, in entrambe le analisi, di un buon 40% ed ho ottimizzato quasi tutti i performance grade, tuttavia ero ancora molto lontano dall'obiettivo.

2. Cloudflare: metti il turbo al tuo blog

Il secondo aspetto su cui mi sono concentrato è la gestione della cache remota e del reverse proxy.

Non vorrei addentrarmi troppo in tecnicismi legati a questo aspetto, però la cache remota è un concetto molto simile a quello della cache locale appena descritto, con la differenza che a gestirla non è direttamente apache / php (il motore wordpress del nostro blog) ma un “soggetto” esterno dedicato e specializzato proprio in questo mestiere.

Perché usare la cache remota quando è attiva la cache locale?

Ottima domanda.

La risposta più semplice è questa:

Perché così velocizziamo ancor di più i tempi di risposta del nostro blog

La risposta più articolata, invece, è questa:

Perché quando il nostro cloud server ha la pagina in cache la fornisce lui, se lui non ha la pagina la chiede al nostro webserver ed a quel punto se la pagina è in cache locale viene fornita quella. In questo modo prima di arrivare al contenuto dinamico i filtri sono due ed i tempi di risposta sono ridotti ulteriormente.

Su questo argomento non ci sono paragoni da fare, esiste (a mio avviso) una sola scelta e si chiama cloudflare

Cos'è cloudflare?

Cloudflare è un cloud reverse proxy che fa anche caching e firewalling.

Anche su questi aspetti non vorrei entrare troppo sul tecnico però immagina sempre l'esempio che ti avevo fatto inizialmente sui preventivi

Se il nostro cliente ci chiede un preventivo e noi lo abbiamo già pronto in cloud gli possiamo fornire quello senza andare a cercare sul nostro hard disk, se poi il nostro cliente per chiederci i preventivi è “costretto” a passare dalla piattaforma cloud e questa è capace anche di capire se il cliente è un potenziale truffatore e bloccarlo ancora meglio.

Ecco cloudflare, in termini molto molto semplici, fa proprio questo.

Ci protegge e ci velocizza

Per capire ancora meglio guardate questa immagine

Senza cloudflare il nostro webserver è direttamente esposto su internet e deve lui, in prima persona, rispondere sia alle richieste dei nostri lettori, che dei crawler e bot (es. google) che, infine,  di possibili attacchi.

Cloudflare, in automatico, filtra questi potenziali attacchi impedendogli di arrivare al nostro webserver (firewalling), rigira le richieste che non ha nella sua cache (reverse proxy) e fornisce lui in prima persona le pagine web che ha in pancia (caching)

Che dire, un vero e proprio “schermo” protettivo per il nostro amato blog.

Tutto questo si traduce in:

• tempi di risposta più rapidi
• riduzione della banda internet verso il nostro webserver
• azzeramento degli attacchi

Per darti qualche numero, in una settimana cloudflare:

• ha fatto risparmiare 7 GB di banda internet
• ha stoppato 1700 attacchi malevoli
• ha fornito il 60% di pagine in cache (richieste che non sono arrivate al webserver)

C'è un ultimo aspetto molto importante, la gestione dei DNS remota.

Cosa significa gestione DNS remota

Significa che per consentire a cloudflare di proteggere il nostro blog  dobbiamo cambiare i dns del nostro dominio, ossia andare nel pannello di controllo del nostro hosting provider ed inserire i DNS di cloudflare, che sono:

charles.ns.cloudflare.com
gwen.ns.cloudflare.com

In questo modo abbiamo detto a tutti i DNS del mondo che l'associazione “[www . miosito . it] – IP address ” si trova sui server di cloudflare.

NOTA TECNICA: I DNS (Domain name System) servono a convertire un indirizzo numerico (ip address) composto da 4 cifre separate da punti (Es. 192.168.1.1) in un nome umanamente comprensibile come il nome del nostro dominio (ad esempio pensando.it)

Perché questa gestione è comoda

Perché qualora tu debba spostare il tuo blog da un hosting ad un altro (punto che vedremo più avanti) avrai la possibilità di farlo in maniera semplice e soprattutto veloce.

Basterà cambiare nel pannello amministrativo DNS di clouflare l'ip address associato al tuo spazio web ed in pochi secondi il reverse proxy sarà attivo sul nuovo hosting.

Questo il pannello amministrativo dei DNS cloudflare, inizialmente preimpostato da cloudflare stesso in fase di registrazione:

Ah, dimenticavo … tutto questo è gratis!

Esistono anche dei piano “pro” a pagamento, ma la versione free ha tutto quello che serve per farci dormire sonni tranquilli e velocizzare al massimo il nostro blog.

Questi i tempi di risposta per la pagina target dopo l'aggiunta di cloudflare

	startup	WP Rocket	+cloudflare
pingdom	8.39 (C)	3.63 sec (C)	%TICK% 2.65 sec (C)
GTMetrix	18.00 (F, F)	10.8 (F, F)	%TICK% 4.7 (C, F)

Ti serve un aiuto per configurare cloudflare?

   CONTATTAMI

 

3. Studiopress – Framework e Child Themes per worpdress

Il terzo aspetto su cui mi sono concentrato è l'ottimizzazione del template in ottica SEO.

Questo punto mi sta particolarmente a cuore perché da sempre, su questo blog, mi sono interessato di template e temi per wordpress.

Prima di scoprire studiopress mi ero sempre affidato, per i temi professionali, a themeforest. Il mio precedente tema era stato acquistato su themeforest, come moltissimi dei temi che ho usato per realizzate altri website, blog ed e-commerce.

Non mi ero mai trovato male … anzi, ero convinto che fossero la miglior scelta possibile sul mercato.

Mi sbagliavo, ed anche molto!

Infatti successivamente e quasi per caso ho scoperto studiopress ed un nuovo mondo si è aperto avanti a me, ringrazio ogni giorno di più il blogger che mi ha fatto conoscere per la prima volta studiopress.

Quali sono i punti di forza di studiopress?

• Il core applicativo si basa su un framework (genesis) comune a tutti i temi
• Utilizza i child themes, tutti compatibili con il genesis framework
• Tutti i temi si basano sui widget, il che li rende molto semplici ed intuitivi
• Puoi usare la licenza tutte le volte che vuoi su tutti i siti che vuoi, senza limitazioni (pensa che risparmio incredibile)
• Una volta imparato ad usarlo non hai più sorprese, come se non bastasse è molto semplice e intuitivo
• La community di sviluppatori è molto attiva e presente oltre che essere formata da persone molto  in gamba
• Plugin “ad hoc” sviluppati appositamente per il genesis framework
• Temi ottimizzati per il SEO e molto veloci

Sempre tornando all'esempio dei preventivi, immagina di avere la possibilità di generare più layout grafici diversi senza stravolgere completamente l'applicativo, senza dover studiare ogni volta come fare e soprattutto risparmiando sui costi di licenza.

Posso assicurarti che una volta provato studiopress sarà veramente difficile tornare indietro proprio perché i vantaggi, rispetto ai normali temi, sono veramente troppi.

Questa la struttura del framework genesis di studiopress

Pensa al risparmio che potresti avere nel poter utilizzare sempre lo stesso tema, per tutti i tuoi clienti, senza dover ogni volta riacquistare una licenza.

Altra cosa che trovo fantastica è l'azzeramento totale del rischio derivante dall'utilizzo di un tema che non si conosce bene.

Quando acquistiamo un buon tema (su themeforest ad esempio), per quanto sia pro, non possiamo mai avere la assoluta certezza che sarà semplice ed avrà tutto ciò che ci serve, perché non possiamo testarlo prima ma solo “vederlo” nella preview (se usi i tema pirata in questa guida ti spiego perché è sbagliato farlo).

Con studiopress ed il framework genesis questo rischio è azzerato perché i child themes si basano tutti su un framework comune e questo, una volta imparato ad usare, è uguale per tutti gli oltre 100 child themes disponibili.

Questi temi, poi, oltre ad essere molto performanti e veloci sono anche molto, ma molto belli e professionali … insomma fidati dell'etrusco, un blog professionale non può prescindere da studiopress.

Se vuoi puoi scaricare la guida per principianti a questo link ed iniziare a “studiarlo” fin da subito.

Come funziona l'acquisto di studiopress?

Potrai acquistare il framework genesis ed incluso avrai un child theme già pronto e funzionante (Genesis Sample).

Oppure, oltre al framework, potrai acquistare in accoppiata uno degli oltre 100 temi, risparmiando sul costo del tema acquistato singolarmente.

Io ad esempio ho acquistato il framework genesis in accoppiata con il tema digital pro , risparmiando molto sul costo del singolo tema.

La pulizia di digital pro puoi vederla con i tuoi stessi occhi navigando il mio blog.

C'è poi la possibilità di acquistare tutti gli oltre 100 temi risparmiando più di mille euro … questa è un'opzione da prendere in considerazione se possiedi una webagency che fa molti website al mese.

Ricordati, la licenza è illimitata e potrai usarla su tutti i website che vorrai.

Oltre a questi fantastici vantaggi ci sono anche le ottimizzazioni sia lato SEO che lato velocità, questi ad esempio i tempi di risposta per la pagina target dopo l'aggiunta del framework genesis più il child theme digital pro 

	startup	WP Rocket	+cloudflare	+ studiopress
pingdom	8.39 (C)	3.63 sec (C)	2.65 sec (C)	%TICK% 2.06 sec (B)
GTMetrix	18.00 (F, F)	10.8 (F, F)	4.7 (C, F)	%TICK% 4.3 (C, F)

Ti serve un aiuto per configurare studiopress sul tuo blog?

   CONTATTAMI

 

4. Siteground – l'hosting più veloce del mondo

Il quarto (ed ultimo) aspetto su cui ho lavorato è l'hosting provider da scegliere per ospitare il nostro blog.

Questo perché non ha senso ottimizzare la cache, installare temi performanti e veloci se poi il nostro hosting non è altrettanto performante, sicuro e veloce.

Tornando all'esempio dei preventivi è come se li archiviassimo tutti su una piattaforma cloud poco sicura, con uptime bassi e soprattutto lenta e poco performante.

Così ho deciso di migrare il mio blog su uno degli hosting provider più veloci ed affidabili del mondo: siteground.

Perché migrare su siteground?

Siteground ha dalla sua una serie di vantaggi che difficilmente riusciamo a trovare in altri hosting provider, questi i suoi punti di forza:

• Velocità allo stato puro grazie ad un sistema di cache a tre livelli (SuperCacher)
• Tutti i server sono su SSD, supportano NGINX, PHP7 e HTTP/2
• Semplicità di utilizzo grazie ad un'area amministrativa molto ben disegnata e basata su CPanel
• Supporto fantastico (h24, 7 giorni su 7, tempi di risposta brevissimi, chat istantanee e consulente dedicato)
• Sicurezza garantita grazie alla tecnica dell'account isolation
• Solo 3 diversi piani tra cui scegliere per cui non ci si perde tra migliaia di offerte
• Uptime del 99,99% grazie ai server dislocati in tre diversi continenti (Chicago, Londra, Amsterdam e Singapore)

Insomma, un hosting di grande qualità, con un supporto imbattibile ed una velocità unica ed inarrivabile.

Guardate questi grafici relativi alla velocità, alla capacità di rispondere alle richieste ed alla capacità di risolvere problemi

Importante: dal 6 Febbraio 2017 siteground è anche in lingua Italiana, ne parlo in questo articolo.

Come fare a migrare su siteground?

La procedura di migrazione del tuo hosting su siteground è molto semplice, non sei subito obbligato a trasferire anche il dominio, per cui puoi procedere con tutta tranquillità e senza l'ansia di fare al più presto per non mandare offline il tuo blog.

Dovrai scegliere il piano di hosting che preferisci tra StartUp, GrowBig (quello che ho scelto io) e GoGeeek 

Una volta scelto il piano dovrai inserire il nome a dominio che intendi trasferire (o registrare ex novo)

E procedere al pagamento,

Dopo pochi secondi la tua area personalizzata sarà già disponibile e pronta all'uso.

A questo link, nel tab Friendly UI, trovi il link ad una demo della dashboard amministrativa di siteground.

Ricorda: il trasferimento vero e proprio del nome a dominio potrai farlo successivamente in tutta tranquillità, in questa fase hai solo pagato e creato il tuo hosting “naked” (nudo, senza nome dominio attivo).

Inoltre hai detto a siteground che il tuo dominio si chiama “pincopallino . it” ma non hai ancora avviato la reale procedura di trasferimento dominio, per cui vai tranquillo … non rischi che il tuo blog vada off-line dopo poche ore.

Una volta effettuato il pagamento e creata la tua area dedicata potrai, in tutta tranquillità, iniziare a procedere al trasferimento dei file via ftp ed alla creazione del db MySQL con relativo import dati del tuo blog su siteground.

Solo dopo aver testato il corretto funzionamento del blog su siteground, grazie alla comodissima funzionalità Access Site by IP

potrai decidere di spostare i puntamenti DNS del tuo dominio verso il tuo nuovo hosting provider.

I puntamenti DNS li trovi nella tua dashboard personalizzata alla voce “Account DNS”

Se poi avrai già attivato cloudflare allora lo switch da un hosting all'altro sarà veramente indolore, basterà cambiare i puntamenti di ip address sul pannello DNS di cloudflare ed il gioco è fatto.

L'IP address del tuo spazio hosting lo trovi sempre nel pannello amministrativo alla voce “Account IP”

Per finire, ma solo se lo riterrai necessario, potrai procedere alla migrazione del nome a dominio cliccando sul bottone “Transfer”

ma questa è una cosa che puoi anche non fare mai e lasciare il nome a dominio su un registrar di tua preferenza.

Io, ad esempio, ancora non ho fatto la migrazione del nome a dominio e forse non lo farò mai.

Ma i tempi di risposta sono veramente migliori?

Questi i tempi di risposta per le tre pagine obiettivo (target, home e chi sono) dopo la migrazione a siteground confrontati con i tempi del mio vecchio hosting provider

pagina	siteground	vecchio hosting
pagina target - pingdom	1.46 sec (B - 86)	1.98 sec (B - 81)
home - pingdom	0.463 sec (A - 94)	1.11 sec (B - 88)
chi sono - pingdom	0.264 sec (A - 93)	1.03 sec (B - 85)
pagina target - GTMetrix	2.0.86 sec (F - D)	5 sec (B - E)
home - GTMetrix	0.9 sec (F - A)	3 sec (F - C)
chi sono - GTMetrix	0.5 sec (A - B)	1.5 sec (A - C)

Come si vede dalla tabella stiamo parlando di millesimi di secondo, anche il vecchio hosting provider performava molto bene, ma siteground ha veramente una marcia in più e mi ha permesso di scendere sotto il secondo e questo, in ottica SEO, fa veramente tanta differenza.

Questa la snapshot su pingdom della pagina “home” del mio blog, con un tempo di caricamento di appena 463 ms, più veloce del 97% dei siti mondiali analizzati!

E questa la pagina “chi-sono“, con un tempo di caricamento di appena 264 ms, più veloce del 99% dei siti mondiali analizzati!

Un bel risultato non trovi?

Ti serve un aiuto per migrare il tuo blog su siteground?

   CONTATTAMI

I risultati finali

Ti riporto la tabella definitiva con tutti tempi rilevati durante le varie fasi di aggiornamento ed ottimizzazione, partendo dai tempi iniziali e pian piano mostrando tutti i tempi rilevati dopo ogni ottimizzazione.

	startup	WP Rocket	+cloudflare	+ studiopress	+ siteground
pingdom	8.39 (C)	3.63 sec (C)	2.65 sec (C)	2.06 sec (B)	1.46 sec (B)
GTMetrix	18.00 (F, F)	10.8 (F, F)	4.7 (C, F)	4.3 (C, F)	2.0 (F, D)

 

Che te ne pare di questa guida? stai cercando anche tu di ottimizzare le performance del tuo blog? Se si parliamone nei commenti!