In questo articolo andiamo a vedere come migliorare le prestazioni del tuo sito WordPress. In pochi semplici passi possiamo ottimizzare il nostro sito web e migliorare le prestazioni. Un sito veloce è importante per garantire una buona esperienza all'utente (user experience). Vedremo come non basta installare un plugin di cache o un plugin che contiene la parola optimizer nel nome per velocizzare il tuo sito web.

Durante le varie fasi useremo lo strumento di test gratuito GTmetrix. Ti invito a registrare un account in modo da poter cambiare l'ubicazione del server di test, dal momento che sia i server che i clienti risiedono in Europa dovremo effettuare i test da Londra (la posizione più vicina) in modo da avere dei risultati veritieri. L'account è completamente gratuito e ti permette tra le altre cose di vedere uno storico dei test, in questo modo puoi controllare se le prestazioni del tuo sito web sono migliorate o meno rispetto ai test precedenti.

Considerazioni

L'obiettivo di questa guida è quello di migliorare il tempo di caricamento del tuo sito web, scendendo sotto il tempo limite di 2 secondi. Spesso ci si tende a focalizzare sul punteggio indicato dai vari tools. Per quanto riguarda l'esperienza dell'utente il punteggio è irrilevante. Inoltre un buon punteggio non è indice di un sito veloce, e non tutti i siti web che caricano in meno di 2 secondi hanno un buon punteggio. Il nostro focus sarà quindi sul tempo di caricamento, non sul punteggio (che comunque migliorerà in seguito alle ottimizzazioni che eseguiremo in questa guida). Andiamo quindi a vedere come possiamo velocizzare un sito WordPress.

In questo esempio vediamo come non ci sia un diretto confronto tra i tempi di caricamento ed il punteggio:

Aumentare Velocita Sito Wordpress Punteggio

Attiva la connessione HTTPS

Si è parlato molto della connessione sicura tramite il protocollo HTTPS negli ultimi anni. Oltre al fatto che i vari browser mostrano un alert se non usi una connessione sicura, hai un vantaggio in termini di prestazioni. Se usi il protocollo HTTPS usi HTTP/2, un protocollo più veloce in quanto permette il download simultaneo dei files. Se non stai usando HTTPS puoi iniziare ad usarlo in pochi minuti seguendo questo nostro articolo. Con SupportHost il certificato SSL è attivo e gratis su per tutti gli account, quindi devi solo configurare il tuo CMS per utilizzarlo correttamente.

Eseguire il test con GTmetrix

GTmetrix è un ottimo strumento per misurare la velocità di un sito web. Quando esegui un test con GTmetrix, come accennato sopra, è opportuno scegliere l'ubicazione del server di test il più vicino possibile al server che vuoi testare. Se il tuo sito è con noi dovresti scegliere Londra. Per avere questa opzione è necessario creare un account gratuito su GTmetrix.

Assicurati di usare il giusto protocollo per il test. Per evitare un redirect, che andrebbe ad influire sul risultato delle misurazione, assicurati di usare http o https in modo corretto all'inizio dell'url che vuoi testare. Assicurati inoltre che il tuo url contenga uno slash (/) alla fine dell'url per evitare un redirect che come nel caso precedente possa influire sul risultato del test.

Vediamo i dettagli qui sotto:

Aumentare Velocità Sito Web Test

Come leggere il waterfall

Quando testi un sito web con GTmetrix puoi vedere un waterfall. Questo strumento ti permette di visualizzare tutte le risorse caricate per visualizzare la tua pagina web e quanto tempo impiega il caricamento di ognuna. Partendo da questa lista inizieremo ad eseguire le nostre modifiche in modo da migliorare la velocità del nostro sito WordPress.

Ad esempio molti plugin caricano dei fogli di stile e dei JavaScript in tutte le pagine, anche quando sono necessari soltanto in alcune pagine. Molti builder allo stesso modo creano caricano dei files CSS e js che non sono utilizzati, e di grandi dimensioni. se vuoi usare un builder consigliamo oxygen builder. Non abbiamo alcun ritorno economico da questo consiglio, semplicemente si tratta di un builder che ha ottime prestazioni e non carica nelle tua pagine fogli di stile o script inutili.

