Wydawnictwo Helion
ul. Koœciuszki 1c
44-100 Gliwice
tel. [phone]

e-mail: [e-mail]

Wydajne witryny
internetowe. Przyspieszanie
dzia³ania serwisów WWW

Autor: Steve Souders
T³umaczenie: Robert Górczyñski
ISBN: 978-83-246-1518-6
Tytu³ orygina³u:

High Performance Web Sites:

Essential Knowledge for Front-End Engineers

Format: 168x237, stron: 160

Poznaj metody przyspieszania dzia³ania witryn internetowych

•

Jak zredukowaæ iloœæ ¿¹dañ HTTP?

•

W jaki sposób skompresowaæ przesy³ane dane?

•

Jak zoptymalizowaæ interfejsy w technologii Ajax?

Tempo rozwoju internetu przeros³o najœmielsze oczekiwania. Ka¿dego dnia w sieci
pojawiaj¹ siê nowe witryny WWW i aplikacje internetowe, przyci¹gaj¹ce rzesze
u¿ytkowników. Niestety, nadal najwiêkszym problemem internautów jest niska
przepustowoœæ ³¹czy, która czêsto skutecznie zniechêca do korzystania z bardziej
rozbudowanych serwisów internetowych. Przed projektantami witryn WWW oraz
twórcami interfejsów u¿ytkownika dla aplikacji sieciowych stoi powa¿ne wyzwanie
– trzeba zoptymalizowaæ i przyspieszyæ funkcjonowanie tego, co u¿ytkownik widzi
w przegl¹darce. W ci¹gu ostatnich kilku lat pojawi³o siê sporo ciekawych rozwi¹zañ,
znacznie u³atwiaj¹cych ten proces, lecz stworzenie naprawdê wydajnego
przegl¹darkowego interfejsu u¿ytkownika wymaga opanowania wielu zagadnieñ.

Ksi¹¿ka „Wydajne witryny internetowe. Przyspieszanie dzia³ania serwisów WWW” to
kompleksowy przegl¹d i omówienie czynników sk³adaj¹cych siê na optymalny interfejs
u¿ytkownika aplikacji internetowej. Czytaj¹c j¹, dowiesz siê, jak przyspieszyæ dzia³anie
witryn WWW poprzez ograniczanie ilo!ci przesy³anych danych, buforowanie ich
i kompresowanie, optymalne rozmieszczenie elementów graficznych i zdefiniowanie
stylów CSS. Nauczysz siê tak¿e ograniczaæ rozmiary skryptów, korzystaæ z technologii
Ajax i przyspieszaæ dzia³anie elementów utworzonych za pomoc¹ programu Adobe Flash.

•

Ograniczanie iloœci ¿¹dañ HTTP

•

Korzystanie z nag³ówka Expires

•

Stosowanie kompresji GZIP

•

Odpowiednie umieszczanie definicji stylów oraz kodów skryptów

w dokumentach HTML

•

Optymalne korzystanie z CSS

•

Stosowanie zewnêtrznych plików ze skryptami

•

Redukcja iloœci zapytañ DNS

•

Buforowanie zapytañ Ajax

Twórz wydajne i szybko dzia³aj¹ce witryny internetowe

5

Spis tre

ļci

Przedmowa ...............................................................................................................................9

Wprowadzenie.........................................................................................................................11

A Waga wydajno

ļci interfejsu ........................................................................................17

OkreĈlanie wydajnoĈci strony internetowej

17

Co dzieje siö z czasem udzielania odpowiedzi?

19

Zäota reguäa wydajnoĈci

19

B Ogólny opis protoko

ĥu HTTP .......................................................................................23

Kompresja

24

Warunkowe Ĕñdania GET

24

Nagäówek Expires

25

Funkcja Keep-Alive

25

To tylko wprowadzenie

26

1. Regu

ĥa 1. Wykonywanie mniejszej liczby żédaħ HTTP ..............................................27

Mapy obrazkowe

27

Obrazy CSS Sprite

28

Osadzone obrazy

30

ãñczenie skryptów i arkuszy stylów

32

Podsumowanie

33

2. Regu

ĥa 2. Używanie Content Delivery Network ........................................................35

Content Delivery Network

36

OszczödnoĈci

37

3. Regu

ĥa 3. Używanie nagĥówka Expires ......................................................................39

Nagäówek Expires

39

Dyrektywa max-age oraz moduä mod_expires

40

Bufor pusty kontra zapeäniony

41

Nie tylko obrazy

43

Zmiana nazw plików

