Zrychlení WordPressu pomocí Cloudflare (včetně 100% cachování)

Rychlé načítání webových stánek je již jedním z parametrů, které musí každý tvůrce sledovat. Základem je samozřejmě spolehlivý a rychlý hosting, ale i tak se dá jít vždy o kousek dál, já jsem to udělal.

WordPress jsem zrychloval nejen klasickým cachováním, minifikací a odstraněním nepotřebných skriptů, ale také pomocí CDN. Zašel jsem tak daleko, že jsem web „servíroval“ rovnou ze serverů Cloudflare.

Toto je nejen návod, jak napojit svůj web na službu Cloudflare, ale také několik triků, které vám ušetří čas a možná nemilá překvapení. WordPress a Cloudflare nemusí vždy fungovat bezproblémově. Částečně je ale možné to vyřešit.

Co je to CDN

CDN (Content Delivery Network) je infrastruktura geograficky distribuovaných a spolupracujících serverů. Tak nějak zní odborná definice. Zkrátka jsou to servery, ze kterých se uživatelům obvykle načítají obrázky/videa. Smysl mají u hodně navštěvovaných webů a těch s přístupy z více zemí, neboť se vybírá server nejblíže uživateli, takže není třeba stahovat přímo z hostingu.

Poskytovatelů CDN je celá řada, ať už je to MaxCDN, CDN77 či právě CloudFlare, který má jako jediná služba bezplatnou verzi.

Potřebujete vůbec Cloudflare?

Záleží. Máte-li kvalitní hosting, váš web není vysoce navštěvovaný magazín/aplikace s přístupy z více zemí, pak si nejspíše vystačíte i bez CDN. Pokud tedy nechcete hledat limity, stejně jako já. Případně pokud nechce využívat pouze správu DNS záznamů.

Nicméně možná už se vám stalo, že se nějaký příspěvek stal virální, někdo jej sdílel, odkazoval na něj a Google Analytics rázem ukazoval desítky až stovky lidí online na stránkách. To je případ, kdy je potřeba mít WordPress optimalizovaný a případně mít CDN, které uleví serveru.

Já osobně jsem využíval CloudFlare i k získání SSL spojení a tam, kde hosting zkrátka nebyl dostatečně spolehlivý. Takové užitečné „hacky“, navíc zdarma. Kromě samotné CDN má Cloudflare také např. firewall, aplikace či ochranu e-mailových adres (nejsou viditelné pro roboty).

Jak nastavit CloudFlare pro doménu

Zařídit si účet a připojit Cloudflare je otázka 5 minut, pokud to nebudete dělat poprvé, tak i s kompletním nastavením. Nejdéle trvá změna nameserverů a propagace DNS záznamů, takže tam klidně může být prostoj pár desítek minut.

Přidání webu a změna DNS

Ze všeho nejdůležitější je pochopitelně registrace, pokud ji nemáte. Vyplnit registrační formulář.

Poté, co máte účet u Cloudflare už stačí dát Add Site a jak můžete vidět na videu níže, proces je rychlý a jednoduchý. Nejprve zadáte doménu a Cloudflare si naskenuje DNS záznamy, které můžete rovnou upravit podle potřeby. Pak už vám vypíše nameservery, na které doménu nasměrujete.

Doména bude přidána až po ověření, že má nové nameservery. To může chvíli trvat, ale mezitím je možné již upravovat nastavení.

Instalace pluginu + základní nastavení

Cloudflare má v repozitáři WordPressu vlastní oficiální plugin, kterým je nejen možné spravovat nastavení, ale zabraňuje i zacyklení při přesměrování u HTTPS. Automaticky pak maže cache při změně obsahu.

