Ukoliko ste se bavili optimizacijom sajtova, verovatno ste naleteli na dobro poznate savete od Yahoo-a i prvi među njima savet za smanjenje broja HTTP zahteva. Kombinovanje više sličica u jednu i prikazivanje delova te kombinovane slike preko koordinata (background-position u CSS-u) ima svoje ogromne prednosti.

Uzmimo za primer da na stranici imamo tri liste sa tri različite sličice za strelice. Kombinovanjem, tri sličice možemo spojiti u jednu.

U CSS fajlu je takođe veoma jednostavno podesiti putanje do sličice, i koordinate za svaku listu posebno. Ujedno, CSS kod sličan ovome se može videti na mnogim sajtovima širom interneta, recimo A List Apart – CSS Sprites ili Image Sprite CSS Navigation.

ul {
	list-style-type:none;
}
ul li {
	padding-left:15px;
}
ul#black li {
	background: #fff url("arrows.jpg") no-repeat left 6px;
}
ul#blue li {
	background: #fff url("arrows.jpg") no-repeat left -14px;
}
ul#green li {
	background: #fff url("arrows.jpg") no-repeat left -34px;
}

I ako je to putanja do iste sličice, sa ovakvim kodom možemo samo pogoršati situaciju. Naš browser će poslati tri zahteva za istom sličicom i download-ovaćemo tri iste slike. Pošto je kombinovana slika većih dimenzija i veće težine od svake pojedinačne, jasno je da se ovakvom metodom uvećava protok podataka za 3 puta.

Rešenje ovog problema je veoma jednostavno i treba samo jednom “pozvati” tu sličicu, a poziciju im podesiti, za svaku listu posebno.

ul {
	list-style-type:none;
}
ul li {
	padding-left:15px;
}
ul#black li, ul#blue li, ul#green li  {
	background: #fff url("arrows.jpg") no-repeat;
}
ul#black li {
	background-position: left 6px;
}
ul#blue li {
	background-position: left -14px;
}
ul#green li {
	background-position: left -34px;
}

Možete pogledati i primere neoptimizovanog koda i optimizovanog, koji koriste različite CSS fajlove.

Dodatak: Kako videti i analizirati HTTP zahteve?

Postoji mnoštvo softvera koji omogućavaju skeniranje protoka na mrežnom adapteru računara. Moguće i najbolji među njima je Wireshark, koji može da analizira sve protokole.

Web programerima će sigurno dosta zanimljiviji biti plugin za Firefox – Live HTTP Headers. A evo i rezultata iz njega na kome se više nego jasnije vidi rezultat optimizacije.

Na tabu “Headers” možete videti kompletne GET I POST zahteve, sa headerom, kao i kompletne odgovore servera. Na tabu “Generator” se nalaze samo uprošćeni zahtevi, bez headera. Trebate samo imati u vidu da se sličice keširaju na lokalnom računaru i da ukoliko ste već posetili neku stranu, verovatno je da  zahtevi se neće pojaviti. CTRL+F5 daje realnu sliku.