Gzipowanie strony/plików – przyśpieszenie ładowania
- Mateusz Żeromski | 2008-09-28 | Ciekawostki Inne javascript Optymalizacja Php
Ostatnio coraz głośniej się robi o tym jak sobie radzić z dużą ilością użytkowników bo jednoznacznie oznacza wysoki transfer. Jednym z lekarstw na tę okoliczność jest używanie gzipa – czyli przesyłanie spakowanych stronek do użytkownika. Dotyczy się to wszystkich plików tekstowych, czy również javascript i css. Pliki multimedialne możemy pominąć bo żaden kompresor nie spakuje jpg’a czy avika :)
Czego nam potrzeba?
Zakładam, że posiadamy własną stronkę www dla której chcemy użyć gzipa oraz jest tam php. Pozatym musimy mieć możliwość używania gzipa w naszym php, domyślnie on już powinien być [info].
Start!
Po pierwsze, jeżeli posiadamy główny plik index.php, to na samym początku dodajemy kod:
1 2 3 | <? ob_start('ob_gzhandler'); //(....) |
Takim sposobem już mamy gzipowanie treści dynamicznie generowanej. Wynik można zobaczyć w firebugu, w ilości przesyłanego kodu. Aby sprawdzić czy jest już gzipowanie można użyć super narzędzia :) gzipTest
Pliki tekstowe: javascript, css
Tutaj najlepiej posłużyć się .htaccesem otóż w katalogu głównym tworzymy plik
1 2 3 4 | RewriteEngine on RewriteCond %{REQUEST_FILENAME} -f RewriteRule (.*).(js|css)$ gzip.php?url=$1.$2&type=$2 [L] |
To oznacza, że jeżeli zapytanie odnosi się do pliku, a typem jest css, lub js, to wywołaj plik gzip.php ze ścieżką do pliku :). Plik gzip.php powinien wyglądać tak:
1 2 3 4 5 6 7 8 9 | <? ob_start('ob_gzhandler'); if($_GET['type'] == 'css'){ header('Content-Type: text/css; charset: UTF-8'); } include($_GET['url']); |
I finito :). Wynik można sprawdzić w/w ‘super narzędziem’ do sprawdzania transferu i objętości strony, :)
Podsumowanie
Tak o to prosto otrzymujemy gzipowanie strony, przez co użytkownik odbiera znacznie mniej informacji, mniej się zużywa transferu itp itd, oraz nasza strona jest PRO :D.
Tagi: Ciekawostki, css, gzip, javascript, Optymalizacja, php
1 Sharpek 2008-09-29 10:58:54
Warto dodać wysyłanie prawidłowego nagłówka, dla CSS:
header(‘Content-Type: text/css; charset: UTF-8′);
header(‘Cache-Control: must-revalidate’);
Bez tego nie powinno działac, przynajmniej ja tak miałem. Warto dodać sprawdzanie co jest includowane i czy jest prawidłowa ścieżka do pliku.
Pozdrawiam
2 Mateusz Żeromski 2008-09-29 12:58:27
hmmm, headery, może i tak ale u mnie działało bez tego, zarówno na localhoscie, nazwa.pl, i home.pl, to chyba zależy od serwera.
A sprawdzanie includowania jest w htaccesie – mówi on „Jeżeli jest wywołanie do pliku, a jego rozszerzeniem jest css/js to uruchom gzip.php z parametrem”, więc ścieżka jest poprawna na 100%. Moim zdaniem mozna by zablokowac wywoływanie przez www pliku gzip.php htaccesem i by było ok.
pzdr
mat.
3 Sharpek 2008-09-29 18:15:42
A wyczyściłeś cache ?:)
4 Mateusz Żeromski 2008-09-29 18:39:26
hmm Sharpek miałeś rację.
Otóż przeglądarka nie radzi sobie z css i dla tych plików potrzebuje headera, testowalem rozwiązanie na poszczególnych plikach, ale czy one będą działały jako normalne pliki nie sprawdziłem do końca :)
Poprawiam artykuł dzięki za info
ps.: cache mam zazwyczaj wyłączony :)
5 Sharpek 2008-09-30 08:12:12
Co do CSS to w komentarza na php.net jest przedstawionych kilka przykładów pakowania CSSa, jeśli znajdę czas to przetestuje to i dam znać
Pozdrawiam.
6 DEVVIL 2008-10-08 16:50:21
Dziekuje bardzo dobry artykuł , przynam że z checia poznał bym inne sposoby na przyspieszenie ładowania strony.
Polecam narzędzie YSlow napisane przez Yahoo developerów, dzięki któremu można poznać słabe strony swojego www jeśli chodzi o jej szybkość.
np CDN – dokaldnie jak to sie robi . (niestety znalazłem tylko opisowe artykuły mało konkretów)
7 Marcin Kłeczek 2009-02-04 16:12:18
Skrypt jest „zdziurowany” – dlaczego? include na danych z „get”? A co jeśli podam zewnętrzny plik? A co jeśli podam plik który istnieje w lokalnych katalogach?
Druga sprawa – zamiast include w takim przypadku powinieneś użyć readfile.
Trzecia sprawa – gzipowanie w kółko pliku jest niepotrzebnym obciążeniem procesora, zwłaszcza, że nie ustawiasz żadnych danych „przechowywania” plików w cache przeglądarki.
8 Mateusz Żeromski 2009-02-04 19:04:36
@Marcin: Masz rację, jednakże jak zauważysz, na blogu nigdy nie prezentuje gotowych rozwiązań, tylko wskazuję co i jak można zrobić :)
9 fesseme 2009-07-19 20:48:51
Mam pytanko jak wygląda sprawa z plikami, które chce include -uje do pliku czy one też muszą mieć „ob_start(‘ob_gzhandler’);” na początku mam tutaj na myśli pliki z kodem html, php itp.?
Z góry dzięki za info.
10 Mateusz Żeromski 2009-07-20 09:17:58
@fesseme – ciężko mi odpowiedzieć na Twoje pytanie bo nie bardzo wiem jaką dokladnie masz sytuację. Jakie pliki wklejasz itp.
Ogólnie “ob_start(’ob_gzhandler’);” powinieneś wywołać przed tym jak cokolwiek wypiszesz w skrypcie.
11 fesseme 2009-07-20 13:42:18
W celu pokazania o co mi chodzi dam prosty przykład.
Mam plik index.php zawartość prawie całej strony, w nim jest włączona kompresja. Teraz w zależności czy użytkownik tej strony jest zalogowany czy nie załączam odpowiedni plik zalogowany.php lub nie_zalogowany.php. W plikach tych jest parę funkcji co zrobić w danej sytuacji (najprościej wyświetla tekst jesteś zalogowany/zaloguj się) i czy w tych dwóch plikach zalogowany.php lub nie_zalogowany.php mam też umieścić ob_start(’ob_gzhandler’), czy może przez to że są one załączane do pliku index.php który jest już pakowany nie muszę tego robić.
Mam nadzieje że udało mi się w miarę klarownie opisać moją sytuację.
Z góry dziękuję za pomoc i za artykuł.
12 Ewelina 2009-12-10 21:48:09
Zrobilam tak jak wyzej w tekscie i nic mi to na tescie nie zmienilo :(
Nadal:
Gzip :( [not ok]
transfer 408.00 B
size 408.00 B
save 0%
13 Mateusz Żeromski 2009-12-11 11:18:14
No cóż, Ewelino – może to kwestia ustawień serwera?
Również stworzyłem mały plik i gzip działa.
http://blog.zeromski.com.pl/tools/gzipTest/?url=http://hinol.nazwa.pl/gz.php
14 Ewelina 2009-12-12 13:58:00
wstyd sie przyznac ae mam na darmowyhosting.co.cc
Zabardzo w te klocki to nie jestem obeznana :) ale jak poczytałam Twoje artykuły to ładnie mozna „podkręci攳adowanie strony :)
I chciałam… i nie wyszło :(
15 Czacha Dymi 2010-01-07 18:29:17
Dzięki wielkie. U mnie działa elegancko. Zaoszczędziłem 30kb i strona działa bardzo szybko. Dodam, że próbowałem kilku rozwiązań, ale tylko to okazało się skuteczne.
Pozdrawiam