Immutable cacheování trvalých souborů

Pro rychlé načítání webu je důležité všechny objekty, které prohlížeč stahuje, dobře cacheovat.

Dost často jde statický obsah cacheovat na hodně dlouho. Tam mohou patřit soubory jako (a možná ještě další):

  1. styly,
  2. skripty,
  3. obrázky,
  4. videa
  5. fonty,
  6. favicony

V případě tohoto statického obsahu to znamená cacheovat s co možná nejdelší dobou expirace. Prohlížeč potom při opakovaných požadavcích na tento obsah dostane odpověď 304 Not Modified – signalisující, že nedošlo ke změně – a nemusí tak soubory znovu stahovat.

Pokud je potřeba obsah těchto souborů změnit, změní se jim URL (stačí klidně přidat nějaké časové razítko, otisk souboru nebo číslo verse za otazník):

<link rel="stylesheet" href="styl.css?v2">

Prohlížeč potom stáhne nový soubor a bude ho zase cacheovat na hodně dlouhou dobu.

Režie s 304 Not Modified

Ačkoliv hodně vzdálená expirace souboru ušetří opětovné přenášení dat, pořád to znamená dotaz na server a čekání na odpověď, že se nic nezměnilo.

U malých souborů může být tato režie i větší než samotné stahování obsahu.

Pokud je jasné, že se obsah na dané URL nikdy měnit nebude a případné změny se zajistí změnou URL, hodí se právě příznak immutable – česky „neměnný“.

Prohlížeč díky immutable příznaku bude vědět, že se daný soubor nikdy nezmění. U webů s hodně objekty (typicky obrázky), kde uživatelé často refreshují (např. sociální sítě), se tím značně zrychlí opakované načítání.

Toto klíčové slovo se uvádí v HTTP hlavičce Cache-Control:

Cache-Control: max-age=365000000, immutable

Parametr max-age uvádí dobu do expirace cache od prvním přístupu k souboru v sekundách.

Podpora v prohlížečích

Příznak v hlavičce immutable jako první implementoval Firefox 49 a funguje jen na HTTPS. Hlavičku immutable posílá např. Facebook.

Chrome se podle všeho snaží optimalisovat dotazy na neexpirované soubory při běžném načtení:

Různé typy načtení v Chrome

A od Chrome 54 podporuje i tuto hlavičku. Podporu v ostatních prohlížečích se mi nepodařilo zjitit.

Nicméně uvést immutable do hlavičky je bezpečné a v nepodporovaných prohlížečích nic nerozbije, takže se nejspíš vyplatí i pouze pro Firefox a Chrome.

Implementace

Nastavení dlouhé platnosti neměnných souborů může při použití souboru .htaccess vypadat následovně:

<filesMatch ".(css|js|jpg|jpeg|png|gif|svg|ico)$">
  Header set Cache-Control "max-age=365000000, public, immutable"
</filesMatch>

Navíc je v příkladu ještě příznak public, který značí, že se jedná o veřejně přístupný obsah.

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Automatická datová optimalisace obrázků

Hromadné datové zmenšení obrázků

Chceme-li zrychlit načítání své stránky, datová optimalisace obrázků může pomoci.

Asynchronní načítání CSS

Načítání CSS bez blokování vykreslování

Jak asynchronně načítat CSS, aby neblokovalo vykreslování stránky.

Datová velikost stránky

Datová velikost stránky

Jak by měla být stránka datově velká pro rozumně rychlé načítání.

Lazy loading obrázků

Lazy loading obrázků

Načtení obrázků, až když je na ně odrolováno. Různé postupy řešení.

Spojení CSS a JS souborů

Spojení CSS a JS souborů do jednoho

Zrychlit načítání webu pomůže sloučení CSS a JavaScriptu do jednoho souboru. Hotové řešení v PHP.

Komentáře