Quelli che andrò ad illustrare di seguito sono alcuni utili plugins per WordPress che consentono di monitorare e di migliorare le performance del proprio Cms. Per effettuare le verifiche e monitorare i risultati ottenuti ho utilizzato 3 strumenti:

- Google Page Speed

- Yahoo Slow (YSlow)Fi

- Fiddler 2

Strumenti

Google Page Speed

Si tratta di un tool sviluppato dai Google Labs che permette di testare il sito sotto vari punti di vista per ottenere un Report che ci indica i punti in cui può essere ottimizzato per ottenere performance migliori.

Yahoo Slow

Come PageSpeed questo tool è invece sviluppato da Yahoo e permette di ottenere una valutazione del proprio sito. Oltre ciò fornisce alcuni mini-report che consentono di vedere di quanti oggetti è composto il nostro sito, quali sono più pesanti in termini di dimensioni e una stima percentuale del vantaggio che avremmo attivando la gestione del caching (Mod_Expire).

Fiddler 2

E’ un utilissimo strumento che permette di vedere in tempo reale tutto lo scambio di Header HTTP tra Client e Server per vedere nel dettaglio quale Request causa lentezza o punta a risorse non valide che allungano i tempi di risposta.

Linee Guida

Leggendo in Rete varie guide e tutorial su SEO e ottimizzazioni delle performance si può dire che le linee guida generali di base da attuare per ottimizzare il proprio sito agli occhi dei motori di ricerca siano le seguenti:

• Ridurre il peso dei file css e js utilizzando il minify e spostando il loro caricamento alla fine della pagina (footer)
• Ridurre il peso delle immagini ottimizzandole per il Web utilizzando funzionalità quali Smush.it di Yahoo
• Utilizzare il caching degli oggetti (css,js,pdf,etc..) per ridurre al minimo i caricamenti richiesti al Server (Mod_Expire)
• Ridurre le richieste HTTP
• Attivare la Compressione lato Server (mod_deflate,gzip,zlib)

I fattori da tenere in considerazione sarebbero molti di più ma, come detto, questa vuole essere una linea guida di base. In futuro vedremo come migliorare nel dettaglio ogni singolo dettaglio del sito.

Plugin WordPress

W3 Total Cache

W3 Total Cache è uno degli strumenti più utili e completi poiché si tratta di un all-in-one che permette di gestire vari aspetti: il caching, la riduzione dei css e js, la compressione lato Server. Il plugin si suddivide in varie aree ognuna per configurare i dettagli di alcune ottimizzazioni:

• Page Cache, per configurare il caching della pagine
• Minify, per attivare la riduzione del peso dei css e dei js. Permette di combinare più elementi in un unico file riducendo quindi le chiamate Http. Invece che chiamare vari singoli Js e Css viene incluso tutto un unico file
• Database Cache, per configurare il caching delle risposte del Database
• Object Cache, per configurare il caching degli oggetti
• Browser Cache, per abilitare l’expire e la durata della cache lato browser, utile per risparmiare nelle richieste Http
• User Agent Groups, per gestire configurazioni diverse a seconda della provenienza. Utile per attivare temi ad hoc per i visitatori da device mobile
• Referrer Groups, per gestire configurazioni diverse a seconda del sito di provenienza

P.S. – In alcuni Hosting può capitare che subito dopo l’attivazione appaia un errore “500 Internal Server Error”. In quel caso andranno rimosse alcune righe del file “.htaccess”. Se dovesse capitare contattatemi commentando questo articolo.

W3 Total Cache Home Page

Javascript To Footer

Javascript To Footer una volta attivato non necessita di configurazione e provvede solo ed esclusivamente a spostare il caricamento dei JavaScript alla fine della pagina. Questo è utile poiché i Javascript spesso richiedendo il caricamento della VirtualMachine che può rallentare il caricamento. Mettendoli alla fine della pagina si garantisce una veloce visualizzazione del sito.

Javascript To Footer Home Page

P3 Plugin Performance Profiler

P3 Plugin Performance Profiler è un plugin che non server ad ottimizzare ma solamente a monitorare. Una volta installato trovate la voce sotto il menu “Strumenti”. Potrete lanciare una scansione che emulera la visita al vostro sito da parte di un utente seguendo i primi link degli ultimi post. L’operazione può richiedere dei minuti ed una volta terminata ci comunicherà tramite dei comodi grafici quali plugin installati impattano maggiormente sulle performance. Spetterà poi a noi decidere se eliminarli, sostituirli con un plugin similare o tenerceli.

P3 Plugin Performance Profiler Home Page

User Google Libraries

User Google Libraries è un utile plugin che permette di sostituire il caricamento di alcuni Javascript di WordPress con i rispettivi cloni hostati sui Server Google. Questo consente al nostro server dove siamo hostati di risparmiare l’invio di alcuni file a cui provvederà Google in parallelo e inoltre ci sarà maggiore possibilità che tali file siano già nella cache del browser. Le librerie che saranno ospitate sui Server Google sono le seguenti:

• Dojo
• jQuery
• jQuery UI
• MooTools
• Prototype
• script.aculo.us
• swfobject

