Jak powszechnie wiadomo używanie Content Delivery Network znacznie przyspiesza ładowanie stron WWW. Na jakimś blogu wyczytałem, że średnio daje to nam dwukrotnie szybsze ładowanie elementów, takich jak obrazki, pliki CSS czy JS. Duża korzyść i tania, bo np. Amazon S3 nie jest wcale drogi, więc prawie zawsze bardziej opłaca się zapłacić Amazonowi za transfer i miejsce, niż wybierać droższy plan hostingowy.
Albo gzip algo CDN! Nie do końca prawda.
Podczas zabawy z optymalizacją mojej strony po przeniesieniu plików na CDN, YSlow zaczął płakać, że brakuje mu gzip dla plików CSS i JS. Szybkie rozeznanie w Internecie nie pozostawiło złudzeń. Amazon S3 nie pozwala na dynamiczną kompresję trzymanych na serwerze plików. W tym momencie pomyślałem, że najlepszym wyborem będzie pozostawienie obrazów na S3 (ponieważ i tak są dobrze skompresowane programem, o którym napiszę wkrótce) i przeniesienie plików CSS i JS z powrotem na mój serwer, gdzie mam domyślnie włączony gzip. Dlaczego? Ponieważ kompresja gzip na takich plikach daje większy wzrost wydajności, niż korzyść z korzystania z CDN Amazonu.
Takie rozwiązanie to taka proteza, a że ja lubię mieć wszystko na porządnie to powróciłem do tematu w późniejszym terminie. Generalnie takie pliki, jak CSS i JS nie są modyfikowane zbyt często, więc możemy sami je skompresować lokalnie przez gzip, przesłać na S3 i odpowiednio zmodyfikować nagłówki.
Do dzieła!
Zaczynamy od ściągnięcia plików do skompresowania na nasz komputer i odpalenia terminala. Przechodzimy do katalogu z naszym plikiem i wpisujemy następującą komendę:
|
1 2 3 |
[cc escaped="true"] gzip -9 style.css [/cc] |
Teraz trzeba zmienić nazwę wygenerowanego pliku z style.css.gz na style.css, aby niektóre przeglądarki nie miały z nim problemów.
Wynik kompresji jest imponujący (liczone w bajtach):
Kolejnym krokiem jest przesłanie pliku na Amazon S3. Ponieważ lubię proste i skuteczne rowiązania (oraz nie lubie terminala) to zakupiłem program 3Hub. Po skonfigurowaniu programu i wrzuceniu pliku, z menu kontekstowego wybieramy Headers.
Ustawiamy Content Encoding na gzip oraz przy okazji obowiązkowo Expires na jakiś odległy termin.
No i gotowe. Pozostaje tylko podlinkować plik CSS na stronie i mamy skompresowany plik na Amazon S3.
