Velocizza WordPress e i CMS in 4 mosse

Michele Caivano aka Fortunecat   |  Wordpress  |  Discussione

Venerdì la notizia ufficiale dai blog di Google: la velocità di un sito viene ora considerata un fattore di posizionamento. E questo come puoi immaginare rappresenta un bel problema per tutti coloro che utilizzano WordPress, Joomla e altri CMS.

L’enorme flessibilità dei content management system si paga infatti in termini di prestazioni: tutti i sistemi che generano dinamicamente i contenuti sono ovviamente meno performanti rispetto alle tradizionali pagine html statiche.

Quindi oggi voglio darti 4 semplici consigli per velocizzare tutti i CMS (non solo WordPress).

1) Ottimizza gli Expire Headers e disattiva gli ETags

Come sapete i browser utilizzano la cache per ridurre il numero di richieste HTTP e con esse il tempo di caricamento delle pagine.

Un server può utilizzare nella propria risposta HTTP il cosiddetto Expire Header, che indica al client (al tuo pc per intenderci) per quanto tempo un componente deve essere conservato nella cache.

Gli ETags invece vengono utilizzati per determinare se il componente presente nella cache del tuo browser coincide con quello presente sul server remoto.

Perché gli ETags possono rappresentare un problema? Perchè se il tuo sito è hostato su più server, gli ETags per un medesimo file non coincidono. Quindi i tuoi utenti potrebbero ricaricare dei componenti già presenti in cache anche se non ve n’è alcun bisogno.

Vediamo come settare le impostazioni corrette, è più semplice di quanto pensi. Basta aprire il file .htaccess con il blocco note ed incollare alla fine le seguenti righe:

# Expire Headers ottimizzati per componenti statici

<IfModule mod_expires.c>

ExpiresActive On

ExpiresDefault "access plus 2 weeks"

ExpiresByType image/png "now plus 365 days"

ExpiresByType image/jpeg "now plus 365 days"

ExpiresByType image/gif "now plus 365 days"

ExpiresByType application/javascript "now plus 365 days"

ExpiresByType application/x-javascript "now plus 365 days"

ExpiresByType text/javascript "now plus 365 days"

ExpiresByType text/css "now plus 365 days"

ExpiresByType image/x-icon "now plus 365 days"

</IfModule>

# Disattiva gli ETags

<IfModule mod_headers.c>

Header unset ETag

</IfModule>

Qual è l’effetto di queste righe di codice? Per le immagini, gli script ed i css viene settato un Expire Header molto lontano nel tempo, massimizzando così la loro permanenza nella cache.

La logica è questa: più i componenti rimangono in cache, meno i tuoi utenti avrano bisogno di riscaricarli. E meno download = risparmio di banda.

2) Utilizza le Google Ajax Libraries API

Grazie a queste API puoi utilizzare le principali librerie AJAX (JQuery, Prototype, ecc…) presenti sui server di Google. Il vantaggio è evidente: l’utente, anziché scaricare le librerie dal tuo server, ne effettua il download direttamente dai velocissimi server di Google.

Big G inoltre mette a disposizione delle versioni già ottimizzate dei sopracitati script, con codici compressi e expire headers settati correttamente.

Ecco come fare per utilizzare le API:

• Per WordPress: installa il plugin Use Google Libraries. Non richiede alcuna configurazione aggiuntiva.

• Per Joomla: installa l’estensione Google Ajax Library.

• Per tutti gli altri CMS: occorre modificare l’header del template che utilizzi. Anziché caricare gli script dal tuo server puoi richiamarli dai server di Google grazie alle seguenti righe di codice:

<script src="http://www.google.com/jsapi?key=CHIAVE-API"></script>

<script type="text/javascript">

// <![CDATA[

// Carica le librerie specificando la versione corretta


google.load("jquery", "1.4.2");

google.load("jqueryui", "1.8.0");

google.load("prototype", "1.6.1.0");

google.load("scriptaculous", "1.8.3");

google.load("mootools", "1.2.4");

google.load("dojo", "1.4.1");

google.load("swfobject", "2.2");

google.load("yui", "2.8.0r4");

google.load("ext-core", "3.1.0");

google.load("jquery", "1");

// ]]>

</script>

La chiave API di Google può essere richiesta qui.

Nota bene: non devi caricare tutte le librerie, quello che ho riportato è solo un esempio. Carica solo le librerie che ti occorrono prestando particolare attenzione alla versione utilizzata.

3) Comprimi le immagini nel tema/template e spostale in un sottodominio

Per comprimere le immagini utilizza l’ottimo servizio Smush.it offerto da Yahoo!. Processa con Smush.it tutte le immagini utilizzate nel tuo template e quindi spostale su un sottodominio del tipo img.dominio.ext.

Ad esempio nel caso di Fortunecat.it, gran parte delle immagini del tema sono caricate su template-img.fortunecat.it.

Perché fare questo? Sai, molti browser limitano il numero di connessioni simultanee ad un dato dominio. Spostando le immagini sul sottodominio puoi aggirare questo ostacolo, ottimizzando così il download contemporaneo dei componenti della tua pagina web.

Inoltre per WordPress è consigliata l’installazione dell’utilissimo plugin WP Smush.it che comprime automaticamente tutte le immagini caricate nei post.

4) Comprimi CSS e Javascript

Per comprimere al massimo i file CSS e JS puoi utilizzare una delle tante versioni online di YUI Compressor. Io ad esempio utilizzo questa, ma ti basta cercare “yui compressor online” per trovarne altre.

Inoltre:

• Per WordPress: puoi utilizzare il plugin Autoptimize che effettua automaticamente le operazioni di compressione dei codici. Questo plugin, usato unitamente a WP Super Cache è in grado di migliorare notevolmente le prestazioni del nostro blog.
• Per Joomla: puoi utilizzare l’estensione JCH Optimize che minifica, combina e comprime i css e i javascript esterni, al fine di ridurre il numero di richieste http. [Update: risorsa aggiunta grazie alla gentile segnalazione di Federico]

Ed ora misuriamo il risultato…

Per misurare i risultati ottenuti puoi utilizzare i Pingdom Tools.

Con queste semplici mosse sono riuscito ad abbattere notevolmente i tempi di caricamento di Fortunecat.it, guarda qui:

Prova anche tu e poi fammi sapere quali sono i tuoi risultati lasciandomi un commento.

E se riuscirai a rendere più veloce il tuo sito grazie a questo post, non dimenticarti di condividerlo sui social network o di segnalarlo anche ai tuoi amici.

Alla prossima.

Ehi, perché non ti abboni al Feed RSS?
Abbonandoti al Feed della sezione Web Marketing riceverai
gli aggiornamenti e le notizie dal mondo dei media digitali!