44

Przykäady

45

6

_

Spis tre

ļci

4. Regu

ĥa 4. Kompresja gzip ............................................................................................47

W jaki sposób dziaäa kompresja?

47

Jakie dane kompresowaè?

48

OszczödnoĈci

49

Konfiguracja

49

Buforowanie proxy

51

Przypadki skrajne

52

Kompresja gzip w dziaäaniu

53

5. Regu

ĥa 5. Umieszczanie arkuszy stylów na poczétku dokumentu ...........................55

Progresywne generowanie

55

Narzödzie sleep.cgi

56

Pusty biaäy ekran

57

Chwilowe wyĈwietlenie treĈci strony bez zastosowanych stylów

60

Co moĔe zrobiè programista interfejsu?

61

6. Regu

ĥa 6. Umieszczanie skryptów na koħcu dokumentu ..........................................63

Problemy zwiñzane ze skryptami

63

Równolegäe pobieranie elementów strony

64

Zablokowanie przez skrypty moĔliwoĈci pobierania innych elementów strony

66

Najgorsze rozwiñzanie: skrypty na poczñtku strony

67

Najlepsze rozwiñzanie: skrypty na koþcu dokumentu

67

Spojrzenie w przyszäoĈè

68

7. Regu

ĥa 7. Unikanie wyrażeħ CSS ................................................................................69

Uaktualnianie wyraĔeþ

69

Rozwiñzanie problemu

70

Podsumowanie

71

8. Regu

ĥa 8. Używanie zewnýtrznych plików JavaScript i CSS .....................................73

Kod na stronie kontra w zewnötrznym pliku

73

Typowe wyniki

76

Strona gäówna

76

Poäñczenie zalet obu rozwiñzaþ

77

9. Regu

ĥa 9. Redukcja liczby zapytaħ DNS ..................................................................... 81

Buforowanie zapytaþ DNS oraz wartoĈè TTL

81

Perspektywa przeglñdarki internetowej

84

Zmniejszanie liczby zapytaþ DNS

86

10. Regu

ĥa 10. Zmniejszanie objýtoļci kodu JavaScript ...................................................87

Zmniejszanie objötoĈci kodu

87

Zaciemnianie kodu

87

Spis tre

ļci

_

7

OszczödnoĈci

89

Przykäady

90

Dodatkowe rozwiñzania

91

11. Regu

ĥa 11. Unikanie przekierowaħ .............................................................................95

Rodzaje przekierowaþ

95

W jaki sposób przekierowanie zmniejsza wydajnoĈè?

96

Alternatywa dla przekierowania

98

12. Regu

ĥa 12. Usuwanie duplikujécych siý skryptów .................................................... 105

Powtarzajñce siö skrypty — to siö zdarza

105

Duplikujñce siö skrypty zmniejszajñ wydajnoĈè

106

Unikanie powtarzajñcych siö skryptów

107

13. Regu

ĥa 13. Konfiguracja nagĥówka ETag .................................................................. 109

Czym jest ETag?

109

Problem zwiñzany z nagäówkiem ETag

111

Nagäówek ETag — uĔywaj go lub zapomnij o nim

113

UĔywanie nagäówka ETag w praktyce

114

14. Regu

ĥa 14. Buforowanie zapytaħ Ajax ......................................................................117

Web 2.0, DHTML oraz Ajax

117

Asynchroniczny = natychmiastowy?

119

Optymalizacja zapytaþ Ajax

120

Buforowanie zapytaþ Ajax w rzeczywistych aplikacjach

120

15. Analiza dziesi

ýciu witryn internetowych ................................................................ 125

WielkoĈè strony, czas udzielania odpowiedzi i ocena w skali YSlow

125

W jaki sposób zostaäy przeprowadzone testy?

127

Amazon

128

AOL

130

CNN

133

eBay

135

Google

137

MSN

141

MySpace

143

Wikipedia

146

Yahoo!

148

YouTube

150

Skorowidz ............................................................................................................................. 153

81

ROZDZIA

Ĥ 9.

Regu

ĥa 9. Redukcja liczby zapytaħ DNS

Internet jest sieciñ bazujñcñ na znajdywaniu serwerów poprzez ich adresy IP. Adresy IP sñ
trudne do zapamiötania; nazwö serwera zawiera zwykle adres URL. Jednak adres IP nadal
pozostaje niezbödny w celu wykonania Ĕñdania przez przeglñdarkö internetowñ. OkreĈlenie
tego adresu jest zadaniem serwera DNS (Domain Name System). Wymieniony serwer DNS
zmienia nazwy serwerów WWW na adresy IP, podobnie jak ksiñĔka telefoniczna, w której dla
danego nazwiska lub instytucji moĔna odszukaè numer telefonu. Po wpisaniu w przeglñdarce
internetowej adresu www.yahoo.com. serwer DNS äñczy siö z przeglñdarkñ i zwraca jej adres IP
wskazanego serwera WWW.

