Jak na gzip kompresi CSS a JS souborů

Pátek, 2. Prosinec 2011

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í.

Nabízíme vám širokou škálu zdravotnických potřeb.
V sortimentu www.dentimedshop.cz máme například inkontinenční pomůcky, zdravotní kompresní punčochy nebo ortézy. Pomůžeme vám s výběrem.

{ Komentáře k článku }

Tomáš Erlich

A ještě malý dodatek. Když už zapínáte gzip u CSS a chcete tak zmenšit jeho velikost, zmenšete také jeho kód přes CSS kompresor. Tenhle nástroj vlastně smaže všechny mezery, zbytečné znaky a poznámky. Zkrátí se tak kód na jednu dlouhou řádku a ušetříte dalších cirka 20 %. Něco takového existuje i na javascript, ale neznám žádný, kterému bych naplno věřil. Takže nezapomeňte.

Emefej

Ke zmenšení velikosti kódu CSS stačí kromě CSS komporesoru i přeformátování na řádkový zápis pomocí PSPadu. Ke zmenšení kódu HTML se ve stejném editoru dá použít volba „Úpravy“ – „Operace s řádky“.

Tomáš Erlich

Navíc umí zkrácený kód převést znovu zpět na strukturovaný. Takže si nemusíte schovávat originál nebo se bát, že v komprimovaném CSS nebudete mít přehled. Ještě doplním odkaz na program. Jináč máš hezký blog, jen zkus zapnout komentáře. Takhle ti tam nikdo nemůže reagovat (nebo je to schválně?).

Emefej

Díky za pochvalu, u většiny článků jsou komentáře povoleny, ale u některých jsou z „jistých“ důvodů zakázány :-).

Mano

Tak jsem to zkusil, ale ještě jsem netrefil hosting, kde by mi to fungovalo. Zkusil jsem tři různé a žádný nemá mod_deflate. Defalte je zmíněný jenom v Accept-Encoding.

Tomáš Erlich

Ahoj, to se mi nechce ani věřit. Nezkoušel jsi nějaké hostingy zdarma? Tam se dá čekat mizerná podpora složitějších věcí. Většina placených hostingů by něco takového měla brát jako samozřejmost. Nevěřím, že by nějaký placený hosting nepodporoval kompresi souborů přes mod_deflate. Jestli potřebuješ poradit kam s webem tak mi můžeš napsat na e-mail, můžu ti nějaký ze svých zkušeností poradit.

Roman J.

Ahoj, díky za článek pomohlo!

Výsledek:
Web page compressed? Yes
Compression type? gzip
Size, Markup (bytes) 55,620
Size, Compressed (bytes) 11,610
Compression % 79.1

Ještě předtím jsem všechny soubory systémově spojil do 1, osekal zbytečnosti a výsledek vyplivl a zaGzipoval. Výsledek je tedy 5 css souborů ve velikosti cca 68kB => 1 o velikosti 11Kb. Paráda :o).

Tomáš Erlich

To jsem skutečně rád :). Další článek bude také o zrychlování stránek a doufám, že bude také minimálně tak užitečný. A pomůže udělat plno stránek rychlejší. Jinak na tvé stránce jsem zaznamenal, že tvé CSS soubory nemají GZIP aktivovaný. Ještě si to zkus zkontrolovat. Na tvé stránce bych kromě CSS a JS „zagzipoval“ také .ttf a .svg soubory. Jsou totiž psané v XML, tedy textové soubory a na ty gzip platí. Ušetří to celkem dost kB.

Jinak, co jsi psal je skvělá práce. Je to hezky shrnuté a je tak ukázaná ta účinnost. Opravdu každý web by měl něco takové dělat a alespoň na jeden den se zastavit a zkusit zrychlit své stránky. Krásná ukázka práce je třeba rychlost načítání Centrum.cz – ta je opravdu skvělá.

Mano

Ahoj, opět se hlásím, kvůli e-shopu jsem koupil VPS a hodil zapnutí komprese přímo do vhost.conf a už to funguje, komprese přes 78 %.
Ještě jsem na server nainstaloval mod-page-speed od Google a do Firefoxu jsem si hodil Page Speed Extension, který mi dal několik návrhů na zlepšení a optimalizaci.
Díky za článek.

Tomáš Erlich

Gratuluji. Jsem vždycky rád, když vím, že to někdo použije a článek slouží. Proč čekat na načítání, když to není nutné, že? Ještě bych veřejně dodal, že k metodě gzip je také velmi důležité používat kešování. Aby server nemusel stále zabalovat a posílat soubory pořád dokola (když to vlastně není vůbec nutné). Ty ho na stránce již aktivované máš.

