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.come allora perché non utilizzarla ?

A voi la scelta.

150

  1. Andrea moro on

    Interessante tecnica, ma oltre a quanto da te evidenziato, ovvero limite dei browsers piuttosto che dimensioni dei file maggiori, aggiungerei una capacità di mantenimento del sito bassina, che si presta su siti consolidati ma non su quelli dove c’è bisogno di cambi repentini.

  2. Ciao Andrea. Cosa intendi per siti dove c’è bisogno di un cambio repentino ?

  3. Cambi repentini = cambi frequenti.

    Ogni volta dovresti re-encodare le immagini e non è proprio il massimo della praticità.

  4. Io personalmente le codifico tutte con degli script quindi non è poi così non-agile sia per quanto riguarda le immagini non nel css sia quelle nel css che grazie al tool segnalato sono davvero facili da ricreare.

    Il mio consiglio è dunque di tenere sempre salvato il css originale e quando si devono far modifiche farle su quello e poi codificarlo con l’apposito tool.

  5. Si probabilmente è una strada perseguibile. Cmq bel pezzo, ho imparato una cosa nuova che seppur cattiva (non supporta IE) è cmq valida.
    Come ti comporti con i detentori di quelle ciofeca di IE prima della 8?

  6. Come ho scritto nel post il cssembed supporta anche le istruzioni per mantenere la compatibilità oppure ci sono varie soluzioni in rete come:
    http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
    http://www.phpied.com/data-uris-mhtml-ie7-win7-vista-blues/
    oppure altra soluzione riconoscere il browser ed in base a questo servire l’apposito file o eseguire l’apposita funzione.

    Bello il termine ciofeca;) adatto soprattutto :)

  7. La seconda che hai detto è da perseguire lato server side. Proverò a vedere i link che hai passato. Sono curioso di approfondire.
    Hai fatto test pubblici circa il risparmi di banda e roundtrip tra una versione e l’altra?

  8. I test sono in corso su alcuni siti, ma per ora posso dirti che a quanto pare la strada più conveniente sia quella di utilizzare base64 per file minori di 50kb e usarli dopo aver compresso l’immagine al massimo. Questo fino ad ora sembra dare i risultati migliori.

    Sto facendo alcuni test anche su base64 di interi CSS e JS.

  9. Si, ma se comprimi l’immagine al massimo viene fuori una porcheria. Parli di compressione ratio/quality giusto?

  10. Sto parlando di compressione senza perdita di qualità. Un esempio con Smush.it: http://developer.yahoo.com/yslow/smushit/

  11. ma a te funziona regolarmente? Io non riesco a Smushare le immagini, rimane impiccato con immagini da 50k :(

  12. Strano. Comunque prova pure a usare il base64 e poi fare dei test perché delle volte anche con immagini più grandi si ottiene il beneficio. Quella mia era una media.

Leave a Reply

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>