Optimalizace webu | 6. Cache obsahu

Publikováno dne: , aktualizováno, napsal: JŠ255861 - Podpora

Cache static content

Cachování je pro rovněž důležitou součástí webu. Prohlížeče si ukládají statický obsah webu do mezipaměti, tím dojde k rychlejšímu načtení webu při další návštěvě. Samotná stránka může prohlížeči sdělit, zda má soubory ukládat či nikoliv a případně na jak dlouho. Lze tedy definovat přesný čas pro konkrétní typy souborů.

Obsah se ukládá (cahuje) do mezipaměti prohlížeče, proxy cache poskytovatele webhostingu, rovněž je může mít vlastní cache Váš poskytovatel internetu a také touto funkcí disponují některé wifi-routery či jiné domácí síťové prvky.

Cachování ideálně řešte přímo pomocí souboru .htaccess, konkrétně pomocí mod_expires a „cache-control“ hlaviček.

Mod_expires

 
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A600
ExpiresByType text/javascript A604800
ExpiresByType application/javascript A604800
ExpiresByType text/css A604800
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType image/jpeg A604800
ExpiresByType image/x-icon A604800
ExpiresByType text/html A60
</IfModule>
  • A31536000 – hodnota v sekundách udávající dobu po jakou se má uchovávat v mezipaměti prohlížeče daný soubor. Po vypršení této hodnoty se soubory označí jako expirovaný a při dalším načtení stránky se stáhnou soubory znovu. 
  • ExpiresDefault – hodnota ostatních nedefinovaných souborů a nastavení jejich doby max. načtení.
  • image/jpg – typ cachovaného souboru, zde si zvolíte dle php typ souboru, které chcete cachovat. 

Cache-Control hlavičky

Následující příklad nastavuje ukládání kaskádových stylů (CSS) a javascriptových souborů (js) na jeden den s veřejným přístupem.

<filesMatch ".(css|js)$">
 Header set Cache-Control "max-age=86400, public"
</filesMatch>

Rovněž lze nastavit cachování obrázků, případně konkrétních typů. Tento příklad uloží obrázky na 2 roky opět s veřejným přístupem.

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

V případě této hlavičky lze nastavit následující parametry

  • No-cache – tato direktiva určuje, že se obsah nemá ukládat do mezipaměti, nicméně pokud se uloží, nesmí ji prohlížeč z mezipaměti nahrát, vždy se musí znovu dotázat serveru. Nelze kombinovat s No-Store
  • No-store – tato direktiva přísně zakazuje ukládání obsahu do jakékoliv mezipaměti. Tento parametr je vhodné nastavit u citlivých dat, nebo dat, u kterých je jisté že se do příští návštěvy změní. Nelze kombinovat s no-cache
  • Public – označuje že obsah lze uložit do jakékoliv mezipaměti mezi serverem a prohlížečem. Nelze kombinovat s private.
  • Private – označuje že obsah může být uložen pouze v mezipaměti prohlížeče.
  • Max-age – definuje maximální dobu, po kterou lze obsah v mezipaměti uchovat, než bude znovu stažen ze serveru.
  • must-revalidate – definuje že obsah je potřeba před zobrazením ověřit u původního serveru a nelze tedy zobrazovat zastaralý obsah

Pro cachování máme ověřený následující kód

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/jpg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 604800 seconds"
ExpiresByType application/xhtml+xml "access plus 604800 seconds"
</ifModule>

<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, max-age=360, must-revalidate"
</filesMatch>
</ifModule>