CSS Sprites – sposób na przyspieszenie ładowania strony

Autor: JANUZI

Na stronach często można zobaczyć informację o tym ile trwało generowanie strony. Przeważnie wartości oscylują w okolicach dziesiątek lub setek części sekundy. Jednakże sama strona potrzebuje znacznie dłuższego czasu, aby wyświetlić się w przeglądarce. Przyczyna jest dość prosta.

Wstęp

Na stronach często można zobaczyć informację o tym ile trwało generowanie strony. Przeważnie wartości oscylują w okolicach dziesiątek lub setek części sekundy. Jednakże sama strona potrzebuje znacznie dłuższego czasu, aby wyświetlić się w przeglądarce. Przyczyna jest dość prosta. Licznik generowania pokazuje jedynie ile czasu potrzebował serwer na skompletowanie strony i odesłanie jej do przeglądarki osoby odwiedzającej dany adres. Przeglądarka otrzymuje treść strony, a następnie pobiera wszystkie umieszczone na niej elementy (przeważnie w takiej kolejności, w jakiej znalazły się one w kodzie). Na czas ładowania poszczególnych elementów ma wpływ łącze internetowe, szybkość odpowiedzi z serwera DNS, nawiązywanie połączenia z docelowym serwerem (przy wyłączonym podtrzymywaniu łączności etap ten powtarzany jest dla każdego obrazka/pliku js/itd) i długość kolejki. Im więcej elementów do pobrania (przy pierwszym wejściu cache w przeglądarce jest puste), tym dłużej trwa skompletowanie całej strony, a tym samym odwiedzający musi poczekać na wyświetlenie się całej treści. Mniej cierpliwi mogą po kilkunastu sekundach oczekiwania zrezygnować, co w przypadku stron zarabiających na siebie ma przekład na zyski właściciela. Warto zatem poświęcić chwilkę, aby uzyskać stronę ciut szybszą i, w niektórych przypadkach, prezentującą się zdecydowanie lepiej.

Przykład teoretyczny

W rzeczywistym świecie elementy osadzone na stronie ładują się za każdym razem z innym czasem. Raz strona może potrzebować 10 sekund, innym razem czas ten może rozciągnąć się do 30 sekund. Dlatego też przykład będzie czysto teoretyczny. Dzięki temu łatwiej będzie pokazać pewną zależność.

Wyobraźmy sobie sytuację taką, że:

– przeglądarka musi pobrać 10 elementów

– elementy pobierane są szeregowo (tzn. po zakończeniu pobierania pierwszego przeglądarka zaczyna pobierać drugi, itd)

– każdy element ma tą samą wagę i potrzebuje jednej jednostki czasu

Jak łatwo policzyć 10 kolejno pobieranych elementów będzie potrzebować 10 jednostek czasu.

Druga sytuacja wygląda następująco:

– elementy zostały sklejone po dwa

– program graficzny skompresował kawałki tak, że potrzebują one 1,75 jednostki czasu

Otrzymujemy 8,75 jednostek czasu, co daje wyświetlenie strony o 12,5% szybciej niż w pierwszym przypadku. Podane sytuacje najlepiej przedstawi wykres.

Zastosowanie

Sprajty najczęściej stosowane są tam, gdzie następuje interakcja elementów z kursorem myszki oraz tam, gdzie layout ma działać przy różnych rozdzielczościach ekranu. Dobrze jest umieścić w css do danych fragmentów strony kolor tła (background-color), który będzie widoczny zanim nie załaduje się grafika przypisana do danego elementu. W przypadku chaosu na obrazku najlepiej wybrać kolor dominujący lub pośrednią barwę.