Possiamo dividere i files per tipo, oppure ordinarli per dimensione. Questo ci permette di analizzare tutti i files e capire cosa può essere rimosso e cosa invece dobbiamo lasciare per il corretto funzionamento della pagina.

Perché la velocità del sito è importante?

Google ha dichiarato che la velocità è uno dei fattori di ranking. Vale a dire che se il tuo sito è molto lento potrebbe essere penalizzato e quindi non arrivare alla prima pagina.

Il 40% dei visitatori abbandonano il sito se impiega più di 3 secondi per il caricamento. Neil Patel

Anche le statistiche di Google ci confermano questi numeri relativi a un sito lento:

Aumentare Velocita Sito Wordpress Statistiche Google

Si nota quindi che puoi diminuire il bounce rate semplicemente migliorando le prestazioni del tuo sito web. Non solo Google si focalizza sull'esperienza dell'utente, ma tutti i motori di ricerca. Quindi le prestazioni del tuo sito web influiscono sul tuo posizionamento, anche se in minima parte.

Tanta è l'importanza della velocità di caricamento nell'esperienza utente che Google Analytics ha una sezione dedicata alla velocità del tuo sito.

Fase 1: Eliminazione

Come abbiamo detto andremo ad usare GTmetrix, che ci fornisce alcune indicazioni sull'ottimizzazione del nostro sito web. Se hai già eseguito dei lavori e vuoi seguire questa guida è opportuno disattivare eventuali plugin di cache o plugin che eseguono il merge e minify di CSS e JavaScript in modo da avere una situazione più chiara davanti. Passeremo quindi in rassegna tutte le risorse al fine di eliminare tutte quelle non necessarie.

Ti servono tutti quei plugin?

In alcuni casi abbiamo trovato siti di clienti pieni di plugin, molti inutili. Purtroppo nel tempo può succedere che si alternino vari webmaster (o peggio ancora cuggini) e che installino nuovi plugin senza controllare cosa è già installato. Spesso abbiamo trovato 2 plugin per i form e nessuno dei due era utilizzato perché il tema WordPress aveva un suo form di contatto. Un'altra volta abbiamo trovato woocommerce e easy digital downloads sullo stesso sito, ma non erano mai stati nemmeno impostati. Installati, attivati e lasciati lì.

Al di là di questi casi ovvi, conviene passare in rassegna tutti i plugin, e chiedersi per quali funzioni si stanno utilizzando. In molti casi si può fare a meno di quella funzione. In altri casi un plugin pesante è utilizzato per una singola funzione, in questo caso si può creare un "site specific plugin" con quella funzione specifica e disattivare il plugin.

JavaScript e fogli di stile

Quando un sito ha un alto numero di richieste o una dimensione di pagina troppo grande, una delle cause del problema (insieme ad immagini e font) sono gli script ed i fogli di stile. I temi che si comprano sono fatti in modo da essere utilizzati da tutti e per siti che hanno le più svariate funzioni. Questo fa si che chi vende il tema deve prendere in considerazione tutte le possibilità quando crea il tema. Non entreremo nel merito di sfoltire il contenuto di un foglio di stile o di uno script data la sua complessità.

Stando però sul semplice, alcuni plugin ed il core di WordPress includono dei fogli di stile e degli script completamente inutili. Alcuni plugin invece inseriscono i loro fogli di stile ed i loro script in tutte le pagine del tuo sito. Un esempio classico è quello di Contact Form 7 che aggiunge un CSS ed un JavaScript a tutte le pagine del sito, ma le usa soltanto nella pagina dei contatti ed in altre eventuali pagine che usano un form di contatto.

Vediamo quindi come eliminare le risorse non utilizzate dalle pagine che non ne hanno bisogno per migliorare la velocità di caricamento delle pagine web.

Eliminare le risorse inutili dove non servono

Andiamo ad installare il plugin "Asset cleanup", che ci permetterà di disabilitare alcune di queste risorse dove non ci servono. Una volta installato il plugin andiamo sulle impostazioni dal menu a sinistra in "Asset cleanup -> settings". Clicchiamo quindi sul tab "common unloads" e disabilitiamo quello che non ci serve. Sotto ogni voce vediamo una descrizione della risorsa. Ad esempio se non usi le emoji puoi disabilitare lo script.

