Continuiamo oggi con il tormentone del momento, ossia il miglioramento delle prestazioni del proprio sito web.

Dopo aver dato le mie considerazioni sull’intervento di Web Performance Optimization: alcune considerazioni sul Convegno Gt e poi aver offerto qualche utile consiglio per Ottimizzare wordpress per renderlo più veloce e qualche trucco per utilizzare Google App Engine come Content Delivery Network oggi è il momento di passare ad uno dei punti più importanti nella riduzione dei tempi di caricamento delle pagine, ossia il numero di richieste HTTP di ogni pagina.

Per essere più precisi ogni richiesta HTTP aggiunge in media 200+ millisecondi al caricamento della pagina. La latenza tra richieste HTTP, e le limitazioni dei browser riguardo la gestione parallela delle richieste incidono in maniera determinante sulla velocità di caricamento.

Uno dei consigli che viene spesso dato è quello di usare CSS sprite che è molto utile, ma spesso molto difficile da utilizzare se non in certi casi poco efficiente.

Tuttavia esiste un ulteriore metodo per ridurre drasticamente le richieste HTTP e questo metodo è quello che consente di sfruttare i  Base64-Encoded Data URIs.

Base64-Encoded Data URIs

Per una spiegazione più dettagliata delle Data URIs potete leggere questo documento di Nicolas Zakas di Yahoo!, ma per farla breve dirò che le Data URIs permettono di descrivere eventuali risorse esterne all’interno della pagina sotto forma di dato che ne descrive il contenuto.

Questo cosa significa ? Significa semplicemente che un file CSS come un’immagine possono essere espressi in un formato che viene letto esattamente alla stregua di semplice testo e quindi senza dover richiamare risorse esterne e di conseguenza senza effettuare richieste HTTP.

Questo significa anche che possiamo riempire la nostra pagina di immagini, javascript, css senza nessun incremento in termini di richieste HTTP.

In sintesi è una cosa fantastica !

Ma facciamo un esempio

Classico utilizzo delle immagini nei CSS

{code type=css}..sfondo { background: url(http://www.andreapernici.com/wp-content/uploads/2010/02/cc-logo.png); }{/code}

Base64 Data URI As Background Image

{code type=css}.sfondo { background: url(data:image/png;base64,iVBORw0K…..); }{/code}

Come potete vedere il caso Data URI contiene moltissimi caratteri (infatti ho messo i puntini), ma descrive l’immagine all’interno del codice  eliminando completamente la richiesta HTTP. Ovviamente utilizzando questo metodo ci sarà un aumento considerevole nella dimensione della pagina, ma nel complesso e nella maggior parte dei casi il risultato sarà migliore rispetto a moltissime richieste HTTP. Inoltre il problema dell’aumento di dimensione può essere facilmente risolto utilizzando GZIP sui file che usano questa tecnica. Nella maggior parte dei casi la grandezza del file sarà la stessa sia con una tecnica che con l’altra.

Inconvenienti di questo metodo

Come sempre accade nelle belle storie di noi SEO, WebMaster, WedDesigner, Programmatori esistono le grandi masse che utilizzano le versioni datate di Internet Explorer 🙂

Le Data URI sono infatti supportate solo dai seguenti Browser:

• Firefox 2+
• Safari – all versions
• Google Chrome – all versions
• Opera 7.2+
• Internet Explorer 8+

e per quel che riguarda IE8 questo supporta solamente le Data URI inferiori a 32 kilobytes.

Alcuni strumenti per la codifica Base64

Uno degli strumenti migliori e più facili da usare è il cssembed JAR file. Una volta scaricato questo file (assicurandovi di avere Java installato) mettetelo dove volete ed eseguite questo comando:

{code type=php}java -jar cssembed-0.3.2.jar styles.css > styles-base64.css{/code}

in modo da creare il file styles-base64.css che sarà la versione codificata base64 del vostro foglio di stile (ovviamente al posto di styles.css mettete il nome del vostro file). E’ anche possibile utilizzare alcune istruzioni con questo software che permettono di mantenere il file compatibile con vecchie versioni di IE.

Esistono oltre a questo strumento anche molti siti che permettono la compressione online e uno dei più semplici è questo http://www.greywyvern.com/code/php/binary2base64.

Se siete invece su hosting linux e avete il comando php exec abilitato potete utilizzare anche questa riga di comando nei vostri script:

{code type=php}exec(“base64 -w0 nomefile”);{/code}

Conclusioni

Questo post non è nulla di futuristico perché questa tecnologia può essere usata senza troppi problemi già ora e se ne volete un esempio osservate il codice sorgente della ricerca di cotoletta su Google…oppure provate ad eseguire pagespeed di google o YSlow su Salserocafe.com…e allora perché non utilizzarla ?

A voi la scelta.