BBProject.net

Czy zdarza się Wam czy to projektując własną stronę czy też odwiedzając cudzą, mieć do czynienia z dużą ilością drobnych grafik (np.: ikon) które to kolejno wypełniają zawartość strony? Czy nie można przyspieszyć tego procesu skoro każdy z plików to z reguły nie więcej niż 1KB? Oczywiście można.

Przyczyną tego stanu jest sposób w jaki przeglądarka pobiera kolejne zasoby dołączone do odwiedzanej strony. Łącząc wszystkie drobne grafiki w jeden większy plik, a następnie przy pomocy stylów CSS wybierając interesującą nas część, możemy znacznie przyspieszyć ładowanie takiej strony.

Jak działa przeglądarka?

Otwierając dowolną stronę www, uzyskujemy od serwera treść dokumentu HTML, to czy jest on statyczny czy generowany dynamicznie (przez np.: php) nie ma w tej chwili znaczenia, która jest parsowana i wyświetlana przez przeglądarkę. Jeśli ta napotka na swej drodze zewnętrzne zasoby w postaci stylów CSS, skryptów JavaScript czy też grafikę rozpoczyna ich pobieranie.

W czym tkwi problem?

Na nieszczęście, z uwagi na fakt iż protokół HTTP jest protokołem bezstanowym, każde pobranie zasobu poprzedzone jest otwarciem gniazda TCP, nawiązaniem połączenia, pobraniem danych oraz zamknięciem połączenia. Stwarza to pewien narzut w postaci danych oraz czasu. Jeśli mamy do czynienia z dużymi plikami, przykładowo zdjęciami, nie jest to tak istotne. Z kolei jeśli naszą stronę ozdabiają różne drobne elementy graficzne, wtedy ów narzut nie tyle przekracza rozmiar zasobu co wprowadza niepotrzebne opóźnienia, gdyż samo nawiązanie sesji TCP trwa dłużej niż pobranie piku.

Jak temu zaradzić?

Dobrym rozwiązaniem jest scalenie wszystkich elementów graficznych w jeden plik, np.: w postaci kolumny obrazków. Ktoś może powiedzieć, jaki w tym zysk skoro i tak przeglądarka musi pobrać tą samą ilość danych? Zgadza się, jednakże zyskujemy mnóstwo czasu na narzucie związanym z tworzeniem połączenia i jego kończeniem dla każdego zasobu z osobna. Co to oznacza w praktyce? Znacznie szybsze ładowanie strony. Oczywiście opłacalność zabiegu w dużej mierze zależy od ilości grafiki klasyfikującej się do scalenia.

A w praktyce?

Przejdźmy zatem do części praktycznej. O ile samo scalenie obrazków nie powinno stwarzać problemów o tyle ich późniejsze wykorzystanie może rodzić pytania. Jak „wyciąć” grafikę na której nam zależy? Oczywiście stosując odpowiednią klasę stylów kaskadowych. Najprostszym sposobem jest używanie obrazków jako tło którym jest nasz zbiorczy plik graficzny, przesunięty o żądaną ilość pikseli.

Zastosujmy teraz zdobytą wiedzę do stworzenia menu strony składającego się z etykiet tekstowych oraz ikon. Potrzebny nam będzie zestaw stosownych obrazków oraz odpowiednie style zastosowane do menu. Zacznijmy jednak od napisania samego kodu HTML:

<ul class="menu">
  <li class="home">Strona główna</li>
  <li class="mail">Kontakt</li>
  <li class="download">Pobierz</li>
  <li class="tools">Narzędzia</li>
</ul>

…kolejno arkusza stylów:

.menu
{
  list-style: none;
  color: #404040;
  font: bold 16px Arial;
}
.menu li
{
  float: left;
  height: 24px;
  line-height: 24px;
  padding: 0px 30px;
}
.home     { background: url(icons.png) 0px   0px no-repeat; }
.mail     { background: url(icons.png) 0px -24px no-repeat; }
.download { background: url(icons.png) 0px -48px no-repeat; }
.tools    { background: url(icons.png) 0px -72px no-repeat; }

…jeszcze dodajmy tylko użyty zestaw ikon:

…i cieszmy oko gotowym menu:

Jak widać, cała zabawa polega na odpowiednim przesunięciu tła tak aby trafić w interesujący nas punkt. Każda ikona ma rozmiar 24x24px, zatem musimy wymusić wysokość elementu menu właśnie na 24px, tak aby sąsiednie obrazki nie były widoczne.

Co zrobić w sytuacji w której mamy dużo rysunków o różnych rozmiarach? Można scalać je podobnie, jednakże lepszym wyjściem jest pogrupowanie identycznych pod względem rozmiaru w osobne pliki.