WordPress

WP Rocket – návod ke zrychlení web stránky

Návod a tipy pro nastavení pluginu WP Rocket , pomocí kterého dokážete viditelně zrychlit vaši WordPress stránku.

Co je to cache

Cache je v poslední dobře tak často omílané slovo, že o něm mluví už pomalu i moje babička. Cache je pojmenování pro dočasnou, resp. vyrovnávací paměť počítače, i serveru.

Namísto toho, aby se celá webová stránka musela znovu načítat (tedy prakticky stahovat ze serveru), určité části, které se nemění, se načítají z této paměti.

Dochází tedy k úbytku datového toku mezi klientem a serverem, s čímž je spojen menší obnos přenesených dat a zejména vyšší rychlost načítání stránky.

Cache na straně serveru

Každý alespoň průměrný server má vlastní cache systém. Server si většinou pamatuje uložené obrázky, CSS i JS soubory, které jsou společné pro celou stránku.

Namísto toho, aby uložené logo stále posílal na klienta, pošle pouze informaci, že klient již má u sebe logo uložené a může jej tedy použít.

To platí pro většinu obrázků na stránce. Možná jste se někdy setkali s problémem, že se vám stále zobrazoval starý obrázek, i když jste jej už nahradili novým. Tak za to může cache.

Během vývoje webové stránky si samozřejmě potřebujeme cache vypnout, protože provedené změny potřebujeme vidět hned. Dá se to provést na straně serveru, v ovládacím panelu od vašeho hostingu.

Cache na straně stránky

I na straně WordPress u umíme nastavit cache. Ono se tomu sice říká cache, ale ve skutečnosti se provádí jen optimalizace použitých kódů a dalších souborů.

K tomuto účelu můžeme použít několik pluginů. Některé z nich jsou zdarma a většinou pokrývají jen základní funkcionalitu. Mnohé mají placené verze, nebo jsou placené od základu.

V tomto článku se budeme věnovat pluginu WP Rocket, který je placený, ale určitě jej s klidným svědomím můžu zařadit mezi jeden z nejlepších pluginů pro optimalizaci rychlosti.

Jak získat WP Rocket? Jaká je jeho cena?

WP Rocket získáme výlučně z jejich oficiální webové stránky . Cenově máme na výběr tři plány – SINGLE za 49$ ročně, použijeme při jedné webové stránce. Plán PLUS za 99$ použijeme na tři stránky a plán INFINITE za 249$ ročně použijeme na nekonečno webových stránek (vynikající pro vývojáře, kteří dělají kvantum stránek).

Po vyplnění fakturačních údajů a zaplacení dostaneme ke stažení soubor .zip, který obsahuje náš plugin a licenci. Plugin nahráme přes wp-admin do naší stránky (Pluginy-> přidat nový-> nahrát plugin). Po úspěšné instalaci nezapomeneme plugin aktivovat.

💡 Tip: Pre rýchly web ⏱ je kľúčové vybrať si správny hosting. Odporúčam vsadiť na overenú kvalitu ➡️ WebSupport, Wedos alebo Hostcreators.

Návod k nastavení pluginu WP Rocket

V praxi jsem se již několikrát setkal s tím, že si člověk nainstaloval cache plugin a nezaznamenal žádnou změnu. Jistěže. MÍT cache plugin je sice hezké, ale je to jako mít řidičák (ale nejezdit). Abychom dosáhli zlepšení výkonu a optimalizace rychlosti, budeme muset WP Rocket nakonfigurovat.

K nastavením WP Rocketu se dostaneme ve wp-adminu přes hlavní levý sloupec v sekci Nastavení –> WP Rocket . Klepneme. Ukáže se nám nástěnka a spousta rozličných, na první pohled strašidelných, možnosti. Pojďme si je teď rad-radem projít.

Dashboard

Nástěnka. Zde se zobrazují základní informace o vašem účtu, licencí a pod. Máme možnost zde zapnout „Rocket Analytics“, což znamená, že se budou odesílat nějaká data do centrály WP Rocketu. Vývojářům pluginu tomu tak může pomoci.

Cache

Základní nastavení pro cache.

Můžeme zapnout/vypnout cachování pro mobily , doporučuji nechat zapnuté. Můžeme také oddělit cache soubory zvláště pro velké PC a zvláště pro mobily. Osobně to nikdy nedělám, protože nevidím důvod.

Enable caching for logged-in WordPress users zapne cache pro přihlášené uživatele. Pro jednodušší a prezentační stránky nepotřebné, pokud však máte nějakou stránku, kde se uživatelé přihlašují (např. e-shop), může být tato funkce užitečná. V základě přihlášený uživatel nepoužívá cache (počítá se s tím, že přihlášený uživatel je správce webové stránky, který by měl vidět stránku bez cache, aby uměl odkontrolovat okamžité změny). Když zaškrtnete toto políčko, budou cache používat i přihlášení uživatelé.

Cache Lifespan – zde nastavíme časový úsek, po kterém se má cache automaticky promazat. Po kliku na „Minutes“ dostatečně na výběr hodiny a dny. Vždy nechávám nastavenou základní hodnotu, ale je to samozřejmě na vás. Čili pokud někdy provedete změnu, nezačne se projevovat hned, je třeba cache manuálně „flushnout“, tedy resetovat. Pokud zapomenete, automaticky se resetuje po zde zadaném čase.

Manuálně se cache dá promazat prostřednictvím Admin panelu (ten černý pásek nahoře), v něm najdeme položku WP Rocket a kliknutím na Clear cache flushneme celou cache. Tím se začnou změny projevovat všude, i nepřihlášeným uživatelům.

File optimization

Asi nejzajímavější část. Zde nastavíme, jak má WP Rocket zpracovat soubory, které tvoří webovou stránku.

Basic settings

Minify HTML – zminifikuje zdrojový kód HTML stránky tak, že poodstraňuje řádkování či zbytečné mezery. Málo účinné, ale prakticky se zde nemá co pokazit. Zapínám vždy.

Optimize Google Fonts – toto určitě nechte zapnuté, zlepší se tak načtení Google Fontů, které téměř jistě používáte.

Pozn.: V novějších verzích WP Rocketu již nejsou Basic settings dostupné (již nemají význam).

CSS Files

CSS je jazyk, pomocí kterého se, zjednodušeně řečeno, nastavuje vzhled stránky. V ideálním vesmíru obsahuje každá stránka jeden .css soubor, ve kterém jsou všechny vizuální věci ponastavovány. To ale určitě neplatí ve WordPress . Jelikož WordPress je složitá platforma a sestává z témat a pluginů, téměř každý plugin má své vlastní CSS soubory (a málokdy jen jeden). Ve výsledku tedy načítáte několik desítek CSS souborů při každém načtení stránky.

Minify CSS files – zminifikuje .css soubory tak, že poodstraňuje řádkování a mezery. Podobně jako v případě HTML minifikace. Tím, že CSSkových souborů je více, je toto nastavení téměř nutností.

Combine CSS files – toto nastavení udělá to, že proletí všechny .css soubory, které stránka používá a vytvoří z nich jeden velký soubor (jeden jediný). Přiblížíme se tedy ke stavu ideálního vesmíru – načtete jen jeden .css soubor, byť větší. Určitě je třeba tuto možnost zapnout.

Optimize CSS delivery – Toto nastavení zapínám také. Způsobí, že CSS se bude načítat „asynchronně“, tedy nezávisle na ostatním obsahu webové stránky.

Samozřejmě, aby to nebylo tak jednoduché, nastavení kombinování CSS souborů může způsobit vizuální chyby na stránce (tzv. bugy). V takovém případě je třeba zjistit, co daný problém způsobuje a konkrétní .css soubor zařadit do „Excluded CSS Files“.

Javascript files