Máte zde také možnost jedním kliknutím nastavit „optimální“ hodnoty pro WordPress. Výsledek je poté následující:

  • Security level: Medium
  • Caching level: Standard
  • Auto Minify: Enable Auto Minify for JS, CSS and HTML
  • Browser Cache Expiration: 4 hours
  • Always Online: On
  • Development Mode: Disabled
  • IPV6 Compatibility: Off
  • WebSockets: On
  • IP Geolocation: On
  • Email Address Obfuscation: On
  • Server-side Excludes: On
  • Hotlink Protection: Off
  • Rocket Loader: Off

Já osobně však toto nastavení nepoužívám. Stačí se podívat např. na zapnutí minifikace CSS/JS/HTML souborů, které je zapnuté. U WordPressu v 99 % případů instaluji některý cachovací plugin (doporučuji WP Fastest Cache či Autoptimize), který dělá to samé.

Určitě bych nechal vypnutý Rocket Loader, který sice načítání dokáže pekelně zrychlit, ale často mi zasekával skripty a rozbíjel slider apod. Když už, tak je potřeba si vše otestovat a hlídat.

Nebudu procházet každou jednotlivou položku, pokud umíte anglicky a uvedené pojmy pro vás nejsou neznámé, neměl by být problém vše nastavit podle individuálních potřeb. Na co ovšem zapomenout NESMÍTE jsou Page Rules.

Na záložce Page Rules si můžete, už podle názvu, nastavit pravidla pro jednotlivé URL. Lze využívat zástupný znak „*“ pro zahrnutí více adres. Selektivně tak lze nastavit všechny parametry. Bohužel neplacená verze nabízí maximálně 3 pravidla. Jedná-li se o WordPress, doporučuji tato:

https://vasedomena.cz/wp-admin/*
Security Level: High
Cache Level: Bypass

Pravidlem výše zabráníte načítání cachovaných souborů v prostředí administrace. Další užitečné pravidlo pak může být:

https://vasedomena.cz/*?*
Cache Level: Bypass

To se hodí pro případy, že si prohlížíte náhledy příspěvků/stránek. Ty mají v adrese vždy „?“ a takto je možné je korektně zobrazovat.

WordPress 100% z Cloudflare

Je mi zcela jasné, že nastavit si Cloudflare jako CDN není žádná velká věda, alespoň ne pro mírně pokročilé uživatele. Vzrušující část teprve přichází.

Magazín či jiný rozsáhlý web s velkým množstvím obrázků/fotek/videí, to je případ, kdy CDN dokáže ušetřit datový přenos z původního serveru. Tyto statické soubory se zkrátka načítají z nejbližšího serveru (např. v Praze) Cloudflare, ideálně pekelně rychle.

Nebylo by cool, kdyby se tak ale načítalo 100% webových stránek? Ve výsledku je stránka jen HTML soubor, takže proč by nemohla být načtená s obrázky, styly a skripty na serveru Cloudflare. MOHLA! Bohužel to má pár „ale“…

Nastavení 100% cachování

Asi jste si všimli, že jsem zmiňoval limit 3 pravidel (u bezplatné verze), ale doporučil jsem pouze 2. Je to tím, že já mám třetí pravidlo ponecháno právě pro tento případ, kdy chci mít vygenerovanou stránku „servírovanou“ rovnou z Cloudflare serverů.

Je potřeba přidat následující pravidlo:

https://vasedomena.cz/*
Cache Level: Cache Everything
Edge Cache TTL: 4 hours

Důležitý je parametr Edge Cache TTL, ten určuje, jak dlouho mají být soubory na CF serveru uchovány, než budou znovu načteny ze zdrojového serveru. Tady záleží na charakteru webu. U magazínu budete chtít spíše hodiny, u firemních stránek to klidně může být měsíc, když se nepřidávají často nové informace.

Bohužel je také nutné neprocházet front-end webu jako přihlášený uživatel, případně si vypnout navigační lištu. Může se totiž stát, že se tak stránka uloží a návštěvníci uvidí vaši lištu, což je zcela nevhodné.

Ověření funkčnosti celkového cachování