Velocita Wordpress Eliminare Risorse Sul Sito

Adesso andiamo ad eliminare quelle risorse che ci servono solo in alcune pagine del sito. Ad esempio andiamo alla nostra pagina contatti, che contiene il form di contatto di contact form 7. In questa pagina avremo bisogno dei fogli di stile di contact form 7 e degli script, ma non nelle altre pagine. Andiamo quindi a modificare la pagina di contatto. Sotto l'editor vediamo il box di "Asset cleanup" dal quale possiamo andare a rimuovere gli script ed i fogli di stile di contact form 7 (tra gli altri) e lasciarli attivi solo su questa pagina.

Aumentare Velocita Wordpress Eliminare Risorse Per Pagina

Eliminazione di font inutili

In alcuni casi (come ad esempio nel tema di SupportHost) venivano caricati dei font assolutamente inutili. Ad esempio avevamo un font che veniva caricato soltanto per un titolo, abbiamo quindi deciso di utilizzare un altro font per quel titolo ed eliminare il caricamento di una risorsa aggiuntiva.

Inoltre per le icone venivano caricati 2 diversi font oltre a font awesome. Abbiamo eseguito un audit di ogni pagina eliminando le icone che non erano di font awesome, eliminando così il caricamento di altri 2 font.

In altri casi invece lo stesso font viene caricato diverse volte per il grassetto, corsivo, ecc... Anche in questo caso è opportuno chiedersi se possiamo fare in altro modo in modo da ridurre le risorse necessarie al caricamento della pagina. 

L'eliminazione dei font dipende dal builder che stai utilizzando ed dal tema, quindi non possiamo dare delle linee guida che siano sempre valide per questo tipo di operazione.

Ottimizzazione delle immagini

Andiamo adesso ad ottimizzare le immagini. Apri il tab waterfall su gtmetrix e selezione solo le immagini.

Velocita Wordpress Tab Immagini

Se non ha mai ottimizzato le immagini del tuo sito web è possibile che gran parte della dimensione delle tue pagine web dipenda appunto dalle immagini. In particolar modo nei blog, si tende a caricare immagini senza pensare alle conseguenze per le prestazioni, quindi in formati errati o dimensioni esagerate.

Filtrando le immagini in questo modo vediamo la dimensione totale di tutte le immagini, ed il loro numero. In questo modo possiamo individuare se ci sono immagini con dimensioni eccessive e capire come fare per ridurne il peso.

Dimensioni delle immagini

In alcuni casi abbiamo visto immagini di 3000 o 5000 px di larghezza e qualche MB di peso, che poi venivano ridimensionate dal browser. Raramente nel tuo sito web avrai bisogno di immagini più grandi di 1600px. In molti casi si tratta di immagini che vengono caricate all'interno di articoli nel blog. Di solito i temi impostano una larghezza massima per la colonna del testo, che di solito oscilla tra 700 px e 980 px. vale a dire che ogni immagine più larga verrà ridimensionata dal browser.

È quindi opportuno ridimensionare le immagini prima di caricarle (oppure farlo in automatico come vedremo tra poco). Possiamo usare la funzione di WordPress direttamente per modificare le dimensioni delle immagini, direttamente dall'area amministratore.

Cambiare tipo di immagine

Le immagini in png hanno una maggiore definizione e sono spesso usate per i loghi e le icone, dove c'è bisogno della trasparenza. In alcuni casi abbiamo visto che venivano caricati dei files png come immagini nel sito. Se si tratta di una foto è conveniente usare il formato jpg. Se all'interno dei tuoi post hai delle immagini in png è opportuno convertirle in jpg. Questo accade spesso nel caso degli screenshot, che vengono creati in formato png.

Compressione delle immagini

Questo processo è molto semplice. Consigliamo di acquistare shortpixel, un plugin che permette la compressione delle immagini in modo automatico. Dopo l'installazione shortpixel eseguirà una compressione (e se vogliamo anche il ridimensionamento) delle immagini in automatico. Questa prima operazione prenderà un po' di tempo. Poi eseguirà la compressione in automatico ad ogni upload. Ecco come abbiamo impostato shortpixel: Velocita Wordpress Impostazioni Shortpixel

Ridimensionamento automatico delle immagini

