Komprese přes gzip je rozšířená, ale na druhou stranu opomíjená. Většina majitelů stránek maximálně zabalí (vysvětlíme si později) HTML a to je tak vše. Ovšem využití této techniky je mnohem větší. Můžeme zabalit třeba CSS styly, JS a dokonce i fonty (.ttf). To vše si teď ukážeme.

Co je to ta gzip komprese?

Pomocí komprese dat přes gzip (neboli GNU zip) můžeme snížit velikost souborů o 50 až 80 %.

Je to způsob jak snížit přenosovou velikost textových souborů, které si prohlížeč stahuje, aby zobrazil stránku. Povídá se, že gzip je náročnější na server, protože soubory před odesíláním komprimuje. Toho se ovšem nebojte, to se povídalo před mnoha a mnoha lety a náročnost na server není nijak extrémní.

Fungování gzip komprese si můžete představit jako zabalování textových souborů. Server před odesláním soubor zabalí, pošle do prohlížeče a ten si ho rozbalí a přečte. Pro příklad knihovna jQuery 1.6.4 má 91kB. Pokud ovšem použijeme gzip, přenášet se bude zabalený a v takovém případě má jen 32kB. Něco takového značně pomůže udělat web rychlejší.

Požadavky na aktivaci komprese souborů

Budeme se bavit o zapnutí přes .htaccess (pohodlné a přehledné). V tomto případě můžeme aktivaci komprese JS a CSS souborů pomocí gzip učinit pokud server podporuje mod_deflate. Většina hostingů tento modul podporuje takže se není třeba strachovat či to více rozebírat. Jeho podporu si na svých stránkách můžete zkontrolovat přes soubor phpinfo. Stačí PHP soubor nahrát na server, otevřít v prohlížeči a najít si řádek Loaded Modules.

Jak zapnout gzip kompresi CSS a JS?

Aktivace gzip komprese se provede pomocí několika řádků do .htaccess souboru. V něm si určíme jaké druhy souborů chceme zabalit a celý kód obalíme pro jistotu do IfModule. To nám zaručí, že se kód nebude používat pokud na serveru není nainstalovaný požadovaný modul (v tomto případě mod_deflate). Užitečné pokud časem svůj web přesunete na jiný hosting, kde není modul podporován. Jednoduše předejdete problémům.

Kód pro aktivaci komprese JS a CSS (vložte do .htaccess)

<IfModule mod_deflate.c>
<FilesMatch "\.(js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Do řádku za CSS můžete zapsat i další přípony souborů, které chcete zabalit. Jestli na stránkách používáte vlastní fonty (@font-face přes CSS), můžete je také zabalit. Stačí do řádku přidat jejich příponu. Například ttf, úspora je většinou 50 %. Další důvod proč nástroj gzip používat.

Podpora gzip, deflate a starší webové prohlížeče

V dnešní době všechny běžné webové prohlížeče podporují komprese. Jinak řečeno jsou kompatibilní s tímto kódem a zvládají gzip a deflate algoritmy. Podporu gzipování v prohlížečích proto nemusíte řešit. Některé opravdu staré prohlížeče sice mají problém s kompresí, ale na druhou stranu nežijeme v době kde lidé používají Windows 95 a 8 let staré prohlížeče.

Jediná skutečná překážka u tohoto způsobu je, když hosting nepodporuje mod_deflate. A pokud i přesto vyžadujete seznam prohlížečů, které gzip (vlastně deflate) nepodporují mrkněte se sem. Je to 4 roky stará databáze statistik HTTP hlaviček prohlížečů. Tam jednoduše najdete jestli prohlížeč podporuje deflate či ne.

Jaký mohu čekat efekt po aktivaci komprese?

Zvýšená rychlost načítání stránek by měla být znát, ale toto není jediný způsob jak na rychlejší web. Očekávat můžete střední zrychlení stránek díky snížení přenosové velikosti souborů. Další krok k optimalizaci rychlosti (zvyšování výkonu stránek chcete-li) si předvedeme příště. Chtěl bych se tomuto tématu nyní věnovat a napsat několik rad jak zrychlit stránky.

Nezapomeňte si funkčnost gzip ověřit. To můžete udělat například přes tento gzip tester. Zadejte do políčka na stránkách adresu na vaše fonty, soubory JS, CSS styly a zkontrolujte zda je gzip opravdu aktivovaný.

Do publikace dalšího článku se můžete pomocí komentářů podělit o své zkušenosti, zeptat se na radu či jen poděkovat za článek. Na většině stránek, které jsem prohlížel není gzip CSS, JS a někde i HTML aktivován. S tímto návodem je doufám ideální čas na zkoušku, hodně štěstí.