PowyĔsze objaĈnienie przedstawia dodatkowñ zaletö serwera DNS: stanowi on warstwö po-
Ĉredniñ miödzy adresem URL i rzeczywistym serwerem WWW. JeĔeli wymieniony serwer
WWW zostanie zastñpiony przez inny z odmiennym adresem IP, wówczas DNS i tak umoĔliwia
uĔytkownikowi uĔywanie tej samej nazwy w celu uzyskania dostöpu do nowego serwera.
Ewentualnie, podobnie jak w przypadku witryny www.yahoo.com, z nazwñ moĔe byè powiñ-
zana wiöksza liczba adresów IP, które gwarantujñ wiökszñ wydajnoĈè witryny internetowej.

Jednak uĔywanie serwera DNS wiñĔe siö z kosztami. Wyszukanie adresu IP dla podanego
adresu URL zwykle zajmuje przeglñdarce internetowej od 20 do 120 milisekund. Do chwili
zakoþczenia zapytania DNS przeglñdarka nie moĔe pobieraè Ĕadnych elementów z podanego
serwera WWW. Czas udzielania odpowiedzi na Ĕñdanie uĔytkownika zaleĔy wiöc takĔe od
szybkoĈci dziaäania serwera DNS (zwykle zapewnianego przez dostawcö usäug internetowych
— ISP), obciñĔenia serwera, odlegäoĈci od niego oraz szybkoĈci poäñczenia z internetem. Po
opisie dziaäania DNS z punktu widzenia przeglñdarki internetowej zostanie opisana technika
zmniejszenia iloĈci czasu poĈwiöcanego na wykonywanie zapytaþ DNS.

Buforowanie zapyta

ħ DNS oraz wartoļë TTL

Zapytania DNS sñ buforowane w celu zwiökszenia wydajnoĈci. Proces buforowania moĔe
wystöpowaè na specjalnych serwerach buforujñcych obsäugiwanych przez ISP bñdĒ w sieci
lokalnej, choè wówczas buforowanie bödzie obejmowaäo poszczególne komputery uĔytkow-
ników. Jak pokazano na rysunku 9.1, po Ĕñdaniu przez uĔytkownika nazwy serwera WWW
informacje dotyczñce DNS pozostajñ w buforze DNS systemu operacyjnego (w systemie Micro-
soft Windows jest to usäuga o nazwie Klient DNS). Dalsze Ĕñdania dostöpu do danego serwera
nie wymagajñ wiöc wykonywania kolejnych zapytaþ DNS, przynajmniej przez pewien czas.

82

_

Rozdzia

ĥ 9. Reguĥa 9. Redukcja liczby zapytaħ DNS

Rysunek 9.1. Buforowanie DNS z punktu widzenia przegl

ñdarki internetowej

Wystarczajñco proste? Chwila, moment — przecieĔ wiökszoĈè przeglñdarek internetowych
posiada wäasne bufory, zupeänie niezaleĔne od bufora systemu operacyjnego. Dopóki prze-
glñdarka przechowuje rekord DNS we wäasnym buforze, nie musi angaĔowaè systemu opera-
cyjnego podczas Ĕñdania dostöpu do rekordu. Dopiero po usuniöciu rekordu z bufora prze-
glñdarki nastöpuje zapytanie kierowane do systemu operacyjnego. W takiej sytuacji system
operacyjny albo bödzie posiadaä i dostarczy odpowiedni rekord z bufora, albo wyĈle Ĕñdanie
do zdalnego serwera, co spowoduje wystñpienie potencjalnego opóĒnienia w czasie udzielania
odpowiedzi na Ĕñdanie uĔytkownika.

Proces staje siö jeszcze bardziej skomplikowany po uwzglödnieniu faktu, Ĕe programiĈci zdajñ
sobie sprawö, iĔ adres IP ulega zmianie i zuĔywa pamiöè bufora. Dlatego teĔ rekordy DNS sñ
okresowo usuwane z pamiöci, a kilka róĔnych ustawieþ konfiguracyjnych okreĈla sposób
i czöstotliwoĈè ich usuwania.

Czynniki wp

ĥywajéce na buforowanie DNS

W pierwszej kolejnoĈci serwer powinien okreĈliè czas buforowania rekordów. Zwracany jako
wynik zapytania rekord DNS posiada tak zwanñ wartoĈè TTL (Time-To-Live) okreĈlajñcñ mak-
symalny czas waĔnoĈci pakietu w sieci. Wymieniona wartoĈè informuje klienta o maksymalnym
czasie buforowania danego rekordu.

ChociaĔ bufor systemu operacyjnego honoruje wartoĈè TTL, to przeglñdarki internetowe ignorujñ
jñ i ustalajñ wäasne ograniczenia czasowe. Co wiöcej, przedstawiona w rozdziale B funkcja

Ke-

ep-Alive

protokoäu HTTP moĔe nadpisaè zarówno wartoĈè TTL, jak i ograniczenia czasowe

przeglñdarki. Innymi säowy, dopóki przeglñdarka internetowa i serwer WWW utrzymujñ komu-
nikacjö oraz otwarte poäñczenie TCP, nie ma Ĕadnego powodu wykonywania kolejnych zapy-
taþ DNS.

Przeglñdarki internetowe stosujñ wäasne ograniczenia dotyczñce liczby buforowanych rekordów
DNS, niezaleĔnie od czasu, w jakim rekordy znajdujñ siö w buforze. JeĔeli w krótkim czasie
uĔytkownik odwiedza wiele róĔnych witryn posiadajñcych odmienne nazwy domen, wówczas
wczeĈniejsze rekordy DNS zostanñ usuniöte z bufora i zajdzie koniecznoĈè przeprowadzenia
kolejnego zapytania DNS.

Buforowanie zapyta

ħ DNS oraz wartoļë TTL

_

83

NaleĔy pamiötaè, Ĕe po usuniöciu rekordu DNS z bufora przeglñdarki system operacyjny wciñĔ
moĔe zawieraè go we wäasnym buforze. W takim przypadku uniknie siö potrzeby wykony-
wania zapytania sieciowego, które moĔe wyraĒnie wydäuĔyè czas udzielania odpowiedzi na
Ĕñdanie uĔytkownika.

Warto

ļci TTL

Maksymalne wartoĈci TTL dla dziesiöciu najczöĈciej odwiedzanych witryn w USA wahajñ siö
od minuty do jednej godziny, jak przedstawiono w tabeli 9.1.

Tabela 9.1. Warto

Ĉci TTL

Domena

TTL

http://www.amazon.com

1 minuta

http://www.aol.com

1 minuta

http://www.cnn.com

10 minut

http://www.ebay.com

1 godzina

http://www.google.com

5 minut

http://www.msn.com

5 minut

http://www.myspace.com

1 godzina

http://www.wikipedia.org

1 godzina

http://www.yahoo.com

1 minuta

http://www.youtube.com

5 minut

Dlaczego pomiödzy wymienionymi wartoĈciami wystöpujñ tak duĔe róĔnice? Prawdopodobnie
wynika to z poäñczenia czynników geograficznych i historycznych. Interesujñcy dokument
RFC

1

zawiera szczegóäowy opis formatu rekordów DNS oraz najczöĈciej popeänianych podczas

ich konfiguracji bäödów. Pierwsza wskazówka w wymienionym dokumencie dotyczy unikania
ustalania zbyt maäych wartoĈci TTL, a wartoĈè zalecana wynosi jeden dzieþ!

Wymienione dziesiöè najczöĈciej odwiedzanych witryn w USA posiada ogromnñ liczbö uĔyt-
kowników, a ich celem jest poprawne dziaäanie DNS pomimo awarii serwera, wirtualnego adre-
su IP (VIP) lub kolokacji serwera. Z tego powodu Yahoo! stosuje maäñ wartoĈè TTL. Z drugiej
strony, MySpace uĔywa jednej kolokacji serwera. Poprawne dziaäanie usäugi pomimo awarii
ma mniej krytyczne znaczenie dla bieĔñcej topologii sieci, stñd zastosowanie wiökszej wartoĈci
TTL, która zmniejsza liczbö zapytaþ DNS, co z kolei redukuje obciñĔenie serwerów DNS.

Zalecenia dotyczñce konfiguracji DNS sñ poza zasiögiem tematycznym niniejszej ksiñĔki. Znacz-
nie istotniejszym zagadnieniem jest wpäyw buforowania DNS na wydajnoĈè stron internetowych.
Zapoznamy siö wiöc z buforowaniem DNS z punktu widzenia przeglñdarki internetowej w celu
okreĈlenia liczby zapytaþ DNS wykonywanych przez strony internetowe.

Przeciötna wartoĈè TTL otrzymywana przez klienta z rekordu DNS jest poäowñ maksymalnej
wartoĈci TTL. Wynika to z faktu, Ĕe serwer DNS sam posiada wartoĈè TTL powiñzanñ z re-
kordem DNS. Kiedy przeglñdarka wykonuje zapytanie DNS, wtedy serwer DNS zwraca iloĈè
czasu pozostaäñ w TTL dla danego rekordu. JeĔeli maksymalna wartoĈè TTL wynosi 5 minut,

1

Common DNS Data File Configuration Errors, http://tools.ietf.org/html/rfc1537.

Czytaj dalej...

84

_

Rozdzia

ĥ 9. Reguĥa 9. Redukcja liczby zapytaħ DNS

wówczas wartoĈè TTL zwracana przez serwer DNS waha siö od jednej do trzystu sekund,
natomiast wartoĈè przeciötna wynosi 150 sekund. WartoĈè TTL dla danego serwera WWW jest
inna podczas wykonywania kaĔdego zapytania DNS.

Perspektywa przegl

édarki internetowej

Jak wspomniano we wczeĈniejszym podrozdziale „Czynniki wpäywajñce na buforowanie DNS”,
duĔa liczba czynników ma wpäyw na liczbö zdalnych zapytaþ DNS wykonywanych przez
przeglñdarkö internetowñ. Istniejñca specyfikacja DNS (http://tools.ietf.org/html/rfc1034) pozwala
klientom na elastycznoĈè w kwestii sposobu dziaäania bufora DNS. W podrozdziale skoncen-
trujemy siö na przeglñdarkach Internet Explorer oraz Firefox w systemie Microsoft Windows,
gdyĔ sñ to najpopularniejsze platformy.

Bufor DNS w systemie Microsoft Windows jest zarzñdzany przez usäugö Klient DNS. UĔytkow-
nik moĔe wyĈwietliè i usunñè zawartoĈè wymienionej usäugi za pomocñ polecenia

ipconfig

:

ipconfig /displaydns
ipconfig /flushdns

Ponowne uruchomienie systemu równieĔ powoduje wyczyszczenie bufora usäugi Klient DNS.
Oprócz wymienionej usäugi przeglñdarki Internet Explorer oraz Firefox posiadajñ wäasne bufory
DNS. Ponowne uruchomienie przeglñdarki internetowej powoduje wyczyszczenie bufora
przeglñdarki, ale nie bufora usäugi Klient DNS.

Internet Explorer

Bufor DNS przeglñdarki Internet Explorer jest nadzorowany przez trzy ustawienia rejestru:

DnsCacheTimeout

,

KeepAliveTimeout

oraz

ServerInfoTimeOut

tworzone w nastöpujñcym

kluczu rejestru:

HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\InternetSettings\

Na witrynie Microsoftu znajdujñ siö dwa artykuäy opisujñce wpäyw powyĔszych ustawieþ
rejestru na bufor DNS

2

. Te artykuäy wskazujñ nastöpujñce wartoĈci domyĈlne wymienionych

powyĔej ustawieþ rejestru:

x

DnsCacheTimeout

: 30 minut,

x

KeepAliveTimeout

: 1 minuta,

x

ServerInfoTimeOut

: 2 minuty.

Warto w tym miejscu wspomnieè (poniewaĔ nie zostaäo to dobrze wyjaĈnione w artykuäach
Microsoftu), Ĕe wartoĈci TTL serwera DNS mniejsze niĔ 30 minut majñ maäy wpäyw na czösto-
tliwoĈè zapytaþ DNS wykonywanych przez przeglñdarkö. Gdy przeglñdarka umieĈci w bu-
forze rekord DNS, bödzie on uĔywany przez 30 minut. JeĔeli wystñpi bäñd, wtedy zapytanie
DNS zostanie wykonane jeszcze przed upäywem tego czasu. W normalnych warunkach maäa
wartoĈè TTL (poniĔej trzydziestu minut) nie spowoduje zwiökszenia liczby zapytaþ DNS wy-
konywanych przez przeglñdarkö Internet Explorer.

2

How Internet Explorer uses the cache for DNS host entries, http://support.microsoft.com/default.aspx?scid=KB;en-us;
´263558.

How to change the default keep-alive time-out value in Internet Explorer, http://support.microsoft.com/kb/813827.