Základy Core Web Vitals: Metriky, které opravdu důležité
Pochopte tři klíčové metriky — LCP, FID a CLS. Proč jsou důležité a jak je měřit…
Přečíst článekNastavte HTTP mezipaměť, CDN a prohlížečovou mezipaměť. Návod krok za krokem, bez zbytečné teorie.
Mezipaměť je nejrychlejší cesta, jak zlepšit výkon webu. Když uživatel navštíví stránku podruhé, místo stahování všeho znovu z internetu se data načtou z jeho počítače nebo z blízké serveru. Výsledek? Stránka se načte desetkrát rychleji.
Je to jednoduché — vaši uživatelé nebudou čekat a Google bude spokojený. Víte, co vás čeká dál? Konkrétní nastavení, která fungují.
Mezipaměť není jeden pojem. Je jich vlastně tři a každá pracuje jinak. Některé nastavíte v serveru, některé jsou součástí CDN sítě a jednu ovládá prohlížeč automaticky.
Jsou to data uložená v počítači uživatele. Když přijde znovu, načte se z disku. To je nejrychlejší varianta. Říkáte jí taky lokální cache.
Nastavíte ji pomocí HTTP headers. Řeknete serveru: “Tento soubor ulož na 30 dní.” Pak se už nemusí znovu stahovat.
CDN má kopie vašeho webu na serverech po celém světě. Když se uživatel připojí z Francie, není nutné komunikovat se serverem v Česku.
Nejjednodušší je začít s HTTP headers. To jsou příkazy, které posílá server spolu s každým souborem. Třeba obrázek přijde se zprávou: “Ulož si mě na 90 dní.”
Cache-Control header pro obrázky:
Cache-Control: public, max-age=7776000
To znamená: 90 dní, všichni mohou používat, je to veřejné.
V Apache se to nastavuje v .htaccess souboru. V Nginx je to v konfiguraci. Nevíte jak? Existují generátory, které vám to udělají za chvíli.
Pojďme si představit reálný příklad. Máte web s obrázky, styly a skriptem. Bez mezipaměti se vše načítá pokaždé. S mezipaměť? Úplně jiná selhání.
CSS a JS soubory — Cache na 1 rok (31536000 sekund). Mění se zřídka, takže je můžete ulożit dlouho.
Obrázky — Cache na 3 měsíce (7776000 sekund). Opravdu se vás nebudou měnit?
HTML soubory — Cache jen na 1 den. Tady máte často obsah, který se mění.
Jakmile nastavíte mezipaměť, uvidíte rozdíl. Nemusíte čekat měsíc na data. Stačí přetížit stránku nebo ji otevřít v soukromém okně.
40–60%
snížení velikosti stažených dat
2–3
rychlejší načítání opakované návštěvy
+15 bodů
zlepšení Core Web Vitals skóre
Otevřete DevTools Network tab. Všimnete si sloupce “Size”. Poprvé uvidíte pravou velikost. Podruhé uvidíte “from cache” — to je váš zisk.
Mezipaměť není složitá. Není to ani drahé. Je to jen nastavení pár řádků kódu v .htaccess nebo Nginx konfiguraci. Chvíli to zabere, ale pak už jen funguje.
Víte co se stane? Vaši uživatelé budou mít rychlejší web. Google bude vidět lepší Core Web Vitals. A vy budete mít lepší metriky. Vypadá to jako vítězství pro všechny.
Tip: Není potřeba to být dokonalé. Začněte s CSS a obrázky. Pak přidejte HTML. Postupně to optimalizujte. Každé nastavení mezipaměti vás přiblíží k lepšímu výkonu.
Tento článek je informačního charakteru. Mezipaměť funguje jinak v každém prostředí — v Apache, Nginx, Node.js nebo Cloudflare CDN. Než si změny nasadíte na živý web, vždy je nejdřív otestujte na testovacimu serveru. Každý web má své specifické potřeby a chování. Co funguje pro jeden web, nemusí fungovat pro druhý. Pokud si nejste jisti, poraďte se se zkušeným vývojářem nebo správcem serveru.