U modulu mod_pagespeed dávej pozor na odkládání vykreslování skriptů. To nedoporučuji zapínat. Přesněji metody async a defer. Na většině stránek to dělá problémy, že se například správně nevykreslí formulář a pak nefunguje. Stránky máš moc hezké, takže ať se daří!

Forest

Tak jsem se zasekl. Phpinfo mi řeklo, že mod_deflate podporuje. Do ht jsem vložil:

SetOutputFilter DEFLATE

Gzip tester mi to neuznal. Něco asi dělám špatně.

Tomáš Erlich

Pokud jsi do .htaccess vložil správně celý tento kód, musí gzip komprese fungovat.

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

Pokud ne a opravdu tvůj hosting modul deflate podporuje, napiš raději na podporu. Oni určitě budou vědět proč to nejde. Možná tam máš jen nějaký překlep či dětskou chybu jak se tomu říká.

Forest

Bylo to tak. Musel jsem vytáhnout soubor .htaccess ze zálohy, protože jsem si při vkládání nejspíš něco přepsal. Takže teď už to jede :). Občas se to tak stane. Stačí na chvilku odejít od pc a za pár hodinek jde všechno samo. Jdu na další kroky. Děkuju.

Forest

Ale ale, pořád to není ono…

Tomáš Erlich

Naopak, vše funguje jak bylo nastaveno. Alespoň nyní, když jsem se podíval. Ještě není nastavená komprese HTML stránek. Proto se HTML dokument stále neposílá zabalený. Stačí do kódu v .htaccess přidat „html“.

Takže by to mohlo být nějak takhle: ...(js|html|css)... a měla by komprese html fungovat :).

Forest

Super, je nějaký důvod proč soubor nekompresovat?

Tomáš Erlich

Aktivovat gzip kompresi se třeba nevyplatí, pokud je soubor opravdu maličký. Protože pak trvá déle samotné zabalení než odeslání originálu k uživateli. Odhadem soubory větší než jeden kB se už vyplatí, což je 99.999 % všeho na internetu :).

Jinak mne nenapadá nic. Tahle metoda uspoří neskutečně moc takže se vyplatí u všeho textového. Pro příklad si vezmi tvůj HTML kód. Originál má 122 kB, ale s gzip kompresí uspoříš 98 kB. Takže se k uživateli bude posílat balíček o velikosti 24 kB. To je pětkrát méně. To myslím mluví samo za sebe.

Josef P.

Tomáši, prosím tě máš nějakou radu nebo tip, jak obejít Gzip kompresi na hostingu, který nemá toto podporované?

Ani jsem to nevěděl a teď jsem na to přišel až když mi nefungoval Gzip plugin pro Joomlu. A dost mě to vadí, protože nové šablony jsou dost náročné a bez Gzip se načítají strašně dlouho.

Tak než se rozhodnu přehodit web na jiný hosting, jestli bys neměl radu. Díky.

Tomáš Erlich

Ahoj,
gzip beru jako naprostou samozřejmost, takže jsem nikdy neřešil, že by nebylo podporováno. Je mi líto.

PS: Myslím, že je jedině dobře, že jdeš jinam. Protože ty stránky nejsou pomalé jen kvůli gzip. Podle mě bude problém i u nich. Občas jsem čekal na spojení s webem opravdu dlouho. I když se přes příkazový řádek zdá odezva v pořádku.

Možná máš aktivováno příliš pluginů. Zkus si pročíst tenhle článek, jestli máš čas. Třeba ti v něčem pomůže.

Josef P.

Díky Tomáši za radu, koukal jsem i na ten tvůj článek.

No s tím Gzipem to prostě na některých serverech u Wedosu bude problém, nicméně jsem některé weby zkusmo projel nástroji a odstranil alespoň ty ostatní chyby které tam byli a optimalizoval to.

No dostal jsem se i bez Gzipu na solidních 2,78 s a velikost 370kB bez komprese souborů CCS a JS, takže se to dá. Nicméně ta občasná odezva serveru… no coment.

Tak jako tak budu náročnější weby dávat pryč, protože tento hosting je nestíhá tak jak bych si představoval, resp. tak jak jedou jinde (podotýkám že i za podobné peníze).

Komentáře jsou pro tento článek již uzavřeny.
Děkuji za pochopení.

Předchozí příspěvek:

Následující příspěvek:

Tato stránka již není udržována. Děkuji za pochopení.