Sytuacja idealna na stronie to:

  • wczytywane jest tylko te pliki które są aktualnie używane na stronie,
  • pliki mają jak najmniejszy rozmiar,
  • każdy plik jest wczytywany z serwera RAZ, a za każdym następnym razem jest czytany z cache przeglądarki,
  • przeglądarka klienta zawsze wie, który plik jest aktualny, a który należy doczytać z serwera
  • wczytywany jest tylko 1 plik css i 1 plik js (jeśli używany) na stronę.

Oczywiście taka sytuacja nigdy nie występuje – jednak można do niej dążyć, przez odpowiednią kompresję plików, ich łączenie oraz odpowiednie ustawienia nagłówków “expires” , oraz jak zwykle – używanie odpowiednich narzędzi.

Kompresja

Czym jest kompresja, każdy webdeveloper wie (albo powinien) – zmniejszeniem sposobu zapisu informacji, aby zmniejszyć redundancję i tym samym uzyskać mniejszy plik wynikowy.

Kompresja plików css i/lub javascript zwykle polega na pozbyciu się wszystkiego co nadmiarowe (komentarze, białe znaki) i takiemu połączeniu reguł (css), oraz takiej zmianie nazw funkcji/zmiennych (javascript) aby uzyskać jak najmniejszy wynikowy rozmiar pliku, bez zmieniania wyglądu strony oraz jej działania.

Zwykle dzięki niej udaje się uzyskać pliki mniejsze o ok 20% , oraz dużo mniej czytelne.

Czasami warto się zastanowić, czy zysk kilka kilobajtów jest wart wysiłku włożonego w ciągłą kompresję/dekompresję.

Ogólnie temat dość mało ciekawy – istnieje wiele dobrych narzędzi, zarówno online (CleanCSS, JS Compress) jak i offline (np. YUI Compressor), które skompresują plik szybko i praktycznie bez naszego udziału.

Kompresja plików graficznych też nie jest niczym nowym, wystarczy pamiętać o kilku podstawowych zasadach:

  • tam gdzie nie potrzebny jest plik png, używamy jpg albo gif (kilka razy mniejszy rozmiar)
  • zawsze zapisujemy pliki w jakości odpowiedniej do zadania (w przypadku jpg wystarcza około 70 – człowiek nie zauważa tak małych różnic)

Oczywiście istnieją odpowiednie narzędzia do automatycznej kompresji grafik, polecam te zawarte w dodatkach do firebuga – yahoo yslow i google page speed (odpowiednio smush.it i image compress ).

Oprócz tego istnieje jeszcze kompresja przesyłanych danych przez serwer, zwykle domyślnie włączona (np. w apache jest to mod_deflate).

Łączenie

W przypadku grafik dotyczy to tylko łączenia plików w sprite’y (co to są sprite’y pisałem w tym artykule), oczywiście dotyczy to tylko grafiki layoutu strony, z grafikami treści (tymi z tagów img) tak naprawdę nie możemy nic zrobić, oprócz kompresji i ustawienia odpowiedniego nagłówka.

W przypadku plików css i js sprawa wygląda dużo lepiej – można je połączyć w jeden plik, (oprócz css-ów dedykowanych pod ie, oraz tych dla innych mediów), czyli bardzo blisko ideału (1 plik = 1 request, mniej już się nie da).

Jednak ręczne łączenie plików ma dość poważne wady:

  • nadmiarowość kodu – ładujemy często css-y, które nie są używane na stronie
  • kłopotliwość – zamiast kilku mniejszych plików mamy jeden duży, w którym coraz trudniej się zorientować.

Oczywiście rozwiązaniem jest zastosowanie odpowiednich narzędzi.

W przypadku użytkowników django są to dwie aplikacje – django-compress (bardziej rozbudowany, ale i trudniejszy w obsłudze) i django-compressor (prostszy), podobne rozwiązania można znaleźć też w innych frameworkach.

Aplikacje te automatycznie łączą kilka(naście) plików css / js w jeden, nadając mu dodatkowo unikalną nazwę (co jest ważne w przypadku nagłówka expires – o tym za chwilę), w przypadku zmiany zawartości – powstaje nowy plik o unikalnej nazwie.