Stejně jako v případě CSS máme možnost zoptimalizovat i Javascriptové soubory.

Minify a Combine se chová na vlas stejně jako v případě CSS

Remove jQuery Migrate – jQuery Migrate je pomocná jQuery funkce, která upozorňuje na nekompatibilitu mezi verzemi jQuery a pluginy či tématy třetí strany. Od WordPress u 5.5 se již nepoužívá a tudíž ji můžete vypnout.

Load JavaScript deferred – v podstatě udělá totéž jako Optimize CSS delivery – javascript se bude načítat nezávisle na zbytku souborů na stránce.

Pozn.: Pokud používáte http2 protokol, není třeba kombinovat CSS, ani JS soubory.

Media

V této sekci nastavíme obrázky, videa a jiný multimediální obsah.

Lazy Load

Lazy Load je funkcionalita, která zabrzdí zbytečné načítání obrázků, které nejsou hned viditelné na stránce. To způsobí značný nárůst rychlosti, neboť obrázky se začnou načítat až tehdy, když se přiblížíte k jejich místu. Zadám si www.wp.sk a docela dole ve footru je wp.sk logo, což je vlastně obrázek.

Lazy load způsobí to, že stránka se načte bez tohoto obrázku. Teprve když se kroucením kolečkem myši dostaneme do blízkosti footru, tehdy se obrázek načte na pozadí a zobrazí. Do té doby ho není třeba. Bez lazy loadu se načítá celá stránka hned na začátku.

Enable for images – povolí Lazy load pro obrázky.

E nable for iframes / videos – povolí lazy load pro videa a iframy. Iframe se často používá například. v případě facebook feedu, nebo při vložení youtube videa či obsahu z jiné stránky.

Replace YouTube iframe with preview image – nahradí nenačtené video náhledovým obrázkem (např. pokud bychom rychle zkroutili na místo, kde má být video a ještě by se nestihlo načíst na pozadí).

Emoji

Emoji jsou dost zbytečná část WordPress , ale na nějakých blozích mohou najít své uplatnění. Vlastně jsou to smajlíky (emotikony), které WordPress převádí automaticky do grafické podoby. Pokud to nepotřebujete, můžete je klidně vypnout.

Embeds

Disable WordPress embeds – zabrání jiným „táhnout“ část vaší stránky na externí stránky. Doporučuji nechat zapnuté.

WebP compatibility

Nastaví cachování pro WebP obrázky. WebP je relativně nový formát obrázků, který je určen především pro zobrazování na internetu. Obrázek má menší velikost, ale srovnatelnou kvalitu s jpg. Každé jpg i png lze konvertovat na WebP, prostřednictvím nějakého konvertoru a až tak nahrát na stránku. Pokud však WebP nepoužíváte, není nutné toto nastavení zapínat.

Přeload

Jak jsem uvedl výše, WP Rocket funguje stylem vytvoření vlastních souborů (zejména .css a .js), které se pak používají v ostrém provozu webové stránky, namísto původních. Preload je funkce, která spouští toto generování souborů. Stejně tak i přegenerování již vytvořených souborů, pokud na stránce nastane nějaká změna (např. přidání nového článku apod.).

Zde doporučuji nechat zapnuté „Activate Preloading“, stejně tak „Activate sitemap-based cache preloading“, „Yoast SEO XML sitemap“ (pokud používáte Yoast SEO plugin) a také „Enable link preloading“. To pro 99% webových stránek naprosto stačí.

Advanced rules

Zde nastavíme pokročilá pravidla pro WP Rocket. Víme zde například specifikovat podstránky, soubory a pod. které se nemají nikdy cachovat. Umíme nastavit výjimku při cachování cookies nebo na základě použitého prohlížeče.

V rámci WP Rocketu je možnost používat tvz. wildcards, neboli zástupný znak hvězdičku *. Pokud potřebujeme např. z cachování vyřadit celý plugin, řekněme Contact form 7, je nesmysl pod sebe vypsat 10 .css souborů, které se nacházejí ve složce contact-form-7. Namísto toho použijeme wildcard, asi takto:

