Przyspieszenie │adowania siΩ stron WWWKiedy twoja strona │aduje siΩ, nie mo┐esz pozwoliµ sobie aby ludzie nudzili siΩ ogl▒daj▒c bia│y ekran monitora. Ten artyku│ (i jego kolejne odcinki w kolejnych numerach PRO) da ci kilka wskaz≤wek jak omin▒µ czΩsto spotykane problemy z │adowaniem siΩ stron WWW i jak zachΩciµ odwiedzaj▒cych strony do poczekania tych kilku minut na za│adowanie siΩ strony i ┐eby mieli przekonanie, ┐e nie by│ to czas stracony.
Spodziewam siΩ, ┐e twoja witryna jest ju┐ prawie sko±czona. Poszczeg≤lne strony s▒ wykonane starannie i zwiΩ╝le. Wyrzucone zosta│y zbyt du┐e obrazki i inne niepotrzebne rzeczy; r≤wnie┐ ilo╢µ testu zosta│a zoptymalizowana... WiΩc wszystko powinno byµ w porz▒dku, czas │adowania strony nie powinien byµ zbyt d│ugi nawet dla tych, kt≤rzy │▒cz▒ siΩ z Internetem poprzez dial-up. Ale i tak ka┐dy odwiedzaj▒cy twoja stronΩ musi czekaµ jaki╢ tam czas, niekoniecznie d│ugi, a┐ strona siΩ za│aduje. W tym miejscu jeste╢ gotowy na postawienie sobie pytania - jak moja strona siΩ │aduje. Ten artyku│ wyja╢nia techniczne szczeg≤│y │adowania siΩ stron WWW i jak to │adowanie mo┐na przyspieszyµ.
Poprawianie u┐yteczno╢ci
Jednym z najwa┐niejszych cel≤w, kt≤ry nale┐y osi▒gn▒µ podczas tworzenia strony www jest minimalizacja czasu reakcji:
- nadrzΩdnym kryterium projektowania witryny musi byµ szybko╢µ │adowania siΩ
- najwa┐niejsz▒ kwesti▒ jest to, jak szybko u┐ytkownik zobaczy na ekranie u┐yteczn▒ informacjΩ
- rozmiar ca│ej strony jest mniej istotny, je┐eli u┐ytkownik mo┐e szybko zobaczyµ istotn▒ dla niego czΩ╢µ informacji
Ten artyku│ skupia siΩ na trzecim punkcie. Ka┐da strona WWW posiada swoj▒ w│asn▒, szczeg≤ln▒ najwa┐niejsz▒ informacjΩ. Twoim celem jest to, aby przegl▒darka wy╢wietli│a odpowiedni▒ informacjΩ, nawet wtedy, kiedy dopiero niewielki kawa│ek strony zd▒┐y│ siΩ za│adowaµ. Aby osi▒gn▒µ ten cel nale┐y wiedzieµ, ┐e:
- nastΩpuj▒ce po sobie przesy│anie kodu DHTML pozwala przegl▒darce na wy╢wietlanie strony podczas jej │adowania, nie czekaj▒c a┐ zostanie ca│a ╢ci▒gniΩta
- przegl▒darki potrafi▒ przechowywaµ wcze╢niej ╢ci▒gniΩte informacje
- wsp≤│czesne przegl▒darki s▒ w stanie wielce przyspieszyµ czas odpowiedzi poprzez │adowanie strony fragmentami
Tworzenie przyjaznych u┐ytkownikowi tabel
Odk▒d tabelki pozwalaj▒ na organizowanie element≤w stron www elastycznie i wydajnie, sk│adniki stron czΩsto zawieraj▒ siΩ pomiΩdzy par▒ znacznik≤w <table> </table>. Podczas │adowania strony, przegl▒darka mo┐e wy╢wietliµ tabele tylko wtedy, je┐eli 'wnΩtrze' tej tabeli zosta│o ╢ci▒gniΩte, tzn. zosta│o ╢ci▒gniΩte to co jest miedzy znacznikami <table> i </table>. Je┐eli chcesz, aby fragmenty strony pojawia│y siΩ zaraz po ╢ci▒gniΩciu, to niestety powoduje to ograniczone korzystanie z tabel. Idealnie by by│o gdyby uda│o ci siΩ spe│niµ nastΩpuj▒ce warunki:
- unikanie, je┐eli to mo┐liwe, zagnie┐d┐onych tabel
- tworzenie kr≤tkich tabel
- unikanie tabel do tworzenia layout'u strony (sytuacja, gdy ca│a strona jest w jednej tabeli)
Aby spe│niµ te wymagania, mo┐esz wykorzystaµ kilka technik kodowania dokumentu HTML. Aby je pokazaµ, u┐yjΩ przyk│adowej strony WWW z typowym layoutem. Przyk│ad 1 pokazuje stronΩ, sk│adaj▒c▒ siΩ z piΩciu czΩ╢ci. Takie strony s▒ czΩsto tworzone przy u┐yciu jednej tabeli, przy znacznym zagnie┐d┐aniu pomniejszych tabel. Taki styl kodowania mo┐e znacznie op≤╝niµ │adowanie strony: u┐ytkownik widzi pusty ekran, do czasu kiedy ca│▒ strona zostanie ╢ci▒gniΩta.
Przyk│ad 1: typowa strona www
Mo┐esz rozdzieliµ stronΩ na kilka niezale┐nych tabel, zachowuj▒c zdolno╢µ przegl▒darki do wy╢wietlania ka┐dej krok po kroku.
Pionowo u│o┐one tabele
Podobnie do wielu tw≤rc≤w stron, mo┐esz wprowadziµ g≤rn▒ czΩ╢µ (nag│≤wek), ╢rodek (lewa kolumna, g│≤wna czΩ╢µ i prawa kolumna) oraz doln▒ czΩ╢µ (stopka) jako trzy niezale┐ne tabele. W tym przypadku nag│≤wek bΩdzie siΩ │adowa│ w tym samym czasie co czΩ╢µ ╢rodkowa. Odwiedzaj▒cy witrynΩ nadal wiΩc musi czekaµ, a┐ warto╢ciowe informacje, czyli czΩ╢µ ╢rodkowa ╢ci▒gnie siΩ ca│kowicie.
Przyk│ad 2. Trzy niezale┐ne tabele:
<body>
<table cellspacing=0 cellpadding=0 border=0 width=100% height=33>
<tr><td bgcolor=#dddddd>[1] nag│≤wek </td></tr>
</table><table cellspacing=0 cellpadding=0 border=0 width=100% height=160>
<tr>
<td width=22% bgcolor=#f3f3f3>[2] lewa kolumna</td>
<td width=56% align=center>[3] czΩ╢µ g│≤wna</td>
<td width=22% bgcolor=#f3f3f3>[4] prawa kolumna</td>
</tr></table><table cellspacing=0 cellpadding=0 border=0 width=100% height=33>
<tr><td bgcolor=#dddddd>[5] stopka</td></tr>
</table></body>
Przy niewielkiej edycji kodu, mo┐esz rozdzieliµ stronΩ na trzy tabelki, ale rozmieszczone poziomo.
Tabele umieszczone poziomo
Aby wy╢wietliµ dwie lub wiΩcej kolumn na stronie jako niezale┐ne tabele, niekt≤re z nich powinny pojawiµ siΩ jako floating objects, czyli tzw. p│ywaj▒ce tabelki. Przyk│adem floating objects jest na przyk│ad znacznik <img>. Obrazek znajduje siΩ po lewej stronie tekstu, je┐eli atrybut align jest ustawiony na left. Atrybut align tabeli okre╢la, w kt≤rym kierunku tabelka æp│ynieÆ, powoduje, ┐e inny obiekt tego typu i otaczaj▒cy tekst umieszczaj▒ siΩ odpowiednio wobec tabeli.
W ten spos≤b, wszystkie kolumny mog▒ zostaµ zaimplementowane jako odpowiadaj▒ce sobie tabele. Ostatnia tabela mo┐e byµ umieszczona na dwa sposoby: jako p│ywaj▒ca tabela (przyk│ad 3) lub jako zwyk│y kod HTML, kt≤ry jest umieszczony dooko│a p│ywaj▒cej tabeli (przyk│ad 4)
Przyk│ad 3. Trzy p│ywaj▒ce tabelki
<!ùtutaj nag│≤wek -->
<table align=left cellspacing=0 cellpadding=0 border=0 width=22% height=160>
<tr><td bgcolor=#f3f3f3>
[2] lewa kolumna
</td></tr></table><table align=left cellspacing=0 cellpadding=0 border=0 width=56% height=160>
<tr><td align=center>
[3] cze╢µ g│≤wna
</td></tr></table><table align=left cellspacing=0 cellpadding=0 border=0 width=22% height=160>
<tr><td bgcolor=#f3f3f3>
[4] prawa kolumna
</td></tr></table><br clear=all>
<!ùtutaj stopka -->
Przyk│ad 4. Dwie p│ywaj▒ce tabelki i po nich, wystΩpuj▒ca osobno czΩ╢µ g│≤wna
<!ùtutaj nag│≤wek --><table align=left cellspacing=0 cellpadding=0 border=0 width=22% height=160>
<tr><td bgcolor=#f3f3f3>
[2] lewa kolumna
</td></tr></table><table align=right cellspacing=0 cellpadding=0 border=0 width=22% height=160>
<tr><td bgcolor=#f3f3f3>
[4] prawa kolumna
</td></tr></table>[3] czΩ╢µ g│≤wna
<br clear=all>
<!ùtutaj stopka -->
W przyk│adzie 3 i przyk│adzie 4 w r≤┐ny spos≤b jest umieszczona w kodzie HTML czΩ╢µ g│≤wna.
W przyk│adzie 3 przegl▒darki traktuj▒ czΩ╢µ lew▒, ╢rodkow▒ i praw▒ jako zwyk│e tabelki HTML.
W przyk│adzie 4 przegl▒darki umieszczaj▒ czΩ╢µ g│≤wn▒ bez wzglΩdu na uk│ad pozosta│ych kolumn. CzΩ╢µ g│≤wna nastΩpuj▒ca po lewej i prawej kolumnie jest umieszczona pomiΩdzy p│ywaj▒cymi tabelkami. Kiedy w g│≤wnej czΩ╢ci znajduje siΩ wiΩcej sk│adnik≤w ni┐ mo┐e siΩ zmie╢ciµ na przestrzeni wysoko╢ci p│ywaj▒cych kolumn obok niej, tekst czΩ╢ci g│≤wnej umieszcza siΩ poni┐ej do│u kolumn. M≤wi▒c inaczej, przegl▒darka u┐yje ca│ej szeroko╢ci strony do wy╢wietlenia czΩ╢ci g│≤wnej. To mo┐e byµ przydatn▒ cech▒ szczeg≤lnie, gdy wysoko╢µ kolumny z czΩ╢ci▒ g│≤wna znacznie przekracza wysoko╢µ kolumn obok niej.
Najwa┐niejsz▒ cech▒ drugiej mo┐liwo╢ci jest, ┐e gdy czΩ╢µ g│≤wna jest oddzielnym kodem HTML, mo┐esz nie zamykaµ w tag <table>, co powoduje, i┐ zostanie wy╢wietlona od razu, gdy strona zacznie siΩ │adowaµ.
Co wiΩcej, mo┐esz zmieniµ kolejno╢µ │adowania siΩ kolumn. Je┐eli chcesz, mo┐esz przestawiµ odpowiednie tabele - ustawiµ atrybut align, w spos≤b jaki jest pokazany w przyk│adzie 3 i przyk│adzie 4. Przyk│ad 3 ustawia kolejno╢µ │adowania czΩ╢ci strony w prosty spos≤b, jedna tabela po drugiej; w przyk│adzie 4 ┐▒damy, aby czΩ╢µ g│owna pojawi│a siΩ po kolumnach lewej i prawej.
Ograniczenia dla obiekt≤w p│ywaj▒cych
Kiedy pracujesz z obiektami p│ywaj▒cymi, musisz pamiΩtaµ o nastΩpuj▒cych sprawach:
- stosowanie p│ywaj▒cych tabel jest mniej elastycznym rozwi▒zaniem ni┐ standardowe u┐ycie tabel. W szczeg≤lno╢ci p│ywaj▒cym obiektom brak mo┐liwo╢ci skorzystania z kom≤rek tabeli, co jest bardzo doceniane przez wielu tw≤rc≤w stron WWW.
- Netscape Nawigator 4.x zaczyna wy╢wietla p│ywaj▒ce obiekty tylko po za│adowaniu ca│ej grupy powi▒zanych ze sob▒ p│ywaj▒cych obiekt≤w. W ten spos≤b, u┐ytkownicy Nevigator 4.x niewiele skorzystaj▒ z ulepsze± zwi▒zanych z przyspieszeniem │adowania stron WWW.
- Netscape 4.7 ma b│▒d, kt≤ry objawia siΩ gdy u┐yjesz procentowej szeroko╢ci poszczeg≤lnych p│ywaj▒cych obiekt≤w. Ta wersja NetscapeÆa b│Ωdnie zmniejsza szeroko╢µ ka┐dej nastΩpnej p│ywaj▒cej tabeli.
Netscape'm mo┐na siΩ zbytnio nie przejmowaµ - odsetek internaut≤w korzystaj▒cych z przegl▒darki internetowej Netscape spad│ w lipcu do najni┐szego poziomu w historii. Z aplikacji korzysta tylko 3,4% u┐ytkownik≤w Internetu - jeszcze rok temu warto╢µ ta wynosi│a 13%.
Tworzenie skrypt≤w dzia│aj▒cych po stronie klienta i │adowanie stron
Przez u┐ywanie zewnΩtrznych skrypt≤w, klient musi ╢ci▒gn▒µ plik .js tylko raz. Zwykle skrypty s▒ u┐ywane tak:Przyk│ad 5. U┐ycie zewnΩtrznych skrypt≤w
<html><head>
<script language=javascript src=common.js></script>
</head>
<body>
<form onsubmit="return validateForm()">
<!ù elementy formularza -->
</form>
</body></html>Ale, rozwa┐ inny spos≤b - dlaczego by nie umie╢ciµ zewnΩtrznego skryptu na ko±cu kodu HTML? Je┐eli tak zrobisz, widoczne czΩ╢ci strony za│aduj▒ siΩ szybciej i dopiero p≤╝niej za│aduje siΩ skrypt. W tym przypadku, rozmiar samego skryptu staje siΩ mniej wa┐ny dla u┐ytkownika. Je┐eli jednak chcesz pozwoliµ u┐ytkownikowi na interakcje ze stron▒ w czasie jej │adowania, to rozwi▒zanie mo┐e byµ z│e.
Sprawdzanie czasu │adowania siΩ strony
Je┐eli u┐ywasz serwera www Apache, mo┐esz skorzystaµ z narzΩdzia mod_bandwidth. Mo┐na tam ustawiµ prΩdko╢µ po│▒czenia i w ten spos≤b emulowaµ ╢ci▒ganie stron WWW. W ten spos≤b dowiesz siΩ jak szybko bΩdzie dzia│aµ twoja strona przy danej szybko╢ci po│▒czenia.
To jest pierwsza czΩ╢µ serii artyku│≤w po╢wiΩconych przyspieszaniu │adowania siΩ stron WWW. W kolejnych numerach PRO uka┐▒ siΩ kolejne artyku│y z tej serii:
- "Zoptymalizowany design"
- "Tworzenie szybko dzia│aj▒cych stron WWW"
- "Wymiana informacji z serwerem bez │adowania strony HTML od nowa"
- "Ulepszanie wygl▒du tabel"
- "CSS. Jak skonstruowaµ layout bez u┐ywania tabel"
- "Ekstremalna optymalizacja kodu HTML"
- "Jak u┐yµ emulatora po│▒czenia mod_bandwidth"
Mariusz Paw│owski
mario@data.pl
