Prima di iniziare, vogliamo fornirvi alcune brevi spiegazioni del perchè ottimizzare WordPress può davvero migliorare il vostro blog o il vostro business con noi.
Rendere una pagina web più veloce implica una serie di miglioramenti che vanno dalle conversioni all’indicizzazione: Google inizierà a breve a considerare le pagine che hanno un miglior tempo di risposta per la loro indicizzazione e già oggi fornisce alcuni strumenti molto utili come Google Webmasters, per la consultazione dei dati di caricamento delle pagine del proprio sito.
Le più importanti compagnie, come Amazon.com o Google e Yahoo, ottimizzano il tempo di caricamento di tutti i loro siti web in modo da ottenere maggiori conversioni: ovvero maggiore possibilità che gli utenti clicchino sui loro banner o acquistino dei prodotti online se si tratta di un negozio di e-commerce.
Compressione di CSS e JS di WordPress tramite Plugin
WordPress presenta alcuni plugin che hanno come obiettivo quello di comprimere il CSS e il codice Javascript utilizzato dalla propria installazione. I plugin a disposizione sono diversi, noi consigliamo l’utilizzo di WP-CSS (http://wordpress.org/extend/plugins/wp-css/) e WP-JS (http://wordpress.org/extend/plugins/wp-js/) , che hanno come obiettivo quello di comprimere tramite GZIP i vostri file, in modo da poter usufruirne più velocemente tramite il webserver. I nostri piani hosting hanno di default l’abilitazione della compressione dei dati tramite GZIP, attiva su tutti i piani Hosting Linux, dal Silver Linux fino alla versione Platinum.
Un ottimo plugin che consente di avere una ottimizzazione globale, e da consigliare insieme all’utilizzo di WP-Supercache, è Autoptimize, di facile installazione: http://wordpress.org/extend/plugins/autoptimize/
Compressione di CSS e JS a mano, anche per pagine web non WordPress
Per i CSS:
Una alternativa all’uso di plugin già pronti, è quella di poter comprimere CSS e JS con alcuni servizi online molto comodi, che ci consentono di lavorare non solo con il codice destinato a WordPress, ma anche con quello di altre pagine che potrebbero essere presenti all’interno del vostro spazio web.
Code Beautifier (http://www.codebeautifier.com/) è lo strumento scelto per la compressione dei nostri CSS: si tratta di un tool online di facile utilizzo che ci consente di inserire il nostro attuale codice CSS e ottenere, in base alle nostre indicazioni, un output compresso dello stesso da sostituire.
Il consiglio più utile è quello di includere tutte le istruzioni CSS all’interno di un unico file da far caricare all’interno dei tag delle vostre pagine.
Per Javascript:
Per Javascript la compressione è altrettanto importante, per prima cosa però assicuratevi di porre tutto il codice JS alla fine delle vostre pagine, dopo la chiusura del tag di HTML, questo favorisce di per se migliori performance in fase di caricamento delle pagine.
YUI Compressor ( http://refresh-sf.com/yui/ ) è inoltre un valido strumento per la compressione del codice JS in un solo file, da utilizzare all’interno di WordPress o del nostro sito web: le impostazioni sono minimali e consentono di eseguire questa operazione davvero in pochi minuti.
Analizzare le performance del proprio sito con YSlow
Vediamo infine come possiamo ulteriormente migliorare alcuni aspetti, come il caricamento delle immagini, tramite una prima analisi con YSlow, un plugin per Firefox sviluppato da Yahoo! che ci consente di avere una panoramica dei “problemi” delle nostre pagine web e apportare le correzioni suggerite.
Per installare YSlow è sufficiente effettuare il download dell’estensione (solo per Firefox, www.firefox.com) dal sito: https://addons.mozilla.org/en-US/firefox/addon/5369/ Nel caso dovesse essere richiesto, è consigliabile anche l’installazione di Firebug, una estensione sempre per Firefox, disponibile a questo indirizzo: http://getfirebug.com/
Come utilizzare YSlow?
L’utilizzo è molto semplice, è sufficiente visitare un sito web, e richiedere l’analisi della pagina attualmente mostrata, per ottenere tutti i dati inerenti, suddivisi in categoria come mostra questa immagine:
Una serie di categorie mostrano quali sono le migliorie applicabili, oltre a fornirci, come valore globale, un punteggio di riferimento per la velocità e l’ottimizzazione della nostra pagina (in figura è rappresentato da “Grade C”). Scorrere sulle singole voci permette di ottenere i dettagli relativi all’ottimizzazione da applicare per rendere la pagina più veloce ed eliminare la voce in YSlow.
Come procedere all’ottimizzazione
YSlow fornisce alcuni plugin già pronti per l’ottimizzazione di CSS, Javascript e immagini, per raggiungerli è sufficiente cliccare sulla voce Tools e scegliere quello più adatto alle correzioni da apportare, secondo quanto suggerito dal report iniziale.
Smush.it, tool proposto da Yahoo!, consente in particolare di ottimizzare le immagini, comprimendole in modo tale da non perdere qualità nella visualizzazione delle stesse: si tratta di uno strumento molto utile nel caso il nostro blog sia composto in gran parte da immagini che possono rallentarne notevolmente l’apertura delle pagine. Il plugin è utilizzabile direttamente online, oltre che da YSlow: http://www.smushit.com/ysmush.it/