CDN a rychlost

CDN se v nabídkách prodává jako kouzelný urychlovač, přitom u typického českého webu s návštěvníky z Prahy a Brna ušetří desítky milisekund, ne sekundy. Rozdíl mezi rozumným nasazením a zbytečným výdajem je v tom, co přesně přes ni pouštíte.

Co CDN doopravdy dělá a co si o ní lidé myslí

CDN je síť serverů rozmístěných po světě, které drží kopii vašich souborů blízko návštěvníkovi. Když někdo z Ostravy otevře web s hostingem ve Frankfurtu, obrázky mu nepřijdou z Německa, ale z uzlu v Praze nebo ve Vídni. Ušetří se cesta tam a zpět, tedy latence, ne velikost přenášených dat.

Rozdíl v latenci je měřitelný a nudně předvídatelný. Z Prahy do Frankfurtu je odezva kolem patnácti milisekund, do Virginie sto až sto dvacet, do Singapuru přes dvě stě. Prohlížeč navazuje spojení v několika kolech, takže se latence násobí. Přesně tam vzniká rozdíl, který CDN umí smazat.

Co CDN nedělá: nezrychlí generování stránky ve WordPressu, nezmenší čtyřmegabajtovou fotku a nezruší dvanáct blokujících skriptů. Je to zkratka pro doručení, ne pro výrobu. Kdo nasadí CDN na pomalý web, dostane pomalý web doručený rychleji. Rozdíl v PageSpeed bývá dva až pět bodů a klient je zklamaný.

Kdy má CDN pro českou firmu smysl a kdy je to jen položka navíc

Pokud máte firemní web, návštěvníky výhradně z Česka a hosting v Praze, přínos CDN se pohybuje v jednotkách procent. Server je od návštěvníka vzdálený deset milisekund a rychleji už to nepůjde. V takovém případě je lepší investovat do obrázků a skriptů, tam jsou ještě celé sekundy k zisku.

Jakmile se publikum roztáhne přes hranice, poměr se otáčí. Penzion v Krkonoších s německými hosty, exportér strojů do Polska a Rakouska, e-shop se slovenskou verzí, fotograf s galeriemi po sto padesáti snímcích. U všech těchto případů CDN ušetří stovky milisekund a zároveň výrazně odlehčí hostingu.

Druhý důvod pro CDN nemá s rychlostí nic společného. Je to odolnost. Když na web pošlete reklamu a přijde tři tisíce lidí za hodinu, sdílený hosting za sto korun měsíčně se zadýchá. CDN většinu požadavků odbaví z cache a na váš server se dostane jen zlomek provozu.

• návštěvníci z více zemí, hlavně mimo střední Evropu
• weby s velkým objemem obrázků, videí nebo souborů ke stažení
• kampaně, kde na web přijde náraz několika tisíc lidí během hodiny
• hosting, který provoz zvládá, ale při špičce viditelně zpomaluje
• projekty, kde chcete zároveň ochranu proti zahlcení a filtrování botů
• weby se statickým obsahem, který se mění jednou za týden

Čísla z reálného měření, ne z marketingové brožury

Konkrétní případ z letoška. Penzion se serverem v Praze, návštěvník z Berlína přes mobilní síť. Před nasazením byl čas do první odpovědi dvě stě deset milisekund, po zapnutí Cloudflare s cachováním HTML na šedesát sekund klesl na čtyřicet pět. Metrika LCP spadla ze dvou celých devíti desetin sekundy na jednu celou osm.

Stejná úprava na webu, který cílí jen na Prahu a Brno, přinesla zlepšení z devadesáti milisekund na šedesát. To je v grafu vidět, ale zákazník to nepozná. Rozdíl pod sto milisekund člověk nevnímá, což je přesně důvod, proč CDN někdy nedoporučuji. Peníze odvedou lepší práci jinde.

Největší skok jsem viděl u fotogalerie svatebního fotografa. Sto osmdesát snímků, hosting v Německu, návštěvníci z celé republiky. Po přesunu obrázků na Bunny a nastavení dlouhé cache se doba do kompletního načtení zkrátila z jedenácti sekund na tři a půl a účet za přenos dat na hostingu klesl na čtvrtinu.

Pravidla cache: statika skoro navždy, HTML skoro nikdy

Většina zklamání z CDN pramení ze špatných pravidel cache. Soubory s hashem v názvu, tedy styly, skripty a obrázky z buildu, můžete cachovat na rok. Změní se obsah, změní se i název souboru, takže kolize nehrozí. HTML naopak cachujte na desítky sekund, jinak vám v cache uvízne stará cena.