Use Google Libraries Home Page

Wp Smush.it

Wp Smush.it è un plugin che permette di ottimizzare le immagini dei nostri post tramite il tool Smush.it consentendo di risparmiare qualche kb per ogni immagine ottimizzandole per il Web. Questo vi permetterà di risparmiare banda e risorse e di apparire più “piacevoli” agli occhi di un motore di ricerca.

Conclusioni

Una volta installati e configurati tutti i plugin di WordPress indicati dovreste riscontrare i primi miglioramenti. Utilizzando i tool segnalati ad inizio articolo riuscirete ad alzare il punteggio del vostro sito ottenendone benefici anche dai Motori di Ricerca che considereranno il vostro sito in modo diverso.

Provate e postate i vostri commenti indicandoci i miglioramenti ottenuti o i problemi riscontrati!

Consiglio di leggere anche il precedente articolo riguardante il miglioramento della velocità di WordPress.

Per analizzare le performance e l’impatto delle nostre modifiche su di esse ci siamo serviti del plugin “YSlow” di Yahoo e “PageSpeed” di Google che offrono la possibilità di visionare statistiche e analisi dettagliate delle varie aree del sito suggerendo le modifiche da effettuare per ottenere un punteggio migliore.

Come funziona?

Solitamente i punteggi assegnati da YSlow e PageSpeed si basano su valutazioni effettuate sui singoli oggetti di una pagina Web quali i Css, i Javacript, la loro posizione nella pagina, il peso della pagina etc.

Tutti questi fattori hanno pesi diversi ai fini della valutazione finale ma, per ottimizzare le performance del sito è necessario concentrarsi sul numero di richieste Http generate, la posizione dei Javascript e il peso della pagina che, ovviamente, è composto da tutti i singoli oggetti quali immagini, css/js, codice,etc.

Il plugin W3 Total Cache agisce in particolar modo sul peso finale della pagina e sul numero di richieste Http generate. Come è noto al momento della richiesta di una pagina il Server provvede ad inviare tutti i singoli oggetti nell’ordine previsto nel codice sorgente al Browser dell’utente. Questo avviene ad ogni click di ogni utente. Se però, come è probabile, un articolo una volta pubblicato rimane invariato per giorni non è performante far elaborare ogni volta l’intera pagina al WebServer. Il plugin serve proprio a questo ossia a creare una copia “html” dell’intera pagina elaborata dal Browser per fare in modo che alle successive richieste venga servita direttamente la pagina html (l’output generato dal Server) invece che farla elaborare ogni volta.

In questo modo, analizzando una pagina con un Http Viewer come Fiddler o Tamper Data si noterà che la prima richiesta genererà per esempio

100 richieste Http x 400 Kb x 5 secondi

mentre il seguente refresh solo

35 richieste Http x 114 kb x 2,4 secondi.

Oltre ciò è possibile applicare una compressione all’output così da ridurre ulteriormente i tempi di caricamento.

Procediamo!

Per prima cosa sono necessari i seguenti plugins:

• W3 Total Cache by W3 EDGE – consente di gestire in maniera avanzata il caching delle pagine, del Database e il Minify dei Css e Javascript. A mio avviso si tratta del miglior plugin disponibile attualmente per la gestione della cache e non appena lo si installa e attiva si riscontrano subito dei miglioramenti nei tempi di caricamento.
• No Frames -  permette di evitare che il proprio sito venga visualizzato in Frames aumentandone così il punteggio Seo.
• Javascript To Footer – utilizzando questo plugin tutti gli scripts Javascript del proprio sito verrano posizionati a fine pagina garantendo una maggior velocità di caricamento del sito.
• SEO Friendly Images – Aggiunge automaticamente i tag Html “ALT” e “TITLE” alle immagini utilizzate nei post così come consigliato dal W3C.

W3 Total Cache by W3 EDGE

Per il plugin si suddivide in più aree ognuna delle quali è personalizzabile dall’utente.

A seconda dell’Hosting utilizzato alcune funzionalità possono non essere supportate e per evitare di impazzire nella configurazione ho provveduto a creare il file di configurazione adatto all’Hosting Linux Aruba. Se dovessero verificarsi degli errori nel suo utilizzo non esistate a contattarmi.

W3 Total Cache Configuration – Hosting Linux Aruba

Una volta scaricato è necessario modificare il riferimento alla sitemap. Per fare ciò aprite il file e andate alla riga 407 che apparirà nel seguente modo:

‘pgcache.prime.sitemap’ => ‘http://www.xxxxxxx.xxx/sitemap.xml’,

e sostituite l’url con quello della vostra sitemap. Per questo sito, quindi, andrà inserito:

‘pgcache.prime.sitemap’ => ‘http://www.capn3m0.org/sitemap.xml’,

Eseguita tale modifica rinominate il file da:

w3-total-cache-config.txt

a

w3-total-cache-config.php

ed importatelo nel plugin.

Accedete al vostro Pannello Admin del WordPress e seguite il percorso:

Performace -> General Settings

In basso troverete le opzioni di “Import/Export” come nella seguente figura:

Importate il file “w3-total-cache-config.php” e il gioco è fatto!

Navigate un po’ il sito e tornate sulle stesse pagine almeno due volte per verificare come appaiono dopo che sono state cachate. Se si dovessero verificare dei problemi con Javascript o Css provvedete a disabilitare tutte le opzioni di Minify del plugin.

N.B. – Potrebbero verificarsi degli errori “500 Internal Server Error” poiché il plugin modifica automaticamente il file “.htaccess” di WordPress e non tutti gli Shared Hosting supportano alcune istruzioni che vengono inserite. No panic!

Scaricate il file “.htaccess” seguente e sostituitelo a quell presente nella root di WordPress e il problema è risolto.

.htaccess WordPress + W3 Total Cache + Mod_Deflate On

Come indicato all’inizio dell’articolo oltre al caching, che riduce notevolmente il numero di richieste e la dimensione delle pagine, è possibile applicare una ulteriore compressione. Nel file .htaccess fornito ho provveduto ad inserire le istruzioni che abilitano il Mod_Deflate di Apache che, appunto, applicano la compressione all’output inviato all’utente.

Le righe che svolgono tale compito sono le seguenti:

SetOutputFilter DEFLATE
AddOutputFilter DEFLATE text/plain
AddOutputFilter DEFLATE text/xml
AddOutputFilter DEFLATE application/xhtml+xml
AddOutputFilter DEFLATE text/css
AddOutputFilter DEFLATE application/xml
AddOutputFilter DEFLATE image/svg+xml
AddOutputFilter DEFLATE application/rss+xml
AddOutputFilter DEFLATE application/atom_xml
AddOutputFilter DEFLATE application/x-javascript
AddOutputFilter DEFLATE application/x-httpd-php
AddOutputFilter DEFLATE application/x-httpd-fastphp
AddOutputFilter DEFLATE application/x-httpd-eruby
AddOutputFilter DEFLATE text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.avi$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.mov$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.mp3$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.mp4$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.rm$ no-gzip dont-vary
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

In seguito procedete con l’installazione degli altri plugins indicati; la loro configurazione di default andrà bene.

A questo punto le operazioni sono terminate e, se tutto è andato bene, il vostro sito guadagnerà qualche punto nelle valutazioni di YSlow e PageSpeed.

Ma non ci fermiamo qui!

Faccio presente che in alcuni Shared Hosting è presente anche il Modulo Apache chiamato “Mod_expire” che consente di indicare al Browser di salvare gli oggetti nella cache locale del Pc per un periodo da noi prefissato.

Questa configurazione aumenta notevolemente i tempi di caricamento del sito poiché tutti gli oggetti quali parti del template, immagini, css e javascript saranno già presenti nell’Hard Disk del visitatore e pertanto i dati REALMENTE da scaricare saranno minimi.

Come è facile intuire aprendo due articoli a caso di questo sito le differenze tra le due pagine sono limitate all’immagine dell’articolo, il testo di esso e altri pochissimi dati. Ogni volta che navighiamo, quindi, scarichiamo per intero delle pagine da 400 kb (template,css,testo,immagini,javascript,video,etc) in cui in realtà le differenze sono solo di 10 kb (testo,immagini).

Il Mod_Expire consente proprio di evitare questo inutile spreco di banda, richieste DNS e request HTTP, facendo salvare tutto nel Browser locale e interrogando realmente il sito solo per richiedere i pochi dati necessari.

Ecco di seguito i risultati ottenuti applicando quanto indicato in questo articolo:

Come si può constatare è stato classificato come Grade B in YSlow tra gli “Smaller Site or Blog” e le richieste sono passate da 49 a 10 con una riduzione di 300k sul peso delle pagine.

Postate i risultati per i vostri siti !!!

Quest’oggi vi illustro come poter attivare e ottimizzare la compressione tramite Mod Deflate di Apache quando attiva nel proprio spazio in Hosting.

Attivando tale compressione unita ad apposite modifiche al sito per ottimizzarlo al meglio (attivazione del Minify, attivazione della cache, etc) sono riuscito ad ottenere una compressione da 266Kb originari della mia Home Page a 16 K come dimostra l’immagine sottostante realizzata utilizzando il plugin “YSlow“.

Grazie a ciò e alle modifiche apportate al sito attualmente “capn3m0.org” è passato da “Grade F” a “Grade C” di Yahoo riuscendo a ottimizzare ed ottenere A e B in tutte le categorie dove è possibile intervenire.

Di seguito vi incollo il link al file “.htaccess” da utilizzare per abilitare la compressione HTTP tramite Deflate.

Download .htaccess – Compressione HTTP ON

Qui invece, potete leggere direttamente il codice da utilizzare:

SetOutputFilter DEFLATE
AddOutputFilter DEFLATE text/html text/plain text/xml text/css application/javascript application/x-javascript application/x-httpd-php application/rss+xml application/atom_xml text/javascript
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html
 
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
 
# MSIE masquerades as Netscape, but it is fine
 BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
 
# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won't work. You can use the following
# workaround to get the desired effect:
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
 
# Don't compress images
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png)$ no-gzip dont-vary