Przede wszystkim należy zlokalizować które elementy naszej strony odpowiedzialne są za większość żądań http potrzebnych do jej załadowania. Częstym winowajcą są tu pliki graficzne, w szczególności odpowiedzialne za elementy menu, czy innych części graficznego interfejsu użytkownika. Ilość tego typu plików jest zazwyczaj duża, a wielkość każdego z nich wręcz znikoma. Co za tym idzie ustanawianych jest mnóstwo żądań http tylko po to żeby przesłać drobny fragment treści znajdujących się na stronie.
CSS Sprite
Podstawową techniką zmniejszania ilości plików graficznych jest tworzenie tak zwanych CSS Sprite, czyli plików złożonych z wielu oddzielnych elementów graficznych. Dzięki temu wszystkie te elementy przesyłane są jako jeden plik, a co za tym idzie wykonywane jest jedno żądanie http. Przesłany plik może być następnie wielokrotnie wykorzystywany na stronie do wyświetlanie poszczególnych jego części stanowiących osobne grafiki. W tym celu wystarczy ustawić go jako obrazek tła odpowiedniego elementu np.:
div, lub span i za pomocą parametrów background-position oraz width i height wybrać odpowiedni fragment. Poniższy fragment kodu ilustruje użycie CSS Sprite
< div style=”background-image: url(‘csssprite.png’);
background-position: -100px -45px;
width: 30px; height: 30px;”> </ div > Oprócz zalety w postaci redukcji ilości żądań http rozwiązanie to ma jeszcze jedną zaletę. Większe pliki w szczególności ułożone w poziomie zazwyczaj lepiej się kompresują niż ich części składowe osobno.
Minimalizacja odrębnych plików JavaScript i CSS
Tak samo jak w przypadku grafiki, również dodatkowy kod strony w postaci JavaScript i CSS może znajdować się w wielu plikach, a co za tym idzie wymagać wykonania wielu żądać http. Także w tym przypadku możemy w łatwy sposób zredukować ilość odrębnych plików koniecznych do załadowania strony. Z pewnością nie będzie to zgodne z zaleceniami programistów, w szczególności tych dbających o „piękno” tworzonego przez nich kodu, jednak w tym przypadku zamiast na „piękno” warto postawić na wydajność. Zarówno kod JavaScript jak i arkusze CSS powinny być połączone w możliwie jak najmniejszą ilość odrębnych plików. Należy jednak pamiętać, że w jednym pliku nie powinno się łączyć JavaScript z CSS. Szczegóły separacji tych dwóch elementów składowych stron internetowych oraz ich umiejscowienia w dokumencie HTML będzie jeszcze mowa przy innej okazji.
W idealnym przypadku każda strona internetowa powinna zawierać tylko jeden plik JavaScript i jeden plik CSS. Z praktycznego punktu widzenia jest to jednak zwykle trudne do osiągnięcia. Zazwyczaj różne podstrony tej samej witryny korzystają z różnych zestawów skryptów. Nie można pozwolić by każda strona ładowała wszystkie skrypty niezależnie od tego czy są jej potrzebne czy nie, gdyż znacznie pogorszy to wydajność i zwiększy ruch sieciowy. Z kolei przygotowywanie oddzielnych plików dla każdej podstrony w przypadku gdy korzystamy z wielu zestawów skryptów może być bardzo czasochłonne i stwarzać możliwość popełnienia błędów. Z tego względu często optymalnym rozwiązaniem jest pogrupowanie kodu w moduły które zawierają tej jego fragmenty, które najczęściej są wykorzystywane razem, a następnie dołączenie do danej strony jedynie potrzebnych modułów.
Buforowanie danych
Ilość żądań http może zostać również efektywnie zredukowana przez stosowanie nagłówków Expires, gdyż oznaczone nimi elementy, w wyznaczonym czasie nie będą pobierane z serwera, tylko z buforu przeglądarki, bez wykonywanie jakiejkolwiek komunikacji z serwerem. Jest to jednak zagadnienie na kolejny post.