Kombinace, která funguje: statika s hlavičkou public a max-age na jeden rok s příznakem immutable, HTML se s-maxage šedesát a stale-while-revalidate na jeden den. Návštěvník dostane okamžitě uloženou verzi a CDN si na pozadí stáhne novou. Aktualizace webu se pak projeví do minuty, ne za den.

Tlačítko na okamžité vymazání cache je nutnost, ne luxus. Bez něj budete po každé změně čekat a klient bude volat, že úprava není vidět. U Cloudflare je to jedno kliknutí, u Vercelu se cache invaliduje automaticky při nasazení. Do dokumentace projektu to patří hned na první stránku.

• statické soubory s hashem v názvu na jeden rok s příznakem immutable
• HTML na šedesát sekund plus obnova na pozadí po dobu jednoho dne
• vyloučit z cache košík, pokladnu, administraci a přihlášené stránky
• zapnout kompresi Brotli, u textových souborů ušetří dalších patnáct procent
• nastavit tlačítko pro okamžité vymazání cache po nasazení nové verze
• hlídat hlavičku Vary, aby se česká a slovenská verze nepletly

Kde CDN nepomůže ani náhodou

CDN nezachrání pomalý backend. Pokud stránka vzniká dotazem do databáze, který trvá osm set milisekund, návštěvník počká osm set milisekund pokaždé, když cache nezabere. U e-shopu s košíkem a přihlášením je necachovatelných stránek většina, takže se rychlost prakticky nezmění. Řešení leží v optimalizaci dotazů a v serverové cache.

Pořadí prací je proto vždycky stejné. Nejdřív obrázky a jejich rozměry, pak skripty a fonty, pak serverová cache a teprve nakonec CDN. Kdo začne od konce, zaplatí měsíční poplatek a získá pár bodů v PageSpeed. Kdo dodrží pořadí, ušetří sekundy a CDN mu pak přidá poslední desetinu.

• hero fotka o velikosti čtyři megabajty nahraná přímo z fotoaparátu
• dvanáct skriptů třetích stran, které blokují vykreslení stránky
• šablona, která načítá celou knihovnu ikon kvůli třem symbolům
• pomalé dotazy do databáze v katalogu s pěti tisíci položkami
• chybějící rozměry obrázků, kvůli kterým poskakuje rozvržení
• fonty načítané ze tří různých cizích domén

Náklady a co si z toho vybrat

Pro většinu českých firem je základní tarif Cloudflare zdarma dostatečný. Dostanete globální cache, kompresi, ochranu proti zahlcení a certifikát. Placené tarify řešte, až když potřebujete obrazovou optimalizaci na jejich straně nebo firewall s vlastními pravidly. Platit dopředu bez změřených čísel je zbytečné. Nejdřív měřte, pak plaťte.

U webů, které tlačí hodně obrázků, dává smysl služba účtovaná podle přenesených dat. Bunny stojí kolem jedné setiny dolaru za gigabajt, takže fotogalerie s dvaceti gigabajty měsíčního provozu vyjde na méně než pět set korun ročně. Proti tomu bývá poplatek za nadlimitní provoz na hostingu několikanásobně vyšší.

Práci na nastavení počítám jako jednorázovou položku od tří tisíc devíti set korun. Zahrnuje pravidla cache, vyloučení citlivých stránek, kompresi, test z několika zemí a měření před a po. Pokud u mě vzniká nový web od devatenácti tisíc devíti set devadesáti, jsou tato pravidla v ceně a nastavuji je při nasazení.

Časté otázky

Zrychlí CDN můj web, když mám zákazníky jen z Česka?

Znatelně ne. Server v Praze má k českému návštěvníkovi odezvu kolem deseti milisekund a to už nikdo nezlepší. Přínos se pohybuje v jednotkách procent a v grafu ho poznáte, v chování zákazníků ne. Peníze i čas dají větší efekt u obrázků, skriptů a fontů, kde jsou k zisku celé sekundy.

Stačí Cloudflare zdarma, nebo mám platit vyšší tarif?

Pro firemní web, blog i menší e-shop stačí bezplatný tarif. Dostanete cache po celém světě, kompresi, certifikát a základní ochranu proti zahlcení. Placený tarif řešte, až když potřebujete vlastní pravidla firewallu, obrazovou optimalizaci na jejich straně nebo podrobnější statistiky. Rozhodujte podle změřených čísel, ne podle marketingové tabulky funkcí.

Neuvidí zákazníci starou verzi webu, když zapnu CDN?

Jen když si nastavíte špatná pravidla. HTML cachujte na desítky sekund s obnovou na pozadí, statické soubory na rok, ale vždy s hashem v názvu. Do postupu nasazení přidejte krok, který cache vymaže. U Vercelu se to děje automaticky, u Cloudflare je to jedno tlačítko. Pak je změna vidět do minuty.