Wydajne_witryny_internetowe_Przyspieszanie_dzialania_serwisow_WWW_oprzep.pdf

(267 KB) Pobierz
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
Wydawnictwo Helion
ul. Koœciuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl
Twórz wydajne i szybko dzia³aj¹ce witryny internetowe
Spis treści
Przedmowa ...............................................................................................................................9
Wprowadzenie.........................................................................................................................11
A Waga wydajności interfejsu ........................................................................................17
Określanie wydajności strony internetowej
Co dzieje się z czasem udzielania odpowiedzi?
Złota reguła wydajności
17
19
19
B Ogólny opis protokołu HTTP .......................................................................................23
Kompresja
Warunkowe
żądania
GET
Nagłówek Expires
Funkcja Keep-Alive
To tylko wprowadzenie
24
24
25
25
26
1. Reguła 1. Wykonywanie mniejszej liczby
żądań
HTTP .............................................. 27
Mapy obrazkowe
Obrazy CSS Sprite
Osadzone obrazy
Łączenie
skryptów i arkuszy stylów
Podsumowanie
27
28
30
32
33
2. Reguła 2. Używanie Content Delivery Network ........................................................35
Content Delivery Network
Oszczędności
36
37
3. Reguła 3. Używanie nagłówka Expires ......................................................................39
Nagłówek Expires
Dyrektywa max-age oraz moduł mod_expires
Bufor pusty kontra zapełniony
Nie tylko obrazy
Zmiana nazw plików
Przykłady
39
40
41
43
44
45
5
4. Reguła 4. Kompresja gzip ............................................................................................47
W jaki sposób działa kompresja?
Jakie dane kompresować?
Oszczędności
Konfiguracja
Buforowanie proxy
Przypadki skrajne
Kompresja gzip w działaniu
47
48
49
49
51
52
53
5. Reguła 5. Umieszczanie arkuszy stylów na początku dokumentu ...........................55
Progresywne generowanie
Narzędzie sleep.cgi
Pusty biały ekran
Chwilowe wyświetlenie treści strony bez zastosowanych stylów
Co może zrobić programista interfejsu?
55
56
57
60
61
6. Reguła 6. Umieszczanie skryptów na końcu dokumentu ..........................................63
Problemy związane ze skryptami
Równoległe pobieranie elementów strony
Zablokowanie przez skrypty możliwości pobierania innych elementów strony
Najgorsze rozwiązanie: skrypty na początku strony
Najlepsze rozwiązanie: skrypty na końcu dokumentu
Spojrzenie w przyszłość
63
64
66
67
67
68
7. Reguła 7. Unikanie wyrażeń CSS ................................................................................69
Uaktualnianie wyrażeń
Rozwiązanie problemu
Podsumowanie
69
70
71
8. Reguła 8. Używanie zewnętrznych plików JavaScript i CSS ..................................... 73
Kod na stronie kontra w zewnętrznym pliku
Typowe wyniki
Strona główna
Połączenie zalet obu rozwiązań
73
76
76
77
9. Reguła 9. Redukcja liczby zapytań DNS ..................................................................... 81
Buforowanie zapytań DNS oraz wartość TTL
Perspektywa przeglądarki internetowej
Zmniejszanie liczby zapytań DNS
81
84
86
10. Reguła 10. Zmniejszanie objętości kodu JavaScript ................................................... 87
Zmniejszanie objętości kodu
Zaciemnianie kodu
6
|
Spis treści
87
87
Oszczędności
Przykłady
Dodatkowe rozwiązania
89
90
91
11. Reguła 11. Unikanie przekierowań .............................................................................95
Rodzaje przekierowań
W jaki sposób przekierowanie zmniejsza wydajność?
Alternatywa dla przekierowania
95
96
98
12. Reguła 12. Usuwanie duplikujących się skryptów .................................................... 105
Powtarzające się skrypty — to się zdarza
Duplikujące się skrypty zmniejszają wydajność
Unikanie powtarzających się skryptów
105
106
107
13. Reguła 13. Konfiguracja nagłówka ETag .................................................................. 109
Czym jest ETag?
Problem związany z nagłówkiem ETag
Nagłówek ETag — używaj go lub zapomnij o nim
Używanie nagłówka ETag w praktyce
109
111
113
114
14. Reguła 14. Buforowanie zapytań Ajax ...................................................................... 117
Web 2.0, DHTML oraz Ajax
Asynchroniczny = natychmiastowy?
Optymalizacja zapytań Ajax
Buforowanie zapytań Ajax w rzeczywistych aplikacjach
117
119
120
120
15. Analiza dziesięciu witryn internetowych ................................................................ 125
Wielkość strony, czas udzielania odpowiedzi i ocena w skali YSlow
W jaki sposób zostały przeprowadzone testy?
Amazon
AOL
CNN
eBay
Google
MSN
MySpace
Wikipedia
Yahoo!
YouTube
125
127
128
130
133
135
137
141
143
146
148
150
Skorowidz ............................................................................................................................. 153
Spis treści
|
7
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.
81
Zgłoś jeśli naruszono regulamin