Cachujeme, GZipujeme, zrychlujeme

Tento článek patří do seriálu Zrychlení webu a dev stack. Ostatní články seriálu:

1. Cachujeme, GZipujeme, zrychlujeme
2. SVG a PNG Sprite, zrychlujeme podruhé
3. Minifikace - zrychlujeme po třetí
4. DataURI - zrychlujeme po čtvrté
5. Webpack lusknutím prstu - Laravel Mix - Alternativa ke Gruntu a Gulpu
6. Fiddler - web debugger
7. Nastavení GZip komprese u souborů s fonty
8. Automatizace s Gruntem - Automatizace ostatních technik ze seriálu
9. Systém SVG ikon s Gulpem

---

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.

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

        Header always set Vary "Accept-Encoding"
    </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.

Zkontrolovat zapnutí GZip komprese lze na stránce giftofspeed.com/gzip-test/

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/svg+xml 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.

Zkontrolovat zapnutí cachování lze na stránce giftofspeed.com/cache-checker/

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.