Nastavení GZip komprese u souborů s fonty

Pavel htaccess, Zrychlení webu

U kterých souborů s fonty je vhodné zapnout GZip kompresi a u kterých je to zbytečné? V některých případech nám GZip může ještě zvýšit množství přenášených dat. Také se podíváme jak fonty cachovat.

Nastavení GZip komprese u souborů s fonty

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

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.

  • 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
  </FilesMatch>
</IfModule>

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"
  # 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"
  # OTF file
  ExpiresByType font/opentype                 "access plus 1 month"
  # SVG file
  ExpiresByType image/svg+xml                 "access plus 1 month"
</IfModule>​

Přidat komentář

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

Komentáře

Online poradna

https://www.24poradna.eu 4.10.2017 23:18

Dobrý článek, jen tak dál. Pomohl mi.

Odpovědět

Novinky z blogu

Přidání balíčku do Composeru bez Packagist

Composer umožňuje přidat balíček, který není zveřejněn na Packagist. Stačí, aby byl ve veřejném či privátním git repozitáři, dostupný lokálně na serveru v jiné složce nebo...

Další články