Blog

Ottimizzazioni: ridurre le richieste HTTP

webmaster: 28/04/09 @ 13:55
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:
.sprite-images{
   background:url(/images/sprite_icons.png) left no-repeat;
   height:16px;
   padding-left:25px;
   margin-top:4px;
   cursor:pointer; /*ie*/
   text-decoration:underline;
}

.image1{
   background-position: 0px 0px;
}

.image2{
   background-position: 0px -16px;
}

.image3{
   background-position: 0px -32px;
}

Quando voglio chiamare una di queste immagini uso il seguente HTML:
<div class="sprite-images image1"></div>

Qui sotto un esempio di uno sprite:

Commenti: 8


I commenti dei lettori:

Dylan666 Dylan666 il 11 Maggio 09 @ 15:26 pm

Veramente interessante!

webmaster webmaster il 11 Maggio 09 @ 18:53 pm

a breve voglio pubblicare i risultati di tutte queste ottimizzazioni

Dylan666 Dylan666 il 14 Maggio 09 @ 15:41 pm

Se cerchi l'ottimizzazione più spinta e usi spesso le PNG dai un'occhiata a
questo:

http://entropymine.com/jason/pngrewrite/

webmaster webmaster il 15 Maggio 09 @ 12:46 pm

scaricato. appena ho un attimo lo testo

webmaster webmaster il 17 Maggio 09 @ 08:54 am

non male davvero. il mio test ha dato riduzioni attorno al 10%
le immagini che ho usato ocme test sono piccole quindi i guadagni, anche sommandoli, sono sotto 1k, ma er immagini che non cambiano mai potrebbe essere un'idea.

ho anche provato a mettere pngrewrite contro un pngcrush, ma pngrewrite si è dimostrato molto superiore:
http://pmt.sourceforge.net/pngcrush/

webmaster webmaster il 25 Maggio 09 @ 19:20 pm

ho trovato pngout, quello che pare essere un ottimo compressore per file png:
http://advsys.net/ken/utils.htm

non ho effettuato un benchmark con pngrewrite, ma il fatto che esista una gui che permette di comprimere un'intera cartella di immagini in una volta sola è qualcosa di davvero molto comodo.
http://brh.numbera.com/software/pnggauntlet/

Dylan666 Dylan666 il 26 Maggio 09 @ 01:00 am

Se quello che ti serve è il ridimensionamento di tutti i file in una cartella lo fai pure da linea di comando, anzi è più comodo perché in un certo senso puoi gestire più cose (tipo mettere un prefisso o una desinenza alle PNG ricalcolate, modificare solo quelle che hanno determinate parole nel nome ecc.).

Basta solo giocare un po' coi comandi batch

for %%a in (dir *.png) do ( if not %%a == dir pngrewrite %%a %%a)

webmaster webmaster il 24 Giugno 09 @ 19:36 pm

dylan, putroppo il tuo non sono riuscito a farlo funzionare quindi ne ho modificato un altro che ho trovato su internet

Lascia un commento

Insulti, volgarità e commenti ritenuti privi di valore verranno modificati e/o cancellati.
Nome:

Commento:
Conferma visiva: (ricarica)

Inserisci la targa della città indicata nell'immagine.

Login | Iscriviti

Username:

Password: