Come migliorare le prestazioni del nostro sito in WordPress Come velocizzare i siti in WP sfruttando alcuni semplici tool ed accorgimenti

<span class="entry-title-primary">Come migliorare le prestazioni del nostro sito in WordPress</span> <span class="entry-subtitle">Come velocizzare i siti in WP sfruttando alcuni semplici tool ed accorgimenti</span>

In questo articolo mostreremo come sia possibile ottimizzare un sito in WordPress, cercando di seguire i suggerimenti di Google e del software online gratuito PageSpeed Insights.

Cosa fa il PageSpeed Insights

Questo servizio, raggiungibile da qui, effettua un test sull’URL da noi indicato , e ci suggerisce un punteggio, che sarà tanto più alto quanto minori saranno le “perdite di tempo” nel caricamento delle stesse: tali delay sono dovuti a numerose cause come file JS/CSS troppo grossi (richieste HTTP eccessivamente corpose, in generale), risoluzione errata del DNS, completamento della pagina bloccato per qualche motivo e così via.

Web Hosting

Solitamente le prestazioni di un server si possono misurare con parametri quali il TTFB (Time To First Byte), che rappresenta una misura della responsività della macchina sulla rete: nello specifico si tratta del tempo che intercorre tra la richiesta della pagina e l’invio del primo byte al browser. Effettuare una misurazione delle prestazioni in modo accurato presupporrebbe, inoltre, di simulare più browser che accedano alla pagina in contemporanea, per verificare altresì il comportamento del sito in caso di picchi di visite.

Pubblicità

Il PageSpeed non fa altro che “stimare” i tempi di caricamento del sito, mediante questi ed ulteriori fattori e suggerendo ai webmaster come intervenire per velocizzare il caricamento a vantaggio di tutti i visitatori.

Cosa faremo

Testare il sito in condizioni di “picchi” di visite potrebbe essere un passo ulteriore, e di fatto quello che in questa sede – molto più semplicemente – andremo a fare richiederà un browser, un blog con WordPress da ottimizzare ed un minimo di pazienza nell’effettuare i vari test (euristici o approssimati). Riporterò qui le ottimizzazioni che sono relative a questo sito web, ovviamente voi potrete seguire la stessa falsariga per il vostro, fermo restando che la soluzione adottata qui potrebbe non adattarsi necessariamente al vostro caso. Tenete conto, infine, che durante il periodo di test il sito potrebbe risultare inaccessibile o “difettoso”, per cui effettuate queste operazioni preferibilmente nelle ore notturne.

Il resto del post è diviso in parti, troverete le varie sezioni suddivise cliccando sui link con i numeri di pagina in basso su questa pagina.

Non tutte le pagine sono uguali

Il test di velocità di Google potrebbe avere esiti differenti a seconda delle pagine: la home in molti casi, per intenderci, è spesso più pesante (per varie ragioni, soprattutto progettuali) delle pagine e degli articoli singoli. Sta a voi stabilire dove si desidera arrivare, fermo restando che concentrarsi troppo ossessivamente su questo parametro rischia di farvi perdere un po’ di tempo e non è detto che sia la vostra attuale priorità.

Ad ogni modo, cercate di fissare l’attenzione sui gruppi di URL (pagine, articoli, categorie, home) che presentano il maggior numero di problemi.

Schermata 2013-08-08 alle 17.50.43

Schermata 2013-08-08 alle 17.51.06

Schermata 2013-08-08 alle 17.51.36

In questo caso la situazione sembra essere pressochè equivalente per i tre tipi, per cui andremo ad ottimizzare, per comodità, direttamente la home page.

Valutare l’efficenza dei plugin

Effettuate un primo test di PageSpeed sul vostro blog così com’è, prendete nota dei due indici di qualità e, successivamente, disattivate tutti i plugin del sito e prendete nota delle prestazioni che PS di Google vi fornisce in questo caso. Un primo confronto aiuterà a capire se i plugin interferiscano sulla velocità di caricamento delle pagine oppure no; ovviamente se è questo il caso, dovrete individuare il plugin che appensantisce ed eventualmente valutare di rimuoverlo/sostituirlo. Con i plugin attivati: 59,62,60 per il mobile e 71,74,72 per la versione desktop.

Attenzione che il tema che ho scelto qui è responsive (cioè funziona egualmente bene sugli smartphone/tablet che sui PC ordinari), questo risolve numerosi problemi dall’origine e vi evita di utilizzare plugin mobile spesso piuttosto rognosi da configurare. Con tutti plugin disattivati, invece, ho registrato: 58,60,60 per il mobile e 69,75,72 per la versione desktop, quindi ne possiamo dedurre che in prima istanza i plugin che ho adottato sul mio blog non influiscono sui tempi di caricamento della pagina.

Meglio così, perchè altrimenti avrei forse dovuto sacrificarne qualcuno: diamo uno sguardo a quelli che effettivamente ci servono, eliminiamo il superfluo eventuale e ripristiniamo la situazione iniziale. Diversamente, avrei provato a togliere di mezzo o disattivare i plugin problematici, assicurandomi che non creino errori o abbiano incompatibilità, ed eventualmente sfruttando la modalità di debug di WordPress (vedi da metà articolo in poi).

Installare WP Super Cache

Questo plugin è un po’ più facile da configurare del suo diretto concorrente W3 Total Cache, in questo caso l’ho preferito perchè mi ha fatto raggiungere prestazioni davvero impressionanti sul mio blog principale giusto stamattina. Installiamolo, quindi, ed andiamo a configurarlo adeguatamente dopo averlo attivato. A tale scopo clicchiamo su Impostazioni->Wp Super Cache, selezioniamo “Cache attiva”, clicchiamo su Aggiorna lo stato: mentre lavoriamo teniamo conto del bottone Test cache per verificare che tutto sia a posto.

Schermata 2013-08-08 alle 18.06.12

Nella sezione “Avanzato“, è importante spuntare almeno le opzioni con su scritto “raccomandato“: una cosa importante è legata allo stabilire se vogliamo fare cache via PHP (che basta spuntare la casella) oppure via htaccess, cosa che sembra funzionare molto meglio per quanto vada apparentemente in conflitto con un plugin come Better WP Security. Insomma, se non avete idea di come si configura un file .htaccess in questa sede è meglio selezionare PHP, altrimenti .htaccess vi fornirà gli strumenti per far funzionare al meglio il vostro sito.

Schermata 2013-08-08 alle 18.46.42

Cosa significano le notifiche del PageSpeed Insights di Google

Nel seguito riporto le principali tre notifiche e come si possa fare qualcosa, usando wordpress, per migliorare questi parametri a beneficio di utenti (e motori di ricerca, secondo qualcuno) e farle scomparire. Passo a questo tipo di prospettiva perchè in molti casi i webmaster hanno bisogno di capire cosa fare in caso di certe notifiche e qui lo spiego per intero: gli interventi possono non essere adatti alla totalità dei casi, si tratta in molti casi di modifiche leggermente “temerarie” da adattare caso per caso.

  • Notifica: Enable Compression, Compressing resources with gzip or deflate can reduce the number of bytes sent over the network. Google vi suggerisce di attivare la compressione gZIP sul vostro sito web, per farlo non dovrete fare altro che inserire questa porzione di direttive al server all’interno del vostro file .htaccess.
# comprimi testo, html, css, javascript e xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .png
Con questa modifica al file .htaccess, da inserire solitamente all’inizio del file prima di altre direttive già presenti, la notifica nel mio caso è effettivamente scomparsa anche se il punteggio rimaneva pressappoco identico.
Passiamo ora ad un’altro tipo di aggiustamento.
  • Notifica: Leverage browser caching Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network. Google vi suggerisce di attivare il caching degli header HTTP sul vostro sito web, per farlo non dovrete fare altro che inserire questa porzione di direttive al server all’interno del vostro file .htaccess.
## 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 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 7 days"

## CACHING ##

Dopo questa modifica si inizia a vedere qualcosa di concreto in termini di miglioramento.

Schermata 2013-08-08 alle 18.20.32

  • Notifica. Eliminate external render-blocking Javascript and CSS in above-the-fold content Your page has … blocking script resources and … blocking CSS resources. QUello che ci sta dicendo Google, in sostanza, è che esistono file JS e CSS che andrebbero richiamati nel footer anzichè nell’header. Esiste il plugin Javascript to footer che serve esattamente a questo scopo: installiamolo, attiviamolo e andiamo a vedere cosa succede in termini di prestazioni.

