Ottimizzazioni: ridurre le richieste HTTP

Ho deciso di limitare il numero di chiamate al server in modo ridurne il carico di lavoro e il target ideale per questo esercizio sono le immagini. Ogni pagina di pc-facile.com è composta da decine di immagini e ogni immagine, grande o piccola che sia, è un carico di lavoro per il server.

Ero a conoscenza da tempo del trucco di unire tante piccole immagini in una più grande, ma ho deciso di prendere questa tecnica sul serio solo quando ho trovato quest'articolo sugli sprites (il nome di questa tecnica è presa dai videogiochi a 8bit).

Se cliccate sull'icona RSS in cima a questo post vedrete che si apre un layer contenente altre 9 icone: davvero tante, specialmente se si pensa che queste vengono caricate più volte, su quasi tutte le pagine del sito. Ho deciso quindi che questo fosse il target ideale per un test.

Unendo le immagini in una sola, la prima cosa che ho notato è che il peso dell'immagine più grande era di molto inferiore alla somma dei pesi delle singole immagini. Non so come mai l'immagine grande sia di 3KB, mentre le altre immagini messe insieme pesino 10KB: forse sarà dovuto da qualche ottimizzazione del programma grafico, ma il risultato è eccezionale. Se non fosse che l'obiettivo era diverso, sarei già contento con quanto abbiamo ottenuto.

Una volta creata l'immagine il codice è piuttosto semplice. Dal punto di vista CSS ho creato una classe che contiene gli attributi delle immagini e un'altra classe per ogni immagine che contiene solo le coordinate dell'immagine. L'idea è di non dover ripetere gli attributi per ogni immagine e quindi risparmiare un altro po' di banda:

Quando voglio chiamare una di queste immagini uso il seguente HTML:

Qui sotto un esempio di uno sprite: