Cache a jak funguje

Změnil jsem klientovi ceník v pondělí ráno, on mi ve středu volal, že tam pořád svítí stará cena. Nešlo o chybu webu, šlo o cache, a stálo to jeden zbytečně nervózní telefonát.

Co je cache a proč vůbec existuje

Cache je odložená kopie. Když si někdo otevře váš web, prohlížeč si stáhne obrázky, styly, skripty a texty. Místo aby si to při každém dalším kliknutí stahoval znovu, uloží si to k sobě a příště sáhne po kopii. Ušetří tím čas i data. Bez cache by běžná stránka o velikosti dvou megabajtů zatížila připojení při každém proklikuu znovu.

Rozdíl je citelný. První načtení stránky trvá typicky 1,2 až 2,5 sekundy podle připojení. Druhé načtení té samé stránky s funkční cache často spadne pod 400 milisekund. Na mobilu v tramvaji je to rozdíl mezi tím, jestli zákazník počká, nebo se vrátí do výsledků vyhledávání.

Problém nastane ve chvíli, kdy obsah změníte. Kopie u zákazníka o tom neví. Drží se pokynu, který jste jí sami dali, jenom o tom nevíte, protože ten pokyn nastavil někdo jiný nebo se nastavil sám ve výchozích hodnotách hostingu.

Tři místa, kde se váš web ukládá

Cache není jedna věc na jednom místě. Jsou to nejméně tři vrstvy a každá má vlastní pravidla. Když ladíte, proč zákazník vidí starý obsah, musíte projít všechny tři odshora dolů. Většina lidí smaže tu první, uvidí správnou verzi u sebe a myslí si, že je hotovo. Zákazník přitom pořád kouká na starou stránku.

Vrstvy jsou navíc nezávislé. Můžete mít čistou cache v prohlížeči, ale CDN vám servíruje týden starou kopii, protože jste ji nikdy neproplachovali. Nebo naopak: CDN je aktuální, ale plugin na serveru drží starý HTML výstup a přeposílá ho dál.

U statického webu je to jednodušší, protože nemáte serverovou aplikační vrstvu. U WordPressu s třemi cachovacími pluginy najednou to bývá detektivka na hodinu.

• Prohlížeč u zákazníka: drží obrázky, CSS a JS, typicky hodiny až rok podle hlavičky
• Server nebo aplikace: WordPress cache pluginy, Redis, výstupní HTML cache
• CDN neboli síť serverů po světě: Cloudflare, Vercel Edge, Bunny, drží kopii blíž k návštěvníkovi
• DNS: nesouvisí s obsahem, ale při stěhování domény drží starou IP adresu a vypadá to stejně
• Mobilní operátor a firemní proxy: vzácné, ale existuje, hlavně u starších firemních sítí

Proč zákazník vidí starou cenu a vy novou

Vy jste na webu byli před hodinou, když jste ho upravovali. Vaše cache se tím obnovila. Zákazník tam byl naposledy před třemi týdny a jeho prohlížeč si drží kopii s instrukcí, že platí rok. To je běžné nastavení pro obrázky a styly, protože se u nich předpokládá, že se nemění.

Druhá častá situace: přepsali jste obsah v CMS, ale cachovací vrstva na serveru drží vygenerované HTML deset minut. Vy jste přihlášení jako administrátor, takže vám server servíruje čerstvou verzi bez cache. Nepřihlášený návštěvník dostane tu uloženou. Vypadá to jako záhada, je to úplně normální chování.

Třetí varianta je nejzákeřnější. Změnili jste obsah souboru, ale nechali stejný název. Prohlížeč pozná soubory podle názvu, ne podle obsahu. Když se styl.css jmenuje pořád styl.css, sáhne po staré kopii, i když jste v něm přepsali kompletně všechno.

Jak vynutit obnovu, aby to viděli všichni

Nejrychlejší kontrola u vás: otevřete stránku v anonymním okně. Když tam vidíte novou verzi a v běžném okně starou, problém je jen ve vašem prohlížeči. Když je stará v obou, je to server nebo CDN a musíte proplachovat vyšší vrstvu.

Zásadní technika, kterou používám u každého webu, se jmenuje verzování souborů. Místo styl.css nasadím styl.a7f3c2.css, kde ten kód se mění při každé změně obsahu. Prohlížeč vidí jiný název, vezme to jako nový soubor a stáhne ho. Nikdo nemusí nic mazat, funguje to samo a okamžitě.

Pokud verzování nemáte, zbývá ruční proplach. V Cloudflare je to Purge Everything a projeví se do minuty. Ve Vercelu se cache proplachuje při každém nasazení automaticky. U WordPress pluginů hledejte tlačítko Clear Cache, ale pozor: pokud máte pluginy tři, musíte proplachovat všechny.

• Anonymní okno pro rychlou diagnostiku, kde chyba je
• Tvrdý reload: Cmd plus Shift plus R na Macu, Ctrl plus F5 ve Windows
• Verzování názvů souborů, aby se cache obnovovala sama při každé změně
• Proplach CDN přes panel poskytovatele, u Cloudflare do minuty
• Kratší doba platnosti u HTML, typicky 0 až 60 sekund, dlouhá jen u obrázků a fontů
• Kontrola v hlavičce odpovědi: Cache-Control a Age vám řeknou, jak stará kopie to je

Co to stojí a kdy se to vyplatí řešit

Základní správné nastavení cache není samostatná položka, protože ho dělám součástí každé stavby. Když ale přebírám hotový web po někom jiném a musím rozplést tři cachovací vrstvy, které si navzájem lezou do zelí, je to samostatná práce a účtuje se.

Ceny níž jsou orientační podle toho, v jakém stavu web přebírám. Statický web na Vercelu se řeší za hodinu, WordPress s pěti roky historie a čtyřmi pluginy klidně za půl dne.

U webů, které stavím od nuly, je verzování a správné hlavičky součást dodávky. Web od 19 990 s dodáním do sedmi dní tuhle vrstvu obsahuje, protože bez ní se každá pozdější změna ceníku stane telefonátem.

Chyby, které vidím nejčastěji

Číslo jedna: cache na HTML nastavená na 24 hodin. Vypadá to jako optimalizace rychlosti, ve skutečnosti to znamená, že jakákoli změna obsahu se u vracejících se návštěvníků projeví až za den. U e-shopu s akcemi je to přímá ztráta peněz, protože zákazník vidí včerejší cenu a v košíku dnešní.

Číslo dvě: tři cachovací pluginy najednou ve WordPressu. Každý si myslí, že je jediný, každý ukládá výstup toho druhého. Vzniká vrstvený nepořádek, kde smazání jednoho nic neřeší. Řešení je nechat jeden a zbylé vypnout, ne odinstalovat naráz, protože si berou konfiguraci navzájem.

Číslo tři: proplach cache po nasazení, který nikdo nedělá. Pokud máte hosting bez automatického proplachu, musí to být krok v postupu nasazení. Jinak se na to zapomene vždycky, když spěcháte, což je přesně ta situace, kdy na tom nejvíc záleží.

Časté otázky

Jak poznám, že problém je opravdu v cache a ne v tom, že se změna neuložila?

Otevřete stránku v anonymním okně a zároveň se podívejte přímo do administrace nebo do zdrojového souboru. Když je v administraci nová verze a na webu stará, je to cache. Když je stará i v administraci, změna se neuložila a řešíte jiný problém. Tenhle jeden krok ušetří půl hodiny hledání.

Můžu cache prostě vypnout, ať mám klid?

Můžete, ale zaplatíte to rychlostí. Bez cache se každý obrázek a styl stahuje znovu při každém kliknutí a načítání se prodlouží typicky trojnásobně. Správné řešení je krátká platnost u HTML a dlouhá u obrázků, fontů a stylů s verzovaným názvem. Dostanete rychlost i okamžité projevení změn.

Kolik stojí, když mi cache nastavíte na existujícím webu?

U statického webu 1 900 až 2 900, u WordPressu se zamotanými pluginy 4 900 až 7 900 podle toho, kolik vrstev tam už je. U webu, který stavím já, je to součástí ceny od 19 990. Vždycky vám předem napíšu, co konkrétně tam najdu a kolik to bude, žádná práce navíc bez odsouhlasené ceny.