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 Netscapea 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
