Jak przyspieszyć ładowanie się stron?

Ostatnimi czasy natknąłem się na ciekawy artykuł napisany przez jednego z inżynierów Googla - Aarona Hopkins'a. Opisuje on wiele czynników wpływających na szybkość ładowania się stron.

Jednym ze źródeł problemu powolnego ładowania się jest ilość elementów, o które musi zapytać przeglądarka. Dlaczego?

• Przeglądarki takie jak Firefox czy IE wykonują kolejne zapytanie http dopiero po zakończeniu poprzedniego (tzw. opcja pipelining jest domyślnie wyłączona), jedyną przeglądarką posiadającą tą opcję włączoną domyślnie jest Opera. Dodatkowo serwery posiadają w większości wyłączoną opcję keepalive, która pozwala na omijanie zbędnych handshake'ów podczas kolejnych zapytań.
  
• Zarówno IE jak i Firefox mają limit dwóch połączeń do jednego hosta (przy nagłówku HTTP/1.1) oraz osiem połączeń całkowicie.
• Większość łącz internetowych posiada asymetryczny transfer. W czym problem? Otóż wysłanie kilku-nastu/dziesięciu zapytań o obrazki, jscript czy css'y może przyblokować upload, który z reguły jest w stosunku 1:5 - 1:20 z downloadem.

Jak sobie z tym radzić? Jest kilka metod wykorzystujących zasady działania przeglądarek, co pozwala na ominięcie tych niedogodności.

• Włącz opcję HTTP keepalive dla elementów zewnętrznych. Dzięki temu zyskasz trochę czasu i kilobajtów na zbędnych handshake'ach. Jeżeli boisz się o zbyt dużą ilość otwartych połączeń ustal limit keepalive na 5-10 sekund.
• Ładuj mniej zewnętrznych obiektów. Jeden większy obiekt załaduje się szybciej niż dwa mniejsze (jednakże mniej "płynnie" - np. w przypadku dużych obrazów pociętych na kawałki). Jeżeli Twój design zawiera mnóstwo małych gif'ów, może spróbuj stworzyć layout za pomocą styli kaskadowych CSS.
• Jeżeli posiadasz dużo obrazków, pomyśl nad umieszczeniem ich na różnych hostach. Dla przykładu możesz umieścić obrazki na static0.example.com, static1.example.com... itp. Jednakże, umieszczanie elementów na więcej niż 4 hostach nie ma sensu, z powodu globalnego limitu 8 połączeń przeglądarek (Firefox i IE).
• Ustawiaj nagłówek Expire na jak najdłuższy czas. Generalnie dobrym pomysłem jest ustawianie nagłówka na czas maksymalny, co pozwoli na cache'owanie strony i jej elementów przez przeglądarki. Nie przyspieszy to pierwszego ładowania, ale następne już znacznie. W przypadku częstych zmian grafiki, możesz spróbować umieszczać je w różnych katalogach w zależności od czasu edycji. Np. po pierwszej edycji obrazek logo jest w example.com/build/1234/logo.jpg. W przypadku chęci zmiany umieszczamy go w example.com/build/1235/logo.jpg.
• Zminimalizuj pliki nagłówkowe. W przypadku obrazków nie ma sensu składować ich na jednym hoście razem ze stronami. Przez to każdy obrazek otrzymywany jest razem z nagłówkami zawierającymi dane cookie i inne. Stwórz osobny host dla elementów stricte statycznych.

Aby zdiagnozować swoją stronę, możesz użyć kilku narzędzi. W artykule podany jest np. przepis na kod JavaScript zapisujący w logach serwera czas, jaki zabrały poszczególne zapytania. Jeżeli nie masz dostępu do logów możesz użyć innych narzędzi.

• Dla sprawdzenia strony przy użyciu zewnętrznego, szybkiego serwera możesz posłużyć sie narzędziem Pingdom.
  
• Jeżeli chcesz sprawdzić jak u Ciebie ładuje się Twoja strona skorzystaj z pluginu do Firefox'a stworzonego przez Google - Load Time Analyzer