Introduzione

Quando parliamo di ottimizzazione di WordPress un punto molto importante è quello relativo alla velocità di caricamento delle nostre pagine web in modo da rendere migliore l’esperienza utente. Come ho già accennato all’argomento dopo il convegno gt con il post su Web Performance Optimization credo sia il momento di realizzare una pagina dedicata all’argomento applicato a wordpress.

Il processo di ottimizzazione che descriverò di seguito non va applicato tutti i giorni, settimane o mesi, ma può essere fatta poche volte durante il corso di un anno. L’ottimizzazione può essere fatta sia sul backend che sul frontend, ma in questa pagina parleremo esclusivamente del lato pubblico ossia Ottimizzazione del Frontend.

Dopo aver caricato le nostre pagine, se andiamo a controllare il codice sorgente generato da wordpress ci possiamo accorgere che vengono spesso caricati degli script che non servono assolutamente ai nostri visitatori, ma che aggiungono peso e tempo di caricamento ad esse. Questo caricamento di inutilità viene causato spesso dal caricamento di widget o javascript non utilizzati, di css non utilizzato oppure dalla presenza di codice errato o broken link. Per riparare a queste imperfezioni è necessario spulciare il codice delle nostre pagine e capire quali sono questi file che vengono erroneamente caricati.

Compressione dei dati

• Compressione di CSS e Javascript – Code Beautifier è uno strumento online che permetto di ottenere ottimi risultati nella compressione dei CSS. Esso ti permette di accorciare le notazioni, ridurre il testo inutile, unire i selettori, comprimere i codici di colore e le proprietà dei font, rimuovere backslashes & new lines e scartare proprietà non valide. Per la compressione dei Javascript, ci sono moltissimi strumenti che la permettono come  Minify Javascript, YUI Compressor, Dojo Compressor e JSCompress. Ogni compressore utilizza il suo algoritmo e quindi devi solamente scegliere quello che ti piace di più. Se non vuoi effettuare queste operazioni manualmente esistono dei Plugin per Wordpress che ti consentono di automatizzare quasi totalmente questi processi. A tal proposito posso suggerire alcuni plugin come Web Optimizer (molto ben realizzato, ma per completare tutti i task è necessaria la versione pro – a 99 dollari – perché con quella free si possono effettuare solo poche operazioni) oppure Autoptimize plugin che è invece completamente gratuito. Questi plugin possono praticamente fare ogni cosa necessaria a velocizzare il caricamento del frontend come comprimere CSS e JS, unire tutti i file CSS e JS in uno solo, fare caching del sito, comprimere html, immagini e anche ottimizzare le installazioni vps di wordpress.Ci sono altri plugin in grado di comprimere  singolarmente i vari file come: Script Compressor – per JS e CSS, WP-JS – per JS, WP-Minify – per JS e altri come WP-HTML-Compression e GZippy.Nota bene che l’uso di troppi plugin di compressione può rallentare il tuo sito invece di velocizzarlo a causa di possibili conflitti quindi assicuratevi di utilizzare soltanto un plugin per ogni tipo di compressione.NB: Per migliorare le performance cercate di far caricare i Javascript a fondo pagina – dopo la chiusura del tag body e i CSS subito dopo il tag head di apertura.NB: Se riuscite a unire tutto il vostro codice CSS in un singolo file e tutto il vostro codice JS in un singolo file e poi li comprimente otterrete moltissimi vantaggi in termini di velocità. L’unica controindicazione a questa procedura è quella di unire insieme file JS che utilizzano  jquery e mootools – li renderà inutilizzabili.
• Compressione delle Immagini – Le immagini sono uno dei fattori principe nell’aumento della dimensione delle pagine web. Esistono fondamentalmente 2 metodi per comprimerle. Il primo metodo è quello di utilizzare il vostro image editor preferito. Il secondo invece è quello di utilizzare Smush.it di Yahoo. Smush.it è anche disponibile come plugin per wordpress e permette di comprimere e caricare le immagini automaticamente.

NB: I plugin che consentono la compressione gzip dei file CSS, JS etc… (non immagini e contenuti già compressi mi raccomando) possono essere evitati se avete la possibilità di abilitare lato server il mod_deflate di Apache e aggiungere poi al vostro file httpd.conf o .htaccess il seguente codice:

{code type=php}AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/x-httpd-eruby
AddOutputFilterByType DEFLATE text/html

# Istruzioni necessarie per evitare che vengano compressi i file già compressi come immagini, video, pdf etc etc

SetOutputFilter DEFLATE
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

# Istruzioni necessarie per compatibilità con vecchi browser

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
{/code}

Ridurre le Query PHP

Analizzando i file del tema che utilizzate vi accorgerete che moltissimo codice viene generato dinamicamente come il percorso dei file, il percorso dei css, il percorso delle immagini, il percorso dei feed rss di post-pagine commenti, l’html encoding, il titolo del blog e la sua descrizione e moltissimo altro codice. Riuscire a rimpiazzare questo codice con i valori reali permette di risparmiarsi l’esecuzione di moltissime query. Possiamo identificare i tag rimpiazzabili come 13. Il modo più semplice di fare questa operazioni di sostituzione è quello di caricare la pagina, visualizzare il codice html e copiarlo in un file. Una volta copiato questo file fate una copia di backup dei file del vostro tema e modificateli sostituendo i seguenti valori con i rispettivi della pagina html caricata.

1. <?php language_attributes(); ?> nel file header.php.
2. <?php bloginfo(‘html_type’); ?> nel file header.php.
3. <?php bloginfo(‘charset’); ?> nel file header.php.
4. <?php bloginfo(‘name’); ?> si trova un po’ ovunque nel vostro tema.
5. <meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” /> <!– leave this for stats –> in header.php. Questo va eliminato anche per evitare che chiunque conosca la versione del nostro WP.
6. <?php bloginfo(’stylesheet_url’); ?> nel file header.php.
7. <?php bloginfo(‘rss2_url’); ?> nei file header.php, sidebar.php and footer.php. Assicuratevi di cambiare manualmente questi campi nel caso in cui decidiate di passare a FeedBurner dopo aver fatto queste modifiche.
8. <?php bloginfo(‘pingback_url’); ?> nel file header.php.
9. <?php bloginfo(’stylesheet_directory’); ?> si trova un po’ ovunque nel vostro tema.
10. <?php bloginfo(‘description’); ?> si trova un po’ ovunque nel vostro tema.
11. <?php bloginfo(‘comments_rss2_url’); ?> found in sidebar.php and footer.php.
12. <!– <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. –> nel file footer.php.
13. Se usate i widgets, potete eliminare il codice che trovate nel file sidebar.php tra le linee<?php /* Widgetized sidebar, if you have the plugin installed. */
    if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
    e
    <?php endif; ?>
    Il codice contenuto tra queste linee di codice viene utilizzato solamente nel caso in cui non utilizziate i wdget. Se credete che utilizzerete sempre i widget non c’è motivo di lasciare questo codice.

Ridurre la dimensione delle pagine

• Rimuovere Widget non utilizzati o non necessari – Analizzate attentamente i widget che utilizzate nel vostro footer e nella vostra barra laterale e domandatevi se realmente questo widget aggiunge valore al vostro sito. Se la risposta è no allora questo widget non fa altro che aumentare la dimensione della vostra pagina e dunque la sua velocità.
• Ridurre il numero di commenti visualizzati – Se avete un sito molto popolare è facile ottenere una quantità molto alta di commenti e molto spesso con avatar allegato. Per molti utenti la presenza di tantissimi commenti può causare un grosso collo di bottiglia e dunque rallentare considerevolmente il caricamento della pagina. A partire dalla versione 2.7 di WordPress è possibile splittare i commenti in più pagine nella sezione Impostazioni -> Discussione.

Caching del Frontend

Come detto precedentemente ogni volta che il vostro sito viene caricato tutto il codice php del CMS viene eseguito. Se avete un’ottimo piano hosting questo non dovrebbe essere un grosso problema, ma nel caso in cui per qualsiasi motivo vi troviate ad avere a che fare con un picco di traffico molti visitatori accederanno contemporaneamente al vostro sito e il vostro server potrebbe non riuscire a gestire facilmente questa situazione.

Per evitare questo problema è possibile utilizzare il meccanismo di caching di cui parlavamo per trasformare l’output della pagina php in un file HTML statico che può essere servito ai visitatori in modo molto più veloce. La cache delle vostre pagine può essere rigenerata a intervalli orari e sulla base della frequenza con cui aggiornati il vostro sito web. Con WordPress per applicare questo meccanismo potete usare dei plugin come W3 Total Cache, WP Super Cache e Hyper Cache solo dopo aver controllato che non vadano in conflitto con altri plugin che già utilizzate.

CDN (Content Distribution/Delivery Network)

CDN è una tecnica che permette di servire i contenuti del vostro sito da server diversi distribuiti in varie parti del mondo, in modo da distribuire il carico del vostro server in modo equo tra i vari server e permettendo dunque un caricamento più rapido delle vostre pagine. Uno dei migliori servizi qualità-prezzo è sicuramente Amazon Cloudfront service con il loro S3 Service. Utilizzando questo servizio potrete hostare tutti i file CSS, JS, Immagini, Video e Audio sulla CDN Amazon con la possibilità di utilizzare dei plugin appositi come Simple Amazon S3 Upload form oppure Amazon S3 for WordPress.