In molti casi nei blog ci sono diversi autori, e sarebbe molto difficile controllare che tutti ottimizzino le immagini in modo corretto. Capita spesso infatti che un autore carichi immagini con dimensioni esagerate o in un formato errato. In questo caso un plugin gratuito ci viene in aiuto. Si tratta di un plugin gratuito rilasciato da shortpixel che controlla le immagini quando vengono caricate e ne esegue il ridimensionamento in automatico. Qui possiamo impostare una dimensione massima delle immagini.

Velocita Wordpress Ridimensionameto Automatico Immagini

Questo plugin ti permette inoltre di ricomprimere le immagini in formato jpg, scegliendo la nuova compressione, che in questo esempio abbiamo impostato ad 80:

Velocita Wordpress Compressione Jpg

Inoltre se vogliamo possiamo spuntare l'opzione per convertire le immagini png in jpg

Raccomandazioni di GTmetrix

A questo punto abbiamo eliminato tutti quei files e plugin inutili che rallentavano il caricamento ed ottimizzato al meglio quello che ci serve. Sicuramente dai testi di GTmetrix hai notato una riduzione nelle dimensioni della pagina ed una riduzione del numero di richieste.

Adesso è il momento di controllare le raccomandazioni di GTmetrix, ed aggiustare quanto possibile. L'individuazione dei problemi in questa fase è molto semplice  dal momento che GTmetrix mette in alto il problemi che trovi elencati nel tab "Pagespeed".

Questa raccomandazioni sono ovviamente diverse per ogni sito web e GTmetrix fornisce una spiegazione ed una soluzione per ognuna.

Il nostro consiglio è di attivare anche prima dei test la compressione gzip e l'ultima versione di php disponibile (7.3 al momento della stesura di questo post). Con SupportHost tutti gli account hanno gzip attivo e l'ultima versione di php viene impostata di default su tutti gli account.

Una delle raccomandazioni più comuni è il "Leverage browser caching". Seguendo le indicazioni di GTmetrix ci basterà aggiungere il codice consigliato nel file htaccess in modo da dare una scadenza ai diversi files caricati dalla nostra pagina e sfruttare al massimo la cache del browser.

Merge e minify

A questo punto possiamo ancora ridurre le dimensioni della pagina ed il numero di richieste. Questo processo si chiama merge e minify.

Merge significa unire. andremo infatti ad unire i files CSS in modo da avere un numero inferiore di files. Andremo poi ad unire i js che contengono gli script per ridurre il numero di richieste. 

Abbiamo anche la possibilità di ridurre le loro dimensioni eseguendo un'azione che si chiama minify. La minificazione di un file consiste nell'eliminazione di caratteri inutili (ad esempio le interruzioni di riga) e l'eliminazione di commenti. Un file minificato sarà difficile da leggere se vuoi apportare delle modifiche ma consente di ridurre le dimensioni finali del file.

Questo processo viene gestito in modo automatico da un plugin. Puoi usare il plugin che abbiamo installato prima (asset cleanup) per minificare ed unire i files, oppure un plugin ulteriore come ad esempio fast velocity minify.

Merge e minify con Asset Cleanup

Se vuoi usare questa funzione di Asset Cleanup devi andare sulle impostazioni del plugin, ed al tab "Combine CSS & JS Files" spuntare le opzioni. Una volta salvate le impostazioni pulisci la cache del browser e visita il sito per vedere se questa operazione ha creato problemi. Se così fosse devi trovare il CSS o il JavaScript che crea il problema se unito agli altri ed escluderlo.

