Další článek o zrychlování stránek je tu a nyní se naučíme spravovat a využívat kešování souborů na stránkách. Kešování (ukládání do mezipaměti prohlížeče) má zásadní vliv na rychlost načítání stránek. Navíc je to příjemné doplnění k gzip kompresi, o které jsem již psal.

Co je to kešování souborů a k čemu slouží

Pokud to vezmu obecně tak kešování znamená přesunutí často používaných souborů z pomalejšího zdroje na rychlejší. V tomto případě stažení souborů z webu při prvním načtení stránky a následné uložení na disk. Protože disk v počítači je pochopitelně rychlejší než drtivá většina internetového připojení. Z webu se tedy budou stahovat jen soubory, které nechceme kešovat a vše ostatní se bude načítat z disku v počítači.

Asi už chápete, že kešování slouží k tomu, aby se zvýšila rychlost načítání stránek. Pokud tedy chcete bleskově rychlé načítání, využijte kešování.

Proč je načítání do mezipaměti (mimo jiné) důležité?

Ukládání webových souborů do mezipaměti (cache) prohlížeče je užitečné, protože má velký vliv na rychlost načítání stránek, ale to není vše. Šetříme také webový server díky sníženému přenosu dat. Zkrátka pokud nastavíte ukládání do mezipaměti prohlížeče, snížíte tím čas potřebný pro načtení stránky a budete šetřit přenos dat. Server v podstatě skripty, obrázky a CSS styly bude posílat jen novým návštěvníkům při prvním načtení.

Jak tedy provést a začít využívat kešování stránek?

Kešování budeme používat díky modulu mod_expires a zadáním pár řádků do souboru .htaccess. Podporu modulu na hostingu si můžete ověřit PHPInfo souborem. Nahrajete soubor (.php) na stránky a najdete ve výpisu nainstalovaných modulů (Loaded Modules) mod_expires.

Kód do .htaccess pro aktivaci kešování vybraných souborů

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A600
ExpiresByType text/javascript A31536000
ExpiresByType application/javascript A31536000
ExpiresByType text/css A1209600
ExpiresByType image/gif A1209600
ExpiresByType image/png A1209600
ExpiresByType image/jpeg A1209600
ExpiresByType image/x-icon A1209600
ExpiresByType text/html A1
</IfModule>

Tímto nastavením dáte pokyn prohlížeči, aby si stahoval soubory z lokálního disku (kam si je uložil při prvním načtení). Nebude je tedy stahovat ze sítě a stránky se díky tomu načítají rychleji. Čísla jako A1209600 značí ve vteřinách dobu, po kterou bude prohlížeč stahovat soubory z disku namísto webu. Po vypršení se soubory opět stáhnout ze sítě, uloží do mezipaměti a cyklus se opakuje. Hodnoty doporučuji nastavit na měsíc (2592000). Pokud soubory často upravujete, nastavte si klidně den (86400), týden (604800), ale více jak rok (31536000) rozhodně nedoporučuji.

V tomto konkrétním příkladu je kešování skriptů nastaveno na jeden rok. Styly CSS, obrázky a favicon (x-icon) mají platnost 14 dní. HTML je nastaven na jednu vteřinu (neměňte, HTML se nevyplatí kešovat). Ostatní druhy souborů, které tu nejsou vypsány se ukládají do mezipaměti po standardní dobu (kterou nastavíme v řádku ExpiresDefault).

Jak si ověřit, že mi kešování skutečně funguje?

Funkčnost si můžete ověřit přes jakýkoli nástroj, který zobrazuje HTTP hlavičky. Já používám tento gzip tester. Odešlete tam URL požadovaného souboru a uvidíte (v řádku Cache-Control by měl být ve vteřinách čas do expirace souboru a v řádku Expires jeho datum).

Pokud používáte rozšíření Firebug, přejděte do záložky Síť a aktivujte ji. Potom už jen znovu načtěte své stránky a sledujte, zda jsou soubory, které chcete kešovat zobrazené šedou barvou. To totiž znamená, že jsou čteny z mezipaměti a kešování tedy funguje.

Na co si dávat pozor a závěr článku o kešování

Je třeba brát v potaz to, že soubor zadaný jako jquery.js?ver=1.7.1 a jquery.js není pro prohlížeč totožný! Pokud na stránkách máte oba způsoby zadání skriptu (nebo třeba CSS), uloží se do mezipaměti dvě verze totožného souboru. Jestli se tomu chcete vyhnout, je nejlepší řetězce dotazu odebrat. U webů, které pohání WordPress to uděláte tímto kódem, který vložíte do functions.php používaného vzhledu.

Odstranění zbytečných parametrů z CSS a JS souborů

function _remove_script_version( $src ){
	$parts = explode( '?', $src );
	return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

V dalším článku se podíváme na obrázky. Trochu je poupravíme a budeme se snažit maximálně využít výkonu stránek. Do té doby si zkuste pročíst článek Na co stránka čeká od Dušana. Zaměřte se hlavně na skripty a jejich nepříliš známé parametry defer a v HTML5 nově async, které zrychlují vykreslování a zvyšují tak svižnost stránek (bohužel použití je dost omezené). Napište mi rovněž své připomínky a dotazy ohledně kešování, budu se těšit.