Un altro plugin molto buono se utilizzare AJAX è quello di sfruttare la CDN di Google con il plugin Use Google Libraries che sostituisce in automatico i file AJAX locali con il percorso corrispondente sui server Google.

Caricare solo quando necessario – Usate i Conditional Tags

Gli autori di Plugin hanno spesso la brutta abitudine di includere JS e CSS nell’header senza includere dei controlli per il caricamento di essi solo in caso di effettivo utilizzo. In questo modo ogni plugin relativo al plugin viene caricato su ogni pagina e questo causa un drammatico rallentamento del caricamento della pagina. I metodi che possono essere utilizzati sono molteplici e ce ne sono alcuni complessi ed altri meno, ma in ognuno di essi è necessario un po’ di conoscenza del codice e dunque un po di “smanettamento”. Queste operazioni anche se non proprio immediate e di facile applicazione sono uno dei punti fondamentali nell’ottimizzazione della velocità del vostro sito basato su piattaforma wordpress.

In questa pagina vi mostrerò uno dei modi più semplici esistenti per realizzare questo snellimento delle pagine.

Andate nel file functions.php del vostro tema ed aggiungete questo codice:

{code type=php}add_action( ‘wp_print_scripts’, ‘my_deregister_javascript’, 100 );
function my_deregister_javascript() {
wp_deregister_script( ‘nome-js-del-plugin’ );
}

add_action( ‘wp_print_styles’, ‘my_deregister_styles’, 100 );

function my_deregister_styles() {
wp_deregister_style( ‘nome-css-del-plugin’ );
}
{/code}

E in modo molto semplice vedrete esclusi CSS e JS specificati.

Per migliorare questa tecnica ed applicarla in modo perfetto alle vostre esigenze potete utilizzare i Conditional Tag di Worpress.

Vi faccio un esempio che credo faccia riferimento ad uno degli scenari più consueti…Plugin Contact Form 7. Questo plugin include in tutte le vostre pagine il proprio CSS e JS. Ovviamente uno dei casi più frequenti è quello di utilizzo del plugin in questione sulla pagina chiamati “Contatti”.

Supposto questo scenario per quale motivo dobbiamo portarci dietro il codice CSS e JS di questo plugin in tutte le pagine ? Perché non farli caricare solamente nella pagina in cui effettivamente lo usiamo ?

Ecco la soluzione combinando gli script precedenti con i conditional tags:

{code type=php}add_action( ‘wp_print_scripts’, ‘my_deregister_javascript’, 100 );

function my_deregister_javascript() {
if ( !is_page(‘Contatti’) ) {
wp_deregister_script( ‘contact-form-7’ );
}
}

add_action( ‘wp_print_styles’, ‘my_deregister_styles’, 100 );

function my_deregister_styles() {
if ( !is_page(‘Contatti’) ) {
wp_deregister_style( ‘contact-form-7’ );
}
}
{/code}

Con queste piccole modifiche potrete perfezionare il vostro WordPress e caricare in modo perfetto ogni file solo dove e quando vorrete.

Suggerimenti

Aggiornate regolamente WordPress, temi e plugin e scegliete attentamente il vostro hosting provider (se volete ne conosco di ottimi per wordpress). Nel caso in cui abbiate il vostro server allora ricordatevi di aggiornarlo regolarmente per evitare possibili problemi. Se ne avete la possibilità chiedete di farvi abilitare o di abilitare voi stessi i moduli di Apache – Headers e Expires – e poi aggiungere nel vostro httpd.conf o .htaccess il seguente codice adeguatamente modificato (ho messo 2 tipologie di uso del controllo della scadenza quindi scegliete quello che preferite – con data fissa oppure con durata massima).

{code type=php}Header unset Pragma
FileETag None
Header unset ETag

Header set Cache-Control “public”
Header set Expires “Thu, 15 Apr 2010 20:00:00 GMT”
Header unset Last-Modified
Header set Cache-Control “max-age=7200, must-revalidate”

Header set Cache-Control “public”
Header set Expires “Thu, 15 Apr 2010 20:00:00 GMT”
Header unset Last-Modified
{/code}

In questo modo aggiungerete al vostro sito delle scadenza per i file che non hanno bisogno di essere ricaricati ogni volta dal browser e permetterete l’uso della cache e delle scadenze anche lato server e velocizzando in modo significativo il vostro sito agli occhi di Google e dei vostri utenti.