Nastavení GZip komprese u souborů s fonty

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

---

Komprimovat, či nekomprimovat? To je oč tu běží

Hned v prvním díle o zrychlování webových stránek jsme řešili GZip kompresi souborů, před odesláním ke klientovi. Řekli jsme si, že určitě bychom měli komprimovat JS, CSS a HTML soubory. Naopak obrázky bychom komprimovat neměli, protože už komprimované jsou.

Co ale udělat se soubory obsahující písma? Prohlížeče podporují různé formáty a tak od každého řezu písma mám 5 souborů. Testování jsem prováděl na fontu Comfortaa a OpenSans, obojí řez regular. K výpočtu zlepšení jsem využil nástroj checkgzipcompression.com. (Již nefunkční)

• EOT - Zlepšení 0,07% a 0,15%
• TTF - Zlepšení 47,15% a 39,01%
• SVG - Zlepšení 75,66% a  79,14%
• WOFF - Zlepšení 0,11% a 0,46%
• WOFF2 - Zhoršení o 0,05% a 0,06%

Vidíme, že u EOT a WOFF je zlepšení naprosto nepatrné. A to nepočítám čas, který musí server i klient strávit kompresí a dekompresí dat. U WOFF2 dojde dokonce ke zhoršení.

Některé zdroje ale uvádějí, že EOT soubory by se měly komprimovat. Zde záleží jaký použijete generátor. Osobně používám FontSquirrel Webfont Generátor, který umožní soubor EOT komprimovat při generování.

Zapnutí GZip comprese

Do souboru .htaccess pouze přidáme přípony ttf a svg do FilesMatch k již existujícím příponám js a css.

<IfModule mod_deflate.c>
    <FilesMatch "\.(js|css|ttf|svg)$">
        SetOutputFilter DEFLATE
        Header always set Vary "Accept-Encoding"
    </FilesMatch>
</IfModule>

Zkontrolovat zapnutí GZip komprese a cachování lze na stránce giftofspeed.com/cache-checker/ a giftofspeed.com/gzip-test/

Cachování souborů

Neměli bychom zapomenout také cachovat soubory. Opět přidáme záznamy do .htaccessu k tomu, co jsme přidali v prvním článku. Můžete si také všimnou druhého možného zápisu délky cachování.

AddType application/font-woff woff
AddType application/font-woff2 woff2
AddType application/vnd.ms-fontobject eot

<IfModule mod_expires.c>
  ...
  # EOT file
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
  # TTF file
  ExpiresByType application/x-font-ttf        "access plus 1 month"

  ExpiresByType font/ttf        "access plus 1 month"
  # WOFF file
  ExpiresByType application/font-woff         "access plus 1 month"
  ExpiresByType application/x-font-woff       "access plus 1 month"

  # WOFF2 file
  ExpiresByType application/font-woff2        "access plus 1 month"

  ExpiresByType font/woff2        "access plus 1 month"
  # OTF file
  ExpiresByType font/opentype                 "access plus 1 month"
  # SVG file
  ExpiresByType image/svg+xml                 "access plus 1 month"
</IfModule>​