Jak poznat, že se vše načítá ze serveru Cloudflare? No pouhým okem ne, je potřeba se podívat např. do Developer Tools (Ctrl+Shift+I v Google Chrome), dát záložku Network, obnovit stránku (F5) a poté kliknout na první záznam a v hlavičce odpovědi bude cf-cache-status. Hodnota zde musít být „HIT“, tím poznáte, že se HTML soubor načetl z CF serveru.

Response header u webu s Cloudflare

Vidět můžete i hodnoty „MISSED“, tedy že se načítalo ze zdrojového serveru, případně občas ještě „EXPIRED“.

Automatické mazání cache

Už tedy víte, jak cachovat úplně vše, ale co když publikujete nový článek? Nemusí být hned vidět, protože web se stále načítá z Cloudflare serveru. To je jeden z problémů tohoto řešení.

Mazání cache (Purge Cache) má provádět oficiální plugin Cloudflare. Z nějakého důvodu se však kompletní vymazání cache nespouští automaticky při publikování článku, to dělá pouze u následujících hooků:

  • switch_theme
  • customize_save_after

Jenže my potřebujeme zejména reakci na publish_post. Nezbylo mi nic jiného, než hledat pluginy, které problém neřešili. Nakonec jsem našel jeden kód, který se mi podařilo upravit a vytvořit si vlastní snippet využívající API Cloudflare:


function vymazatCache() {
$ch = curl_init('https://api.cloudflare.com/client/v4/zones/ZONEID/purge_cache');
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'DELETE');
curl_setopt( $ch, CURLOPT_HTTPHEADER, array(
'Content-Type:application/json',
'X-Auth-Email:VASEMAIL',
'X-Auth-Key:VASAPIKLIC'
) );

curl_setopt($ch, CURLOPT_POSTFIELDS, '{"purge_everything":true}');
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
$result = curl_exec($ch);
curl_close($ch);
wp_mail( 'VASEMAIL', "File purged", $result );
}

add_action( 'publish_post', 'vymazatCache' );

Pokud byste ho chtěli použít, pak se vám bude možná hodit článek Jak zasahovat do šablony a je potřeba child šablona?, kde máte doporučení na plugin, který používám pro vkládání PHP kódu.

Kdy to nepůjde

Jak můžete vidět, podařilo se mi vyřešit jeden z největších problémů, které taková „honba za rychlostí“ měla. Věřte, nebo ne, ale fungovalo to poměrně dobře a zajistil jsem tak 100% dostupnost webu i ve chvílích, kdy měl hosting výpadek.

Bezplatná verze má však zásadní omezení, která toto použití vylučují například v kombinaci s WooCommerce. Tyto problémy přihlášených/nepřihlášených uživatelů se dají řešit pomocí cookies a Cloudflare na to má v pravidlech funkci Bypass Cache on Cookie, jenže je dostupná pouze platícím uživatelům.

Závěr

Za mě je Cloudflare skvělá služba, která i v bezplatné verzi umožňuje dělat neuvěřitelné optimalizace. Je ovšem potřeba orientovat se v jednotlivých nastaveních a dobře si pamatovat, co je nastaveno a podle toho pracovat s WordPressem.

U většiny webů asi nemá smysl mít vše cachováno na CF serverech, ale pokud už službu používáte, je dobré si pamatovat, jak toho dosáhnout. Ve chvíli, kdy by hosting přestal nápor stíhat, můžete to dočasně aktivovat a zajistit, že nikdo nebude na načítání čekat, tedy se tedy nejedná o eshop apod.

Napsat komentář

Novinky do e-mailu

Novinky do e-mailu

Chcete přehled toho nejzajímavějšího přímo do e-mailu, včetně mých plánů, rad apod.? Přihlaste si odběr!

Nespamuji, takže posílat budu max. 1-2x za měsíc. Odhlásit se můžete kdykoliv, jedním klikem. ;)

Super! Potvrzující e-mail máte ve schránce.