Dzisiaj naszła mnie dość banalna myśl. Całkiem możliwe, że nie każdy z Was optymalizuje „szybkość” ładowania swoich aplikacji webowych patrząc nie na wykorzystanie zasobów przez interpreter PHP (szybkość wykonywania, zasobożerność), ale przez sam serwer www (np. Apache) lub przeglądarkę.
Ogólnie do takich działań optymalizacyjnych możemy wykorzystać wtyczkę przygotowaną przez Yahoo do Firefoksa – YSlow (wymaga Firebuga). YSlow po wykonaniu testu w prosty sposób zaprezentujemy nam wyniki pod kątem:
- optymalizacji zawartości strony
- sposób zastosowania różnej maści doklejanych plików typu JS/CSS
- konfiguracja serwera webowego pod kątem minimalizacji odwołań do serwera
Oczywiście, strona yahoo.com otrzyjmuje wynik celujący (A). Można tylko się zastanawiać, czy to Yahoo dostosowało swoją stronę pod wyniki YSlow, a może YSlow pod swoją główną stronę ;).
YSlow - statystyki dla yahoo.com
Jedną z ciekawszych funkcji (poza wskazówkami) jest zaprezentowanie w postaci wykresu kołowego ilości danych potrzebnych do ściągnięcia z naszego serwera po powtórnym wywołaniu naszej strony.
I dochodzimy do meritum wpisu. Zainteresujcie się jak bardzo obciążacie swoją biedną maszynkę. Czy za każdym razem każecie ściągać użytkownikowi pliki graficzne szablonu graficznego, i tak samo pliki CSS, czy JavaScript? A po co, jeśli w większości są niezmienne po oddaniu wersji na produkcję.
Dodatkową kwestią jest kompresja przesyłanych plików tekstowych jak JS czy CSS, obsługiwane przez większość aktualnych przeglądarek, a przyspieszających ładowanie strony.
Patrząc na powyższy wynik widać, że przy jednorazowym wywołaniu wystarczy wysłać do Internauty 35kB danych, zamiast każdorazowo 200kB. Nie mówiąc, że możemy wykorzystać jedno żądanie serwera web, zamiast ponad 30 jak w tym przypadku.
Wynik ten w łatwy sposób możemy „poprawić, za pomocą dodatkowych wpisów w pliku konfiguracyjnym naszego vhosta:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Header unset ETag FileETag None <FilesMatch ".(ico|flv|jpg|jpeg|png|gif|js|css)$"> Header unset Last-Modified Header set Expires "Fri, 21 Dec 2012 00:00:00 GMT" Header set Cache-Control "public, no-transform" </FilesMatch> <IfModule mod_deflate.c> <FilesMatch ".(js|css)$"> SetOutputFilter DEFLATE </FilesMatch> </IfModule> |
Pierwsze linijki wyłączają nam ETagi, pierwszy paragraf ustawia nam bardzo daleki w czasie czas przedawnienia się plików z obrazkami i js/css. Natomiast ostatni paragraf włącza nam kompresowanie plików z roszczerzeniem js/css.
Aby nam zdziałały te opcje w Apache musimy mieć włączone moduły: header oraz deflate.