Projektowanie stron, które nie irytują wszystkich
niedziela, 25 listopad 01, 10:53Ile razy słyszałeś o optymalizacji grafiki, o wycinaniu niepotrzebnego kodu? Wszystko aby przyspieszyć ładowanie strony. Czy powiedział Ci ktoś, jak WIZUALNIE przyspieszyć ładowanie strony?
Ile razy słyszałeś o optymalizacji grafiki, o wycinaniu niepotrzebnego kodu? Wszystko po to, by przyspieszyć ładowanie strony. Czy powiedział Ci ktoś, że to tylko połowa sukcesu, że nadal będziesz tracił odwiedzających? Czy powiedział Ci ktoś, jak WIZUALNIE przyspieszyć ładowanie strony?
Świat oszalał na punkcie robienia stron z wymyślną szatą graficzną. Struktura tworzonych dzisiaj stron niejednokrotnie przeraża samych twórców. Kilkanaście wielokrotnie zagnieżdżonych tabel to standard.
Nowy standard?
Odwiedź 100 popularnych stron. 90-95 z nich pokaże Ci cokolwiek dopiero po wczytaniu się całości (łącznie z bannerami) strony. Kilka nawet będzie Cię zabawiało paskiem stanu ładowania się strony. Wszystko to w czasie, gdy mogłeś już zapoznawać się z treścią ściągniętą z serwera.
Stare dobre czasy
Kiedyś było inaczej. Kiedyś nasze strony ładowały się na oczach internauty. Widział nagłówek, potem menu i krok po kroku treść aż do stopki. Widział!
Jak zirytować odwiedzającego?
Jak często odwiedzasz taką stronę: Widzisz tylko biały (szary) ekran do momentu pokazania się całości? Jedyną oznaką, że strona faktycznie się ładuje jest pasek stanu przeglądarki. Jeśli jest nią IE, nawet pasek stanu nie daje pewności. Ile razy opuściłeś taką stronę zanim Ci cokolwiek pokazała?
Połowa prawdy
Uczą Cię wszyscy, jak zmniejszyć faktycznie czas ładowania się strony. Wywalasz niepotrzebne rzeczy, ale tekstu przecież nie wywalisz. Menu przecież nie wywalisz, bannerów... też.
Szybko może się okazać, że bez wizualnego przyśpieszenia i tak będziesz tracił odwiedzających.
Jaka jest przyczyna?
Przeglądarki są tak skonstruowane, że nie pokażą Ci zawartości żadnej z komórek tabeli, dopóki nie wczytają całej tabeli.
Większość stron tworzy się w jednej dużej tabeli. Zaczyna się ona zaraz po <BODY>, kończy zaraz przed </BODY>. W ten sposób skazuje się odwiedzającego na czekanie ściągnięcia się całej strony.
Symulacja
Załóżmy, że masz stronę z bannerem na górze, sporą ilością tekstu i ogromną stopką. W stopce jest banner (2 bannery to żadna nowość), rozbudowane menu i skróty newsów. Pomyśl, że odwiedzający nie zobaczy tekstu, zanim nie ściągnie tych dwóch bannerów i dużej stopki. Rezultat? Jeśli (!) poczeka na załadowanie strony, to prawie na pewno poza tekstem nic innego go nie zainteresuje. Przyczyna? Czas, który mógł poświęcić na czytanie tekstu stracił na wpatrywanie się w biały ekran i modlenie się do pasku stanu przeglądarki.
Teraz wyobraź sobie sytuację, gdy najpierw zobaczy on nagłówek z bannerem, następnie tekst i po jakimś czasie stopkę. Model jego zachowania i myśli przedstawia się następująco:
"Widzę nagłówek, więc strona się wczytuje. Tekstu jeszcze nie ma, więc zerknę na ten głupi banner. Jest już tekst, czytam go. Skończyłem czytać tekst, zobaczę jeszcze dół strony, bo wcześniej tego nie było."
Wbrew pozorom ten naiwny model zachowania jest bardzo prawdziwy.
Technika
Rozwiązanie problemu jest dosyć proste. Wpadłem na nie, tworząc stronę dla klienta, i wykorzystałem też przy budowie cneb.pl.
Z logicznego punktu widzenia zamiast jednej dużej tabeli trzeba zrobić kilka mniejszych ułożonych jedna nad drugą.
Powyższe rozwiązanie sprawdza się tylko w przypadku, gdy szerokość naszego serwisu ustawimy na więcej niż 50%. W przypadku, gdy będzie to mniejsza wartość lub szerokość ustawimy na stałe za pomocą pixeli, to rozwiązanie się nie sprawdza. Tabele zostaną wyświetlone obok siebie.
Problem udało mi się rozwiązać w zaskakująco prosty sposób. Musiałem tylko do niego dojść. Każdą z tych tabel należy "uwięzić" w poziomym pasku okna przeglądarki. Trzeba je wsadzić do osobnych tabeli, które będą zajmowały całą szerokość okna przeglądarki.
Kod źródłowy
Posłużę się przykładem budowy stron cneb.pl. Serwis ma szerokość 750 pixeli. Całość jest przesunięta do lewej krawędzi. Rozwiązanie, jakiego użyłem, przedstawiam poniżej:
<TABLE WIDTH="100%" ALIGN="CENTER" CELLSPACING="0" BORDER="0">
<TR><TD>
<table width="740" align="left" cellspacing="0" border="0">
<tr><td width="740" valign="top" align="left">
<!-- NAGLÓWEK -->
<!-- KONIEC - NAGLÓWEK -->
</td></tr>
</table>
</TD></TR></TABLE>
<TABLE WIDTH="100%" ALIGN="CENTER" CELLSPACING="0" BORDER="0">
<TR><TD>
<table width="740" align="left" cellspacing="0" border="0">
<tr><td width="740" valign="top" align="left">
<!-- TREŚĆ STRONY -->
<!-- KONIEC - TREŚĆ STRONY -->
</td></tr>
</table>
</TD></TR>
</TABLE>
<TABLE WIDTH="100%" ALIGN="CENTER" CELLSPACING="0" BORDER="0">
<TR><TD>
<table width="740" align="left" cellspacing="0" border="0">
<tr><td width="740" valign="top" align="left">
<!-- STOPKA -->
<!-- KONIEC - STOPKA -->
</td></tr>
</table>
</TD></TR>
</TABLE>
Zauważ, że tabele wiążące są zapisane dużymi literami, a tabele więzione małymi. Kod jest bardziej przejrzysty. Przy trzech częściach strony to rozwiązanie to faktycznie tylko 10 linijek kodu więcej. To bardzo mało. Te 10 linijek zmniejszy liczbę osób stosujących przycisk Wstecz w stosunku do Twojej strony. Te 10 linijek polepszy Twój wizerunek. Będziesz osobą tworzącą dobre strony www, a takich jest niewiele.
Dobra rada
Każdą nową stronę buduj w oparciu o tę technikę. Dotychczasową stronę też powinieneś przerobić. Ponadto dziel stronę na tyle części, na ile jest to możliwe i sensowne. Jeśli masz naprawdę długi tekst, to rozbij go na dwie tabele. Pamiętaj, że czas ładowania się stron jest krytycznym elementem sukcesu serwisu.