L’ottimizzazione di un sito web spazia trasversalmente dalla banale ottimizzazione delle immagini alle più spinte configurazioni lato server. Per questa ragione non basta un semplice post per coprire in modo sufficiente un argomento così vasto ed articolato.

Per cominciare diamo per scontato che si conoscano gli accorgimenti base per l’ottimizzazione di un sito web e si voglia andare oltre adottando strategie più aggressive e sicuramente meno conosciute tra cui l’oggetto di questo post: lo schema URI ‘data:‘

Si tratta di una tecnologia introdotta nell’ormai lontano 1998 e ancora ora poco usata che si rivela molto utile nell’inclusione delle immagini all’interno di una pagina web.

Che cosa fa?
Lo schema data: permette di includere il contenuto delle immagini direttamente all’interno delle pagine web sotto forma di testo. Un tipico tag html come questo:

diventa quindi qualcosa di leggermente più complicato come:

Dove ‘data:’ indica al browser che stiamo per includere dei dati direttamente dentro il tag, ‘image/jpeg‘ indica il tipo di contenuto che stiamo per inserire (in questo caso una jpeg) secondo la convenzione MIME, ‘charset=‘ indica quale set di caratteri stiamo usando mentre ‘base64‘ indica il tipo di codifica utilizzata per rappresentare i dati inclusi.

Quali i vantaggi e quali gli svantaggi?
L’idea di introdurre i dati che compongono le immagini direttamente dentro i tag può sembrare un controsenso quando parliamo di ottimizzare una pagina web per spremere fino all’ultimo byte. Tuttavia questa tecnica porta con sè un grosso vantaggio: includere le immagini con questa tecnica permette di non dover richiamare le immagini esterne tramite richieste HTTP riducendo di fatto il numero di richieste totali necessarie al caricamento della vostra pagina web.

Uno dei fattori critici nella velocità di caricamento di una pagina web è rappresentato dal numero di oggetti in essa inclusi. Più oggetti significano più richieste. Più richieste significano tempo di attesa per il vostro visitatore considerando anche che molti browser moderni limitano le connessioni concorrenti dallo stesso host a 2. A fronte di un aumento di dimensione del codice sorgente della vostra pagina otterrete quindi un evidente diminuizione del numero di richieste HTTP e conseguente aumento di velocità di caricamento della pagina.

Implementazione pratica
Ovviamente pensare di includere manualmente il contenuto di un’immagine dentro l’HTML è impensabile. Per questo motivo ci viene in aiuto PHP:

Con questa semplice funzione sarà possibile usare lo schema data: in modo semplice senza intaccare la leggibilità del codice (almeno lato sorgente ).

Fonti:
http://en.wikipedia.org/wiki/Data_URI_scheme
http://tools.ietf.org/html/rfc2397