Wp-content/plugins/contact-form-7/* čímž zajistíme, aby celá složka (a tedy celý plugin) zůstal nezacachovaný.

Databáze

V této sekci umíme stránku v některých případech pěkně zrychlit, ale má to svoji daň. Můžeme zde provést tzv. vyčištění databáze od na první pohled nepotřebných dat. WP Rocket doporučuje před takovými operacemi s databází provést zálohu databáze.

Můžeme zde vymazat revize, automatické koncepty, příspěvky z koše, neschválené komentáře, transienty, optimalizovat tabulky a nastavit automatický cleanup.

Při tvorbě každé podstránky nebo článku ve WordPress se uloží tolik revizí, kolikrát klikneme na tlačítko AKTUALIZOVAT. U velkých webů, které obsahují zejména články, to může být dost problém, vzhledem k tomu, že revizí může být i několik milionů. Smazáním těchto revizí značně usnadníme život databázi, avšak přijdeme o možnost vrátit se k předešlé verzi článku či podstránky.

CDN

CDN znamená Content Delivery Network. Používáte to a možná o tom ani nevíte. Na kódové úrovni webové stránky, existují různé knihovny, které se obecně používají při tvorbě webové stránky.

Typickým příkladem může být jQuery nebo Google fonty. Výhodou je, že návštěvník Vaší webové stránky již pravděpodobně bude mít jQuery na svém PC staženy z jiné stránky a tak jeho prohlížeč při vykreslování stránky nemusí táhnout znovu soubor jQuery ze serveru, ale ze své mezipaměti.

To se projeví na zrychlení webu. Ve skutečnosti se však jedná jen o několik kilobajtové soubory, které extrémní vliv na rychlost mít nebudou, pokud jde o klasickou webovou stránku.

Heartbeat

Heartbeat je vestavěná funkcionalita wordpressu. Jedná se o nějaký pravidelný „impulz“, na jehož základě se posílají na server ajax requesty v pravidelných intervalech (jednou za minutu).

Využívá se toho při notifikacích, které se zobrazují v administrátorském prostředí, při automatickém ukládání článků a podstránek, při zamknutí obsahu při editaci jiným uživatelům (vyskočí pověstná tabulka „Uživatel #jméno upravuje tento článek“).

Osobně jsem nikdy s tímto neměl problém, a ani jsem to nikdy neřešil. Heartbeat zde umíte teoreticky i úplně vypnout, ovšem určitě to nedoporučuji, jelikož jde o zásah do vestavěné funkcionality WordPress u, nemluvě o použitých pluginech, které se mohou stát nepoužitelnými. Takže omezit toto nastavení má význam jen u nějakých slabých pluginů.

Add-ons

Možnost nainstalovat jiné pluginy, které spolupracují s WP Rocketem a zajistí ještě lepší rychlost.

Image optimization

Na optimalizaci obrázků byste měli myslet už při tvorbě webové stránky, resp. při nahrávání obsahu. Slušnost káže na stránku nedávat obrázek větší než 300kB. Rozměr FullHD (čili 1920×1080) je pro většinu webových stránek naprosto dostačující. Určitě nedoporučuji nahrávat na web gigantické obrázky ze zrcadlovky (např. 6000×4000).

WordPress si je sice přesto ořízne na rozměr 4K, ale důležitější než rozměry je datová velikost obrázku. Existuje opravdu jen několik výjimek, kdy je nutno použít datově velký obrázek.

U takových obrázků však vždy používáme jeho miniaturu a plný obrázek až při kliknutí na něj (např. otevřením v Lightboxu). V každém případě, WP Rocket neobsahuje možnost optimalizace obrázků, ale velmi pěkně spolupracuje s pluginem Imagify .

Další známý plugin, pro optimalizaci obrázků je EWWWW Image optimizer (po použití doporučuji odinstalovat).