Typowe „podświetlenie menu” wygląda następująco: kursor znajduje się nad elementem menu, następuje odpalenie onmouseover i podmiana obrazka na inny. Po pojawieniu się zdarzenia onmouseout przywracany jest poprzedni obrazek. Sposób ten ma dwie wady: nie zadziała przy wyłączonym javascripcie oraz wymaga dodatkowego preloadera (przy podmianie obrazków widać charakterystyczne „mignięcie”. Jest też bardziej zaawansowana wersja z użyciem css: element menu dostaje swój obrazek jako tło. Dodatkowa definicja z :hover podmienia docelowy obrazek. Javascript już nie pojawia się przy elementach menu, ale nadal następuje mignięcie. Dodatkowo liczba elementów menu przekłada się na liczbę pobranych z serwera obrazków. Przy pomocy css-sprites można uzyskać efekt podświetlenia i ograniczyć liczbę elementów graficznych. Na początek należy zrobić obrazek, który będzie robić za tło dla elementów menu. Szerokość tego obrazka może być taka jak w projekcie graficznym. Natomiast wysokość wynosić będzie dwa razy tyle (2x) ile normalnie wysokość menu. Do górnej połowy wrzucamy zwykłe menu, do dolnej menu podświetlone. Niech obrazek nazywa się menu.jpg. Tworzymy css (przykład jedynie obrazuje ideę i niekoniecznie musi pasować do określonego menu):

#menu {

background-image: url( adres/menu.jpg ) ;

}

#m1 {

width: ...px ;

}

#m1:hover {

background-position: Xpx Ypx ;

}

Robimy tak dla każdego elementu menu.

Przy pomocy background-position określamy o ile ma być przesunięte tło w stosunku do elementu, w którym ma być ono wyświetlone. Poniższy rysunek powinien wyjaśnić to zagadnienie:

Jako tło zastosowany został obrazek o wymiarach 100×80 przedstawiający chmurkę. Czarny prostokąt reprezentuje element typu <div>. Element ten pozostaje stały w stosunku do tła. To ono zostało przesunięte o odpowiednią liczbę piksli w górę i w bok.

Osoby projektujące wygląd strony często sięgają do różnych dziwacznych (z punktu widzenia osoby, która później ma przygotować html i css) rozwiązań. Takimi rozwiązaniami są półprzezroczyste boksy, zdobione rogi boksów, boksy różniące się jedynie szerokością itd. Zamiast ciąć wszystko na kawałki i robić z nich osobno każdy element strony można wybrać te, których nie można uzyskać przy pomocy np. border i złożyć z nich większe kawałki, które zostaną później użyte do złożenia poszczególnych fragmentów szablonu.

Uwagi końcowe

Technika css-sprites pozwala przyspieszyć stronę, o ile jest umiejętnie stosowana. Sklejanie dużych fragmentów może doprowadzić do tego, że samo ładowanie zajmie sporo czasu. Zanim taki obrazek się załaduje osoba odwiedzająca stronę będzie widzieć kolor tła (jeśli nie został on ustawiony w css, to będzie to domyślny kolor ustawiony przez twórców przeglądarki, lub kolo tła elementu rodzicielskiego).

Waga obrazka składającego się z kilku sklejonych ze sobą elementów może wynosić więcej niż waga poszczególnych fragmentów z osobna. Wszystko zależy od tego jaki jest format obrazka, jak są ustawione elementy względem siebie oraz czy występuje pusta przestrzeń (pojawia się ona, gdy wymiary poszczególnych kawałków różnią się między sobą).

Przeglądarki różnią się między sobą. W przypadku IE6 pseudoklasa :hover powiązana jest wyłącznie z linkami. Jednakże można zastosować dodatkowy javascript (adres podany w linkach), który usunie tą niedogodność.  Trzeba jednak pamiętać o tym, że dla pozostałych przeglądarek taki dodatek nie jest potrzebny. Aby zastosować go dla IE6 i starszych wersji można użyć zapisu:

<span><!--[if lte IE 6]> tu skrypt/styl</span><span> <![endif]-->

Zapis ten jest interpretowany jedynie przez przeglądarkę Microsoftu.

Przy stosowaniu css-sprites używane są najczęściej następujące znaczniki:

• background-image – definiuje obraz, który ma być użyty jako tło
• background-color – definiuje kolor tła
• background-position – definiuje pozycję obrazka użytego jako tło
• background-repeat – określa czy tło ma się powtarzać
• background – zawiera w sobie wszystkie powyższe znaczniki
• width+height – do określenia wymiarów elementu

Linki

http://www.xs4all.nl/~peterned/csshover.html
http://www.alistapart.com/articles/sprites