Prezentacja została przygotowywana na pierwsze spotkanie pod szyldem Ignite Kraków, które odbyło się 6 października w klubie SWING. Spotkania te dotyczyć mają szeroko rozumianych technologii webowych. Ideą Ignite są krótkie 5 mnutowe prezentacje na 20 slajdów, które zmieniają się samoistnie co 15 sekund.

Tematem prezentacji była Budowa Portalu Dużej Skali na przykładzie Strony Głównej Onet.pl. Ze względu na ograniczenia czasowe bardzo ogólnie poruszyłem jedynie kilka kwestii na które zwracamy uwagę podczas pracy przy Stronie Głównej.

Strona główna Onet.pl z obecną funkcjonalnością istnieje od kwietnia 2008. Od tego czasu Onet.pl jako pierwszy portal w Polsce oferował możliwość personalizacji. Dziś strona główna portalu to prawie 40 mln odsłon i 5 mln użytkowników dziennie.

To rodzi odpowiedzialność. Wraz z kolegami czujemy się odpowiedzialni za komfort naszych użytkowników. Utrzymanie strony głownej wbrew pozorom nie jest zajęciem prostym ani oczywistym. Każdy najmniejszy, chwilowy błąd przy takiej liczbie odsłon zostaje zauważany przez wielu użytkowników.

Chcemy by strona renderowała się możliwie najszybciej, wyglądała i oferowała pełnie funkcjonalności na wszystkich najpopularniejszych platformach.

To co przede wszystkim jest dla nas ważne to zapewnienie komfortu przeglądania, bezpieczeństwa, bezawaryjności oraz szybkość ładowania strony.

Aby to osiągnąć przede wszystkim ograniczamy requesty. Pliki javascriptowe oraz CSS łączymy w pojedyncze pliki. Podobnie robimy z całą podstawową grafiką serwisu – organizując ją na płachtach. Dzięki temu wszystkie niezbędne elementy pobieramy pojedynczym requestem.

Wszystkie treści które nie muszą być dostępne od razu pobieramy za pomocą AJAXa, jednocześcnie je zapamiętując aby przy kolejnej próbie dostępu po te same dane nie musieć ich pobierać.

Jak już wspomniałem pliki CSS oraz JS organizujemy w pojedyncze pliki. Jednocześnie pliki te minimalizujemy, usuwając niepotrzebne znaki, czy komentarze. Dzięki temu zyskujemy na wadze pliku. Są to oszczędnośći nawet ok. 50% podstawowego rozmiaru.

W przypadku plików javascript można zastosować dodatkowo kompresję z użyciem kodowania base62, ale to rozwiązanie wiąże się z opakowaniem skryptu funkcją eval. Jej wykonanie to dodatkowy narzut czasu dla przeglądarki. W przypadku strony głównej jego użycie zbytnio wydłużało czas renderowania. Dlatego zrezygnowaliśmy z tego rodzaju kompresji.

W zamian dla wszystkich plików stosujemy kompresję gzip, po stronie serwera. Większość przeglądarek doskonale radzi sobie z ich rozkompresowaniem a pliki podawane są użytkownikom dużo szybciej.

Zarówno pliki javascript jak i css generowane z użyciem PHP ustatyczniamy na serwerze. Dzięki temu minimalizujemy użycie PHP przy requestach po nie, co odciąża serwer i przyspiesza podawanie danych.

Ograniczenie requestów, ich wagi wpływa na przyspieszenie ładowania strony, ale szybkość renderowania strony zależy również od struktury jej dokumentu. Główną cześć strony podzieliliśmy na 4 części. Elementy te są floatowane i kolejno pojawiają się w przeglądarce. Użytkownicy widzą na początku górną część strony co przekłada się na najważniejsze informacje.

Dodatkowo opóźniamy ładowanie obrazków na stronie. Poza ilustracjami dotyczącymi głównych treści, wszystkie doczytujemy na onloadzie strony. Pozwala to innym elementom strony takim jak np. sidebar z gadżetami na szybsze załadowanie.

W przeglądarce użytkownika w pierwszej kolejności wyświetlane są najważniejsze treści, które mieszczą się na ekranie dla najpopularniejszych rozdzielczości. Oczywiście zabiegi te widoczne są na słabszych komputerach, a na nowszych – z szybkimi łączami są praktycznie niezauważalne.

Przy pracach ze stroną główną musimy pamiętać również, że posiada ona kilka wersji kolorystycznych, jak również wersje na specjalne okazje. Wprowadzając nawet najmniejsze zmiany musimy pamiętać by miały one odzwierciedlenie w każdej z wersji i oferowały pełnię funkcjonalności.

Musimy być również przygotowani na wszelkiego rodzaju problemy z podawaniem strony – np. wyjątkowo wzmożony ruch czy inne losowe sytuacje. Dlatego równolegle z podstawową wersją strony, przygotowujemy jej okrojoną wersję, lekką wersję awaryjną.

Wszystkie podstawowe wiadomości ze strony głównej oraz najnowsze wiadomości ustatyczniamy, zapisując w postaci plików statycznych. W przypadku ewentualnych problemów z dostępnością podstawowej wersji, możemy w prosty sposób przepiąć się na wersję ustatycznioną, niezależną od mechanizmów backendowych i zapewnić użytkownikom dostęp do treści.

Powyższe informacje traktować należy raczej jako szkic i wprowadzenie do problematyki budowy strony głównej. Wielopłaszczyznowość zagadnienia sprawia, że codzienna praca nad Onet.pl jest dla nas ciekawym wyzwaniem.

Wojciech Krzyżyk
Starszy Programista