Stranamente in questo caso, pero’, la modifica sembra passare in modo del tutto irrilevante al PageSpeed Insights, probabilmente per una questione di cache non aggiornata (in effetti i file JS/CSS stavano ancora tutti nell’header). Potrebbe, insomma, essere solo questione di tempo, dobbiamo dare la possibilità al sistema di effettuare le modifiche ed attendere che scada la cache lato server.

Il problema più complesso da risolvere

Vi auguro che non vi succeda, ma se durante i test comparisse questa notifica ci sarebbe da “ingegnarsi” un minimo:

Reduce server response time to under 200ms

Questa notifica sembra fare riferimento ad un eccessivo TTFB (vedi all’inizio del post): se i file problematici (e Google ci dice quali sono) sono ad esempio con URL di Facebook o Twitter, poco da fare: si tratta di URL caricati da librerie esterne che non possono essere velocizzate a meno che non andiamo a raccogliere tutto, eliminare i riferimenti a script esterni (non controllabili) ed a distribuirli in una CDN.

Se la cosa sembra dipendere esclusivamente dal sito, è probabile che sia un problema di risoluzione dell’indirizzo (DNS), per cui potete provare a cambiare Name Server ad esempio. Altri casi vanno analizzati caso per caso, anche se – ho notato – il problema tende a verificarsi solo saltuariamente in alcune circostanze, per cui non è richiesto di far nulla (a parte provare a cambiare hosting, eventualmente).

Cache sulle pagine singole

Come ultimo passo: dal menu di impostazioni di WP Super Cache andiamo a cliccare su Pre-carica, selezioniamo “Modalità precarica…“, Preload tags…” e, se volete, “Inviami una mail…“, indicando la frequenza di aggiornamento del caching di cui volete essere avvisati via posta elettronica. A questo punto inseriamo un valore di aggiornamento per “Ricarica i file della cache pre-caricata ogni” – io ho messo 720 minuti – in modo da stabilire ogni quanto i file della cache vadano rigenerati, selezionate “tutto” alla voce pre-carica … articoli, cliccate prima su Aggiorna le impostazioni e poco dopo su Pre-carica la cache adesso.

Vi suggerisco di aspettare il completamento delle operazioni (la notifica via email serve a questo) prima di procedere oltre con i test: di solito, a seconda delle dimensioni del sito, ci vorranno da un paio di minuti a qualche ora al più per concludere.

Conclusioni ed osservazioni finali

Ecco le notifiche che ho impostato sulla mia email: mi è stata notificata anche la Garbage Collection, ovvero l’eliminazione programmata dei file inutili di WP.

Schermata 2013-08-08 alle 18.57.10

Andiamo a vedere cosa succede in termini di prestazioni rilevate da PageSpeed Insights.

Schermata 2013-08-08 alle 19.03.14

Risultato un po’ inferiore alle aspetattive, a mio avviso, nonostante test successivi mostrino un certo miglioramento (ricordo che partivamo da una media di 60% / 72% rispettivamente su mobile e desktop e siamo arrivati ad un incremento rispettivamente di +11% e +24%). In questo caso è mio parere che il vero collo di bottiglia possa essere l’hosting su cui gira il mio sito, anche se non ho avuto modo di verificarlo sperimentalmente.

PingDom – altro tool simile a quello di Google – sembra ad ogni modo confermare la bontà delle operazioni eseguite (non ho salvato la screenshot di partenza, per quanto il caricamento prima impiegasse circa il doppio del tempo).

Schermata 2013-08-08 alle 19.00.44

Questa è un po’ la “storia” di questo sito e delle ottimizzazioni che ho effettuato su di esso l’8 agosto 2013: non ci sono dubbi che non finisca qui, molte altre tecniche ed approcci possono essere applicati per velocizzare il caricamento delle pagine. Un efficace meccanismo di paginazione, ad esempio, può “spezzettare” gli articoli più lunghi in modo che siano visualizzabili in meno tempo e così via.

Ti piace questo articolo?

5 voti

Su Trovalost.it puntiamo sulla qualità dei contenuti da quando siamo nati: la tua sincera valutazione può aiutarci a migliorare ogni giorno.

Come migliorare le prestazioni del nostro sito in WordPress

Votato 10 / 10, da 5 utenti