Mikis' Bookmarks

Nella realizzazione di un sito web ci sono molte cose da tenere presente: i contenuti, la grafica, la fruibilità e l’accessibilità. Ma poi occorre pensare anche anche al posizionamento sui motori di ricerca, alla velocità del sito… insomma, ci sono molti elementi che devono essere presi in considerazione tutti contemporaneamente dato che non sono strati che si aggiungono uno sull’altro, ma tutti ingredienti da mischiare insieme fin dall’inizio.

Se sei un webdesigner o uno sviluppatore di siti probabilmente colleghi con link esterni ai tuoi file CSS i font e le immagini di sfondo.

Perchè non è una buona idea fare dei collegamenti esterni alle risorse ?

Per ogni file che il browser deve caricare viene generata una richiesta HTTP a un server web. Ogni richiesta richiede del tempo e ciò significa che molti collegamenti esterni possono generare un forte rallentamento del tempo di caricamento della pagina.
Un modo di risolvere il problema è di usare gli sprite CSS. Un altro è di usare i Data URI sprite: incorporare tutte le immagini e i font direttamente nei fogli di stile in modo che vengano caricati tutti insieme con il file css in un’unica richiesta HTTP.

Ci sono diversi modi per ottenere questo risultato e Stylebaker si occupa proprio di questo, codificando ed includendo tutti gli elementi direttamente nel foglio di stile.

Come funziona

Spritebaker richiede di inserire un tag di riconoscimento nel file css, quindi di farne il caricamento sul sito. Nel giro di qualche istante il file viene elaborato e generato nel nuovo formato. Basterà poi usarlo al posto del precedente.

È tutto facile ?

In effetti è semplice e veloce, ma occorre tenere presente alcune limitazioni o possibili problemi.
Innanzitutto il file ottenuto deve essere verificato per controllare che tutto funzioni come previsto. Anche per questo è opportuno tenere il file css originale, che potrebbe essere necessario ricaricare in caso di fallimenti.
Le immagini contenute sono codificate come file di testo e come conseguenza il nuovo file css sarà molto grande, Per questo è opportuno attivare la compressione gzip lato server.
Non tutti i browser sono in grado di trattare i Data URI, ad esempio tutte le versioni di Internet Explorer precedenti alla 8. Altri browser hanno limitazioni nella dimensione massima che riescono a trattare dei Data URI.

Il servizio di Spritebaker è completamente gratuito.