Una volta che abbiamo impostato il plugin per eseguire il merge ed abbiamo quindi unito tutti i files possiamo fare un altro test, sicuramente noteremo una ulteriore riduzione del numero di richieste e della dimensione delle pagina (quest'ultima in misura minore).

A questo punto possiamo andare al tab "Minify CSS & JS Files" ed impostare in modo da eseguire anche il minify dei files. Anche in questo caso svuotiamo la cache del browser e controlliamo il sito alla ricerca di problemi. Se è tutto ok eseguiamo un altro test con GTmetrix in modo da vedere se c'è stato un miglioramento e anche quantificarlo.

La ricerca di problemi nel sito web non sarà complicata. Se dopo aver salvato le impostazioni avrai un problema, questo sarà lampante. Ad esempio potresti vedere parte della grafica completamente mancante oppure delle funzioni del sito che non funzionano. Non c'è bisogno di trasformarsi in Sherlock Holmes con tanto di lente di ingrandimento, non preoccuparti.

È possibile che se usi un tema WordPress base o un builder come oxygen non ci sia tanta differenza prima e dopo queste operazioni, mentre in altri casi le differenze saranno enormi, ad esempio in quei casi di temi che creano tanti CSS diversi per ogni pagina.

Merge e minify con FVM

Fast velocity minify è un plugin che serve soltanto ad eseguire il merge e minify delle risorse per aumentare la velocità di WordPress. Consigliamo l'utilizzo di Asset Cleanup per la sua facilità d'uso, ma per casi particolari è possibile usare questa alternativa.

Ad esempio su SupportHost avevamo una situazione complessa. Abbiamo disattivato le risorse su alcune pagine direttamente tramite una funzione personalizzata nel tema, quindi non stavamo usando Asset Cleanup. Inoltre avevamo la necessità di impostare delle scadenze maggiori per i files minificati e di sincronizzarli con i files di cache di WP Super Cache e quindi abbiamo preferito usare questo plugin per avere maggiori opzioni.

Nel 99% dei casi il semplice utilizzo di Asset Cleanup è più che sufficiente.

Attivazione di un plugin di cache

L'ultimo passo dell'ottimizzazione che ci permette di aumentare la velocità del nostro sito WordPress è l'attivazione di un plugin di cache. Un plugin di cache crea dei files html statici per ogni pagina del tuo sito in modo da non dover generare ogni volta il codice della pagina. Questo riduce il numero di calcoli che il server deve eseguire ad ogni visita, riducendo quindi i tempi di caricamento del sito web.

Esistono vari plugin di cache che puoi utilizzare, tra tutti consigliamo WP Super Cache. Sconsigliamo l'utilizzo di w3 total cache, su diversi gruppi sono stati eseguiti dei test e in tutti i casi viene sconsigliato l'uso del plugin.

Una volta installato Wp Super cache andiamo alla pagina delle impostazioni. Qui troverete una moltitudine di impostazioni. Le impostazioni di default sono studiate per funzionare al meglio nella maggior parte dei casi. Consigliamo di attivare il modo esperto nel tab advanced perché permette maggiori prestazioni. Il modo "expert" infatti usa mod_rewrite per fornire al visitatore in files in cache, mentre il metodo "simple" esegue delle chiamate php prima di fornire il file statico.

Usare un CDN

Un passo ulteriore consiste nell'attivazione di un CDN (Content Delivery Network). Una volta che il tuo sito web è ben ottimizzato un CDN può migliorare ulteriormente le prestazioni. Attivare un CDN a prescindere può non aver senso, o essere pure deleterio. Vediamo nel dettaglio.

Cosa fa un CDN?

Per capire come l'utilizzo di un Content Delivery Network ci aiuta nel migliorare le prestazioni del nostro sito web dobbiamo innanzitutto capire come funziona. Questo network ci permette di fornire le parti statiche della pagina (ad esempio le immagini) da un server situato il più vicino possibile all'utente. Ad esempio col nostro servizio hosting il tuo sito risiede fisicamente in Germania. I tuoi clienti in Europa avranno dei caricamenti rapido, ma gli utenti che visitano il tuo sito dall'Asia, Oceania o America avranno dei tempi di caricamento più lunghi dovuti alla distanza dal server. Un Content Delivery Network fornisce il caricamento da un altro server del loro network, quello che è più vicino all'utente.

Quando usare un CDN

Dai nostri test abbiamo riscontrato che l'uso di un CDN come CloudFlare se tutti i tuoi utenti sono in Europa è non solo superfluo, ma dannoso perché ti fa perdere qualche decimo di secondo. Se invece hai utenti in tutto il mondo la perdita di qualche millisecondo per gli utenti in Europa significa aver guadagnato 1 o anche 2 secondi (a seconda del sito) per gli utenti più lontani, quindi in questo caso si rivela una buona scelta.

Ho saltato qualcosa? Vuoi leggere maggiori dettagli su alcuni di questi argomenti? Fammelo sapere nei commenti!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

TORNA SU