Dodatkowo aplikacje te umożliwiają postprocessing tego pliku, czyli np. automatyczną kompresję po wygenerowaniu, łatwiej się już nie da.

Dzięki takim rozwiązaniom możemy pracować na kilku plikach css/js, odpowiednich dla danej strony – nie przejmując się ich kompresją, czy redundancją – i tak od strony klienta będzie 1 plik, odpowiednio skompresowany.

Nagłówki

Co robią nagłówki “expires” ? określają “przydatność do spożycia” danego pliku, znajdującego się w cache przeglądarki.

Jeżeli plik jest starszy niż data zawarta w nagłówku “expires” – dociągana jest nowsza wersja tego pliku z serwera, jeżeli nie – nie jest dociągana.

Teoretycznie wszystkie pliki css i js na stronie, a także grafiki layoutu powinny mieć ustawiony nagłówek expires na tzw. “najbliższą wieczność” – powinny się ściągać z serwera raz na każdego użytkownika.

Rozwiązanie ma jedną OGROMNĄ wadę – przy każdej zmianie strony, trzeba powiadomić przeglądarki użytkowników że należy pociągnąć nowszą wersję pliku. Jeden problem – jak nie minie data w expires, przeglądarki same nie sprawdzą czy jest ta nowsza wersja!

Rozwiązanie jest dość proste – wystarczy zmienić nazwę pliku ( a właściwie adres url do pliku), gdyż nagłówek jest podpinany pod konkretny adres, wystarczy dokleić do url na przykład ?version=1.

Robienie tego ręcznie jest oczywiście bardzo problematyczne – dlatego bardzo przydają się aplikacje do łączenia plików opisane powyżej, gdyż w zależności od zawartości generują plik z UNIKALNĄ nazwą – co oznacza, że można go spokojnie scachować na rok, przy jakiejkolwiek zmianie użytkownik i tak dostanie aktualną wersję.

W przypadku cachowania plików graficznych, flash itd. należy kierować się po prostu zdrowym rozsądkiem:

  • nie cachować plików często zmienianych, a przynajmniej nie na długo
  • grafiki layoutu (tzw. css images) zwykle się nie zmieniają – można je scachować tak jak css-y
  • należy zawsze dostosować cachowanie do konkretnej strony.

Korzyści

No dobrze, namęczyliście się, skompresowaliście i połączyliście pliki.

Ale jakie są wymierne korzyści dla użytkownika końcowego?

Tak naprawdę zależy to od sytuacji. W przypadku layoutów z małą ilością grafiki i skryptów – niewielkie (żadna różnica czy pobierać się będzie 100 KB, czy 110KB).

W przypadku layoutów z dużą ilością grafiki (czyli większości w sieci) – olbrzymie.

Poniżej zamieszczam statystyki dla strony głównej webdesign-log.pl.

Typ pliku Bez cache (pierwsze uruchomienie) Z cache(każde następne) Uwagi
il. requestów rozmiar (KB) il. requestów rozmiar (KB)
HTML/Text 1 5.3 1 5.3 Tu niewiele możemy
Javascript 8 61.8 5 0 5 js jest z zewnętrznego serwera (google analytics i adsense), 3 nie są sprawdzanie dzięki expires
CSS 1 5.3 0 0 expire + unikalna nazwa pliku
IFrame 1 1.9 1 1.9 Tu niewiele możemy
Flash 2 73.4 0 0 expires, akurat te pliki są zawsze na stronie – chmura tagów
CSS Image 14 409 0 0 wszystkie grafiki layoutu – expires na wieczność (niezmienne)
Image 7 18 4 0 grafiki w tagach img – expires na miesiąc
RAZEM 34 575 11 7.2

Jak widać – korzyści mogą być dość znaczne: w w/w przypadku 23 requesty mniej i 567.8 KB mniej do ściągnięcia za drugim razem. A w wersji niepołączonej było requestów o 6 więcej.

Wszystkich zainteresowanych dalszym przyspieszaniem strony odsyłam do artykułów w yahoo oraz google , gdzie znajduje się cały szereg porad, jak przyspieszyć swoją stronę.