Cachujeme, GZipujeme, zrychlujeme

htaccess, Zrychlení webu

Ukážeme si, jak zrychlit načítání stránek, díky zkomprimovaným soborům přes GZip. Dále donutíme prohlížeč, aby si naše obrázky a skripty uložil, a příště je nestahoval znovu.

Cachujeme, GZipujeme, zrychlujeme

Taky máš rád rychlé načítání stránek? Čas je drahý, a čekat 5s než se stránka zobrazí se, nechce nikomu. Dnes si ukážeme jednu z mnoha možností jak web zrychlit. Soubory budeme před odesláním klientovi komprimovat přes GZip a ještě je uložíme v prohlížeči.

1. díl: Cachujeme, GZipujeme, zrychlujeme
2. díl: SVG a PNG Sprite, zrychlujeme podruhé
3. díl: Minifikace - zrychlujeme po třetí
4. díl: DataURI - zrychlujeme po čtvrté
5. díl: Fiddler - web debugger 
6. díl: Nastavení GZip komprese u souborů s fonty
Bonus: Automatizace s Gruntem - většinu zde popsaných technik můžete zautomatizovat pomocí Gruntu, ušetří vám to čas i námahu

Soubor .htaccess

Možností, jak odesílat uživateli zagzipované data je mnoho. My využijeme souboru .htaccess, ten využijeme také pro nastavení cache v prohlížeči. Pokud nevíš jak s ním pracovat, přečti si prvně článek na Jak psát web

Souboru htaccess se budu věnovat i v dalších článcích. Je to velmi mocný nástroj. Může se v něm provádět nastavení pro aktuální zpracování skriptu. Bohužel/bohudík hostingy ale mnoho jeho možností zakazují.

Zapnutí komprese GZip

GZip je kompresní algoritmus, stejně jako ZIP, RAR apod. Jeho výhoda je ale v otevřenosti. GZip je zkratka pro GNU Zip, což vypodívá, že je šířen pod GNU licencí.

Podle Wiki dokáže archív obsahovat i více souborů, ve většině implementací ovšem dokážete komprimovat jediný soubor. Což ovšem pro naše potřeby je naprosto dostačující.

Podpora

Abychom mohli posílat komprimované soubory, musí to prohlížeč na druhém konci umět rozbalit. V dnešní době je zbytečné se ale tímto již zaobírat. Umí to i IE5.5, takže toho bych se nebál.

Kde kompresi zapnout

Určitě není vhodné, veškeré data, které posíláte klientovi komprimovat. Důvod je jednoduchý. Obrázky jsou komprimované již samy o sobě, další komprese může jejich velikost dokonce zvětšit. Toto neplatí u SVG obrázků, které jsou zapsány textově.

Kód

Do souboru .htaccess vložíme následující

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

První podmínka IfModule zjistí, jestli server dokáže před odesláním soubor zkomprimovat. Druhá podmínka zajistí, kompresi pouze námi vypsaných souborů Obrázky s výjimkou SVG tedy neprojdou.


Zapnutí cache

Zde to máme jednodušší než u GZipu. Cache nemusí podporovat prohlížeče v Kindle čtečce, ve starých telefonech apod. Zde ale budou pouze tuto informaci ignorovat, nemusíme tedy nic řešit.

Každému datovému typu, který chceme u klienta cachovat, určíme datem expirace. Po uplynutí této doby se objekt opět stáhne znovu. Čas se ukládá v sekundách a zapisuje se Axxx, kde xxx jsou právě zmíněné sekundy.

Kód

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault A600
    ExpiresByType text/javascript A2678400
    ExpiresByType application/javascript A2678400
    ExpiresByType text/css A2678400
    ExpiresByType image/gif A604800
    ExpiresByType image/png A604800
    ExpiresByType image/jpeg A604800
    ExpiresByType image/x-icon A604800
    ExpiresByType text/html A1

    # Nezapomenout na fonty...
    
    <FilesMatch "image/kamery_web_[0-9]+\.jpg$">
        ExpiresByType image/jpeg A600
    </FilesMatch>
</IfModule>

Opět zjistíme podporu na serveru odesílat hlavičky s datumem expirace. Nastavíme základní expirační dobu. Ta bude platit pro vše, co nezmíníme níže. Všimni si na posledním místě je text/html A1, toto je velmi důležité. HTML stránky necachujeme, pouze ve vyjímečných případech. V kódu je komentář, nezapomenout na fonty, zde si dosaďte co potřebujete z 6. dílu.

Vložil jsem tam ještě ukázku, kterou mám na webu SkiBílá. Jedná se o obrázky které stahuji z web kamer. U nich je potřeba nastavit kratší dobu pro cache, konkrétně mám 10 minut.

Vynucené stáhnutí nového souboru

A nyní nastává komplikace s cache. Co když změníme CSS, JS nebo jiný soubor a uživatel jej má ještě na další týden v cache? Musíme donutit prohlížeč, aby soubor stáhl znovu.

Nejčastěji lze vidět přidání prefixu ?v=1 . Toto donutí prohlížeč stáhnout soubor znovu, protože pro něj je toto jiný soubor. Prohlížeč vždy bere celou adresu včetně parametrů za otazníkem. 


V příštím článku si ukážeme něco o komprimaci obrázků, CSS a SVG spritech.
Pokud se ti článek líbí, budu rád za jakoukoli reakci.

Přidat komentář

Právě odpovídáte na existující komentář. Zrušit

Komentáře

Novinky z blogu

LocalStorage a Lockr

Ukládání dat v prohlížeči pomocí LocalStorage má své úskalí. Od toho je tady mini knihovna, která tyto problémy řeší a hodně práci hodně...

Další články