Bardzo mnie denerwuje powolne się wczytywanie stron internetowych. Główny narzut czasowy stanowi zazwyczaj spora liczba obiektów do załadowania wraz ze stroną serwisu. Każdy obiekt powoduje wywołanie kolejnych zapytań HTTP. Efektem końcowym dla strony jest powolne wczytywanie zawartości.

Jak zminimalizować liczbę zapytań HTTP?

W czym problem?

Problem jest dość banalny. Im więcej wykonywanych jest zapytań HTTP, tym strona dłużej się wczytuje. Sprawa się jednak komplikuje, gdyż przeglądarki mają pewne ograniczenie – uniemożliwiają pobieranie wielu plików z tej samej domeny w tym samym czasie. W większości przeglądarek ograniczenie dotyczy dwóch różnych obiektów (plików).

Specyfikacja HTTP/1.0 umożliwia pobieranie maksymalnie 4 plików w jednym czasie z jednego hosta. HTTP/1.1 ogranicza już tylko do 2 plików.

W przypadku gdy strona musi wczytać więcej niż dwa obiekty, proces wygląda następująco: wczytywane są dwa pierwsze pliki i przeglądarka czeka na pobranie tych plików (nie nawiązuje kolejnych zapytań HTTP). Gdy zapytanie zostanie wykonane, pobierany jest kolejny plik, etc. Powoduje to pewne ograniczenie, gdyż użytkownicy szybszych łączy mogliby prędzej pobrać wszystkie obiekty, jednak są ograniczani przez ilość połączeń wykonywanych do jednej domeny. Jak to rozwiązać? O tym za chwilę. Tymczasem prezentuję kilka sposobów minimalizacji zapytań HTTP.

CSS Sprites

Metoda ta polega na łączeniu wielu plików graficznych w jeden większy, a następnie za pomocą CSS (pozycjonowania) wyświetlamy konkretne obszary grafiki bazowej. Dzięki temu zamiast wykonywać kilkanaście zapytań, możemy wykonać jedno zapytanie, a następnie odpowiednio pozycjonować pożądane obszary grafiki bazowej.

Image Maps

Technika ta polega na utworzeniu jednego dużego obrazu, a następnie za pomocą specjalnego elementu HTML (map) ustawiane są obszary, do których można przypiąć konkretne zdarzenia i akcje (odsyłacze). Jest to mniej wygodna technika minimalizacji zapytań HTTP, aczkolwiek czasem przydatna i ułatwiająca życie webmastera.

Kodowanie małych grafik

Kolejną metodą minimalizacji zapytań jest kodowanie niewielkiej wielkości grafik przy pomocy algorytmu base64, a następnie podstawianiu do elementów IMG HTML.

Wygląda to następująco:

Przykład:

Dzięki takiemu rozwiązaniu nie trzeba wykonywać kolejnych zapytań HTTP do zewnętrznych zasobów. Wiąże się z tym jednak problem innej natury: obrazki tworzone w ten sposób nie będą buforowane przez przeglądarkę!

Przy pomocy tej metody można również tworzyć favicon i inne rodzaje grafiki. Najlepiej jednak nie przesadzać z tym sposobem :-) Więcej informacji w RFC 2397.

Złączenia plików JavaScript / CSS

Często programiści i webdeveloperzy dołączają do strony wiele różnych plików CSS i jeszcze więcej plików JavaScript. Powoduje to wykonanie niezliczonych ilości zapytań HTTP.

Przykład z życia wzięty (nasza-klasa.pl):

Jak widzisz, sprawa nie wygląda za ciekawie. Niemniej jednak poważny webmaster nie dopuszcza do takich sytuacji, a szanuje swoich użytkowników i ich czas!

W celu optymalizacji strony należy ograniczyć liczbę pobieranych obiektów. W tym celu można połączyć wiele plików JavaScript / CSS w jeden duży (co później pozytywnie odbije się przy kompresji kodu po stronie serwera, o czym innym razem).

Across Domains

Metoda ta polega na tworzeniu wirtualnych serwerów dla domeny głównej, dzięki czemu możemy ominąć zasadę pobierania tylko dwóch plików jednocześnie! Bowiem tworząc nowe subdomeny dla wczytywanych obiektów nie ograniczamy się do jednej domeny, a dwóch lub więcej. Więcej na ten temat znajdziesz tutaj: Maximizing Parallel Downloads.

Przykład:

Podsumowanie notki

Jak widać, minimalizacja zapytań HTTP nie jest trudnym zadaniem. Wystarczy niewielka ilość czasu, a średniej wielkości serwis możemy odciążyć o kilkadziesiąt % transferu. Moim zdaniem jest to bardzo opłacalne.

Za optymalizacją wydajności serwisów powinna przemawiać również korzyść ze strony wyszukiwarek, gdyż Google faworyzuje strony wczytujące się w krótszym czasie.

Także ze strony biznesowej musimy dążyć do optymalizacji serwisu. Z badań nad użytecznością serwisów wynika, iż użytkownik jest w stanie czekać do 5 sekund na rozpoczęcie wczytywania strony (Web Page Rendering Should Be Kept to No More than Four Seconds). Jeśli nie będzie widział większych postępów, opuści stronę i przejdzie do konkurencji.

Już wkrótce postaram się więcej napisać o optymalizacji serwisów internetowych (m. in. Content Delivery Network, Cache-Control Header, ETags, Gzip Components).