In un articolo di qualche tempo fa abbiamo visto che per verificare lo stato di ottimizzazione di un sito web possiamo usare GTMetrix, questa volta vediamo come Ottimizzare WordPress su ServerPlan, siamo partici da un sito basato su WordPress 4.8, un sito completo con pagine istituzionali, slider e articoli; volutamente non abbiamo effettuato alcuna operazione di ottimizzazione per verificare in che stato sia inizialmente, di seguito vi mostriamo come si presenta.

Passaggio da Aruba a ServerPlan

Il case study inizia con Il sito sui server di Aruba dove è stata solo attivata la compressione gzip.

Proveremo a fare uno spostamento del sito sui server di ServerPlan, e anche qui attiveremo esclusivamente gzip, e confronteremo i risultati.

Il test è stato effettuato mantenendo anche la stessa versione di php, ovvero 5.6; nelle fasi successive porteremo la versione php alla 7.0 perché ServerPlan lo consente.

Test GtMetrix su server Aruba

Abbiamo effettuato la clonazione con Infinite WordPress, e praticamente adesso abbiamo due siti completamente identici, vediamo i risultati se sono in qualche modo migliorati oppure peggiorati, e successivamente andremo a vedere come ottimizzare il sito wordpress.

Dopo qualche ora il passaggio è avvenuto, ricordiamo solamente come attivare la compressione gzip da cPanel, così da avere la stessa situazione precedente.

Accedete al pannello di cPanel, cercate la sezione Software e selezionate Ottimizza sito Web

Si aprirà la schermata con diverse opzioni di compressione, selezioniamo la voce Comprimi tutto il contenuto, e aggiorniamo le impostazioni.

Dal risultato che segue, vediamo dei miglioramenti evidenti, il peso della pagina è molto simile, quasi 2,5 MB ma possiamo vedere che il tempo di caricamento “Fully Loaded Time” si è dimezzato passando da 8,5 secondi a 4,3 secondi

Test GtMetrix su server ServerPlan

Ottimizzare sito su ServerPlan

Ovviamente non ci fermiamo qui, proviamo ad ottimizzare ulteriormente il sito, ci basta seguire le indicazioni di GtMetrix, analizziamo alcuni punti e verifichiamo come ottimizzare il sito.

Un parametro che potreste trovare in rosso è Leverage browser Cache, vediamo come risolverlo:

Leverage browser Cache

La sistemazione di questo parametro si può effettuare utilizzando un Plugin oppure modificando correttamente il file htaccess, vediamo entrambe le modalità, il plugin lo consigliamo a chi non ha dimestichezza con software di Ftp e di modifica dei file, perchè modificare il file htaccess in modo errato potrebbe compromettere il funzionamento del vostro sito.

Plugin Far Future Expiry Header

La configurazione del Plugin è davvero semplice, ecco come lo abbiamo settato:

Attenzione:
La compressione GZip non deve essere abilitata dal Plugin, ma verificate se potete farlo da cPanel, come abbiamo descritto poco sopra; utilizzate questa opzione solo se il vostro hosting non vi da la possibilità di farlo.

Modifica htaccess
Il plugin che abbiamo appena descritto sopra, non fa altro che modificare il file htaccess, e per ragioni di sicurezza è sempre bene tener sotto controllo queste modifiche e farle manualmente; inoltre il plugin potrebbe avere delle falle di sicurezza che non conosciamo, quindi se siete in grado di farlo, vi consigliamo di modificare il file htaccess manualmente.

Il file .htaccess si trova nella root della vostra installazione WordPress, per editarlo utilizzate un software di editing, va benissimo notepad e per scaricarlo utilizzate un client ftp, va benissimo Filezilla, perchè se lo fate dal pannello di admin, una modifica sbagliata non vi farà più accedere.

Ma cosa fa questa modifica ?
Sostanzialmente va ad impostare una data di scadenza o una data massima nelle intestazioni HTTP per le risorse statiche, tutti i browser moderni andranno a caricare prima le eventuali risorse come immagini, css, javascript scaricate in locale invece di richiederle al web. Purtroppo questa data può essere attribuita solo alle risorse interne, quindi sarà difficile ottenere il massimo punteggio se ad esempio utilizziamo risorse di terze parti, come ad esempio Facebook o Google.

Ecco cosa inserire nel file .htaccess

Header unset Pragma
FileETag None
Header unset ETag

## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”

## EXPIRES CACHING ##

Optimize images

Se apriamo la tab troviamo l’elenco delle immagini presenti nel nostro sito che devono essere ottimizzate, il sistema ci avvisa che alcune immagini possono essere compresse, per fare questo possiamo procedere in modo manuale, ovvero scaricare le immagini e utilizzare un software di fotoritocco per ottimizzarle per il web, oppure utilizzare una soluzione smart, con un plugin; seguiremo questa strada installando Smush Image Compression and Optimization.

Una volta installato e attivato il plugin, troviamo le configurazioni in Media – WP SMush, da qui basta cliccare sul tasto Bulk Smush Now per lanciare ottimizzazione.

La cosa interessante del plugin è che dopo aver ottimizzato le immagini presenti, ha la funzione di ottimizzare tutte le nuove immagini che vengono caricate, semplicemente attivando l’opzione Automatically smush my images on upload in Settings.

Se non volete utilizzare plugin per ottimizzare le immagini, potete utilizzare lo stesso GTMetrix, nell’elenco delle immagini da ottimizzare troverete il link See optimized version che se ci cliccate sopra vi apre l’immagine ottimizzata, vi basterà scaricarla e effettuare il caricamento con un software FTP, processo più lungo ma come sappiamo un sito WordPress con meno plugin possibili risulta più performante e sicuro.

Prima dell’installazione del plugin abbiamo questi parametri che seguono:

Successivamente questa è la situazione, dire molto bene, ma non benissimo, ci manca il Serve scaled images per avere tutti i parametri verdi, ma proseguiamo:

Serve Scaled images

Aprite la sezione per vedere l’elenco delle immagini che necessitano di essere scalate, nell’esempio vediamo delle immagini con dimensioni 1197×583 che invece dovrebbero essere 394×192, come prima è lo stesso GTMetrix che ci suggerisce questo:

Ci basta cliccare sul link dell’immagine per identificarla, scaricarla e dimensionarla secondo le indicazioni, utilizziamo un qualsiasi software di fotoritocco.
Successivamente andiamo a caricare quest’ultima immagine dimensionata e vediamo il risultato:

Remove query strings from static resources

Le risorse con il simbolo “?” non vengono messe in cache da molti sistemi di proxy, GtMetrix richiede di togliere la parte di parametro dopo il punto interrogativo, ma come possiamo fare ?
Questo lo possiamo risolvere con un plugin di cache, andiamo ad installare il più conosciuto, W3 Total Cache.

Installiamo ed attiviamo il plugin, andremo a settare solamente alcune opzioni che aumenteranno le performance del nostro sito, successivamente vedremo di creare una guida più completa per una configurazione avanzata.

Andate nel menù Performance e selezionate General Setting

Nella sezione Page Cache mettete enable, per abilitare il sistema di caching sulle pagine, e subito sotto lasciamo la voce Page Cache Method su Disk Enhanced.
Salviamo subito con Save all settings.

Ci spostiamo nella sezione Database Cache e anche qui abilitiamo il sistema di cache per il database e come metodo lasciamo impostato su Disk.

Andiamo ora nella sezione Browser Cache e verifichiamo che sia abilitata, lo dovrebbe essere di default. Ricordiamoci di salvare tutto.

Per il momento bastano queste configurazioni base per avere un sistema di caching funzionante, ma avevamo detto che volevamo mettere in cache anche le risorse con i parametri, allora ci basta abilitare queste due opzioni; andare nella sezione Object Cache e abilitarla.

Andare successivamente nella voce di menu Performance – Browser Cache

Abilitate l’opzione Prevent caching of object after change e Remove query strings from static resource.

Se effettuate delle modifiche al sistema di cache successive, ricordate di fare Save Settings e Purge Cache, cosi da salvare l’opzione appena modifica e dire al sistema di ripulire la cache.

Purtroppo non tutte le query string possono essere rimosse, alcune sono necessarie per il funzionamento corretto di WordPress e i suoi plugin, quindi è sconsigliabile utilizzare funzioni che eliminano la parte finale delle chiamate, in qualche caso dobbiamo accontentarci.

ATTENZIONE
Non abilitate opzioni a caso, oppure tutte le opzioni credendo che più se ne abilitano e più il sito diventa veloce, un sistema di caching se settato male può causare danni.

Alla fine di questa prima Ottimizzazione arriviamo ad avere questo risultato:

Siamo riusciti ad arrivare alla fatidica A su PageSpeed, con un punteggio di 92%, questo risultato ovviamente deve essere mantenuto, l’ottimizzazione deve essere fatta sempre, quindi immagini sempre dimensionate corrette ed ottimizzate, e tenere sotto controllo l’utilizzo dei Plugin. Vediamo altri parametri e come ottimizzarli.

Defer parsing of JavaScript

Durante il caricamento di una pagina web vengono invocati diversi javascript, soprattutto se il sito ha installato diversi plugin; questi caricamenti rallentano la visualizzazione della pagina, quindi dobbiamo in qualche modo gestire questa situazione.

Possiamo risolvere il problema del Defer parsing of javascript semplicemente aggiungendo una funzione in function.php del nostro tema, ecco come abbiamo fatto noi:

function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, ‘.js’ ) ) return $url;
if ( strpos( $url, ‘jquery.js’ ) ) return $url;
return “$url’ defer “;
}
add_filter( ‘clean_url’, ‘defer_parsing_of_js’, 11, 1 );

Ecco il risultato:

 

Inline Small CSS

Si risolve con W3 Total Cache, andiamo in General Settings, nella sezione Minify abilitiamo la prima voce lasciando il resto invariato.

Attenzione
Appena clicchiamo su Enable, W3 Total cache ci avvisa che l’operazione che stiamo eseguendo è pericolosa, e ci chiede se vogliamo proseguire assumendoci i rischi, ovviamente questa operazione deve essere fatta dopo aver fatto un backup totale e ancora meglio effettuarla in ambiente di staging. Clicchiamo su I Understand the Risk se siamo consapevoli di voler proseguire.
Save setting e purge cache

Ultimiamo la modifica andando in Performance – Minify, cerchiamo la sezione HTML & XML, abilitiamo la voce HTML minify e mettiamo la spunta anche su Inline CSS minification e anche su Inline JS minification.

Save setting e purge cache

Ecco il risultato:

Questo case study si ferma qui, abbiamo visto come risolvere alcune voci notificate da GtMetrix, speriamo sia utile a qualcuno.