Caricamento sito web
Wordpress superveloce caricamento in 1 secondo - Come ho ottimizzato WordPress
10Set

In questo breve post ti spiego come ho velocizzato WordPress per un cliente permettendogli di rendere accessibile il suo sito in meno di 1 secondo.

Spesso la velocità del sito viene sottovalutata ma è un fattore molto importante da tenere conto al momento dello sviluppo di un sito su WordPress.

Speed Test prima dell'ottimizzazione WordPress

Speed Test dopo l'ottimizzazione WordPress
Speed Test del sito prima e dopo l’ottimizzazione WordPress

 

La velocità di un sito, appena dopo la UX e UI, è uno dei fattori più importanti.

Ti starai chiedendo perché è un fattore così importante, ed ecco le risposte:

  • SEO: migliora il tuo posizionamento sui motori di ricerca
  • Page Views: aumenta le pagine visualizzate dagli utenti
  • Bounce Rate: permette di ridurre il bounce rate
  • UX: migliora la user experience

Non sempre i temi e plug-in per WordPress sono ottimizzati ed influiscono in modo negativo sulla velocità del sito. Per questo vanno ottimizzati per ottenere prestazioni maggiori in termini di velocità.

Secondo un sondaggio il 40% degli utenti abbandona un sito che impiega più di 3 secondi a caricarsi.

Percentuali di utenti che abbandonano un sito web lento a caricarsi

Questo problema ci fa perdere utenti intenzionati a visitare il nostro sito web. E non lo dico io, lo troviamo su Google Analytics misurando il bounce rate.

Ma torniamo alla parte interessante di questo articolo ovvero al “come ho velocizzato WordPress” lasciando perdere il “perché velocizzarlo”.

Ecco come ho fatto 😉:

 

Ottimizzazione delle immagini

Ho ottimizzato tutte le immagini presenti sul sito web. Questo ha permesso di ridurre già notevolmente i tempi di caricamento del sito web.

Il peso complessivo delle immagini della homepage era di circa 3.4 Megabyte, con la compressione siamo scesi a circa 600 Kilobyte totali di tutte le immagini presenti in homepage.

Per effettuare questa operazione ho scaricato tramite il tool “Performance” di SEO Zoom un elenco delle immagini che risultavano non ancora ottimizzate e che potevano essere compresse al fine di ridurne il peso.

Munito dell’elenco delle immagini che potevano essere ottimizzate le ho scaricate via FTP e tramite Optimizilla le ho compresse tutte.

Una volta compresse sono state caricate tutte nuovamente su WordPress sovrascrivendo quelle vecchie non ancora compresse.

Questa prima operazione di ottimizzazione ci ha permesso di ridurre anche fino al 99% il peso di una singola immagine.

 

Migrazione dell’hosting

Il sito web dell’azienda risiedeva su un hosting low cost con scarse prestazioni.

Abbiamo effettuato la migrazione dell’intero server su Siteground.it.

La migrazione dell’hosting ci ha fatto notare un enorme aumento delle prestazioni del sito web.

Siteground si è occupata dell’intero trasferimento del sito. Alle 15:00 del giorno prima abbiamo chiesto il trasferimento, la mattina dopo il sito era già online sul nuovo hosting Siteground.

La velocità è aumentata notevolmente, per questo è sempre importante scegliere l’hosting migliore.

 

Minify e concatenazione

Tutte le risorse Javascript e CSS sono state minimizzate per “alleggerirle” nel caricamento ed inoltre sono state concatenate tutte assieme in modo da fornire un singolo file Javascript ed un singolo file CSS.

Questo ci ha permesso di rendere più leggeri i files Javascript e CSS oltre che a diminuire il numero di richieste del browser verso il server.

Per facilitare le operazioni di minify e concatenazione delle risorse JS e CSS abbiamo utilizzato il plug-in WP Rocket.

 

Sistemi di Caching

E’ stata abilitata la cache statica e la cache dinamica tramite il servizio SuperCacher di Siteground.

Questi due sistemi di caching hanno già permesso di notare miglioramenti, ma abbiamo continuato con l’ottimizzazione utilizzando il MEMCACHED (è un sistema che offre Siteground).

Cos’è il MEMCACHED? Si tratta di una tecnologia che velocizza le chiamate al database archiviando i dati e gli oggetti nella memoria. Questo riduce il numero di interrogazioni al database.

 

Ri-posizionamento del datacenter

Il server di hosting era situato ad Amsterdam. Il sito è basato in Italia quindi abbiamo scelto di spostare i nostri dati nel datacenter Italiano di Siteground.

Più vicino è il server e ovviamente minore sarà la latenza per raggiungerlo.

 

CDN

Abbiamo attivato CloudFlare per fornire i contenuti il più vicino possibile al paese da cui ci visita l’utente.

I contenuti vengono forniti localizzati tramite una CDN fornita da CloudFlare.

Questo è stato attivato anche perché diversi siti dell’azienda sono rivolti ad un pubblico estero. Perciò il core di WordPress è installato sull’hosting con datacenter in Italia mentre i contenuti sono raggiungibile tramite la CDN localizzata in base alla regione da cui ci visita l’utente.

 

CSS Image Sprites

Dove possibile è stata sfruttata la tecnica del CSS Image Sprites.

Ad esempio sulle icone di switch della lingua o le icone in generale, che prima venivano inserite sottoforma di immagine PNG.

Cos’è il CSS Image Sprites? Sono un modo per combinare insieme delle immagini al fine di ottimizzare il caricamento della pagina riducendo il numero di richieste HTTP al server.

[Immagine] Un esempio di una singola immagine che racchiude diversi elementi richiamabili singolarmente tramite la tecnica del CSS Sprites.

 

Plugin WordPress

Diversi plug-in venivano richiamati su tutte le pagine e nella maggior parte dei casi erano necessarie solo su una singola pagina o comunque poche pagine.

Un esempio? Contact Form 7, che veniva richiamato solamente su 6 pagine sul totale di 150 di tutto il sito.

Con poche righe di PHP nel functions.php di WordPress abbiamo richiamato JS e CSS del plug-in solo sulle pagine veramente necessarie.

Questa operazione è stata effettuata per diversi plug-in che erano necessari solo in alcune occasioni specifiche e non sull’intero sito.

Infine, diversi plug-in sono stati rimossi perché sostituiti da funzioni PHP implementate direttamente nel tema del sito.

E’ tutto! 😉

Queste sono le 8 mosse che ho eseguito per rendere superveloce il sito WordPress dell’azienda con la quale collaboro.

E tu? Come ottimizzi il tuo sito WordPress? Quali tecniche usi e che risultati hai ottenuto?

Fammelo sapere con un commento!

A presto,

Igor



{0 commenti... aggiungine uno tu! }

Scrivi un commento.



Ultimi articoli

 Articoli recenti

Newsletter

Rimani sempre aggiornato iscrivendoti alla newsletter.
Niente spam!



English Version

Translate this site in English




Copyright © 2017 @IgorRedaelli · Handcrafted in Italy · Source code developed by @IgorRedaelli — Proudly motorized with WordPress.