Zrychlení WordPress webu, je časté téma článků na různých blozích, protože to je neduh tohoto redakčního systému. Ale málokterý vám řekne, jak nákladné to může být a kolik vás to bude stát.
Na začátek se musím přiznat, že o tomto tématu jsem už přemýšlel delší dobu, protože články o tom, jak zrychlit WordPress se na českém internetu objevují snad co týden. Bohužel, většina z nich je stokrát to samé. Přečtete jeden a znáte ostatních 90%. Čest výjimkám.
Nedávno jsem si stáhl e-book o zrychlení webu, obětoval jsem email a vážně jsem chtěl zjistit, zda se situace zlepšila. Bohužel nezlepšila. Chápu, že se ten člověk snažil, ale stokrát nic umořilo osla.
Ale zpět k dnešnímu článku. Vzal jsem body, které jsou evergreenem každého návodu a ke každému jsem připsal svůj názor na jeho použití. V druhé části jsem sepsal, jak to vidím s ekonomičností zrychlení webu podle podobných návodů a co má podle mne smysl dělat a kdy. No a na závěr jsem přidal seznam článků, které jsem našel při letmém nakouknutí do Google serpu, ať si můžete udělat představu. Pokud jste sepsali podobný článek a chcete odkaz, napište do komentářů, když budu mít chvíli a chuť, přidám jej k ostatním.
Tipy pro zrychlení WordPress webu:
1/ Otestujte si svůj web
První bod je velmi důležitý, i když přímo s laděním nesouvisí. Co neznáte, nemůžete řešit. Existuje spousta online nástrojů, které můžete pro testování použít, nejznámější jsou https://www.webpagetest.org/ a https://tools.pingdom.com/. Pingdom dává o něco pozitivnější výsledky, Webpagetest je podrobnější, používám jej. V článcích se zmiňuje i GT Metrics, ale ten nemá servery blízko ČR, takže za mne nepoužitelný. Velmi dobře vám může posloužit i developer nástroj v Chrome.
Testy vám ukáží, kde máte slabé místo. Většinou to bývá velikost stránky, chybějící soubory ( stává se dost často u různých pluginů, kdy prohlížeč čeká na načtení neexistující ikony ), nebo dlouhá odezva serveru.
Náklady: zdarma
2/ Velikost obrázků
Jeden z nejčastěji zmiňovaných způsobů zrychlení webu. Velmi zjednodušeně řečeno, prohlížeč musí vaši stránku stáhnout, aby si ji mohl někdo přečíst. Čím větší bude, tím déle to bude trvat. A masívní navýšení velikosti může způsobit neopatrný uživatel, jenž třeba do Revolution Slideru nahraje fotky přímo z fotoaparátu. Plugin fotky nijak neoptimalizuje a lehce se stane, že jen hloupý slider, udělá na stránce několik mega velikosti. Řešením je optimalizovat datovou velikost obrázků. Protože však nemáte kontrolu nad náhledovými obrázky, které vytváří WordPress, nevyhnete se některé ze služeb, které optimalizaci dělají. Většina z nich je placená a má plugin do WordPressu, který propojí službu a váš web. Výhodou je automatické komprese při nahrávání obrázků do médií. Já používám Shortpixel.
Náklady: desítky dolarů, dle velikosti webu
Jinou záležitostí jsou špatné rozměry obrázků. Může se stát a již jsem to zažil, že programátor špatně napíše kód pro zobrazení miniatury (bylo to v carouselu) a WordPress pak použije originální obrázek, protože požadovanou velikost nenajde. Takže místo obrázku 200×200 pixelů, načítá prohlížeč 1200×600 pixelů, což je podstatně větší obrázek. Je ale možné, že programátor v pluginu nadefinoval velikost náhledu správně, ale vy jste nové velikosti nevygenerovali. Pomůže plugin https://cs.wordpress.org/plugins/regenerate-thumbnails/
Náklady: hodinová sazba programátora/kodéra – nedá se přesně určit, záleží případ od případu
3/ „Špatné“ a nepoužívané pluginy
Pokud chcete zrychlit WordPress, vypněte pluginy, které jej zpomalují, smažte nepoužívané a hlavně jich instalujte co nejméně.
Tuto mantru najdete snad v každém článku. Samozřejmě, že když vypnete všechny pluginy, které web zpomalují, bude rychlý. Otázkou je co dělat, když takový plugin potřebujete. WordPress je skvělý a poměrně levný, když se s vašimi potřebami trefíte přesně do toho, co konkrétní plugin umí. Je to jako s elektronikou. V notebooku je to, co tam je a celkem s tím nic nemůžete dělat. Buď se s tím smíříte, nebo si necháte plugin napsat na míru. Případně oželíte funkce, které plugin nabízí. Tady to bude vždy nějaký kompromis – rychlost vs. funkce.
Nepoužívané pluginy – zde to je jasné, pokud plugin nepoužíváte, smažte jej. Nevypínejte, ale smažte. Tyto pluginy jsou často při aktualizacích přehlížené a mohou být potencionálně nebezpečné, pokud v nich bude zranitelnost a vy se vykašlete na update.
Co nejméně nainstalovaných pluginů je opět případ, kdy musíte použít selské myšlení. Není totiž plugin jako plugin a v případě „velkých“, jako jsou WooCommerce, WPML, BuddyPress dojde k zatížení a zpomalení webu. Často ale můžete mít nainstalovány jednoduché pluginy, obsahující pár funkcí a pak je jedno, zda jich je 5, nebo 10. Zvláštní případ jsou pluginy, které se na frontendu nijak neprojevují. Například nástroje pro optimalizaci databáze. Takový plugin vám načítání webu nijak neovlivní.
Naštěstí, pro běžné záležitosti se najdou vždy nějaké alternativy, můžete vyzkoušet více možností a třeba najdete nějaký plugin, který bude podstatně lepší než ten, který používáte. V tomto bodu nehodnotím kvalitu kódu, který také může zpomalit web, ale to běžný uživatel nezjistí.
Náklady: čas na nalezení nejvhodnějšího a nejlepšího pluginu pro vaše potřeby – velmi individuální náklady, ale protože máme tendenci nepočítat svůj čas, tak jej řadím mezi méně nákladné části optimalizace
4/ Špatné a pomalé šablony
U šablon je situace podobná, jako u pluginů. Většina lidí používá již vytvořené produkty a těm se musí přizpůsobit. Takže výběr šablony je velmi důležitý. Navíc, u prémiových produktů se snaží prodejci co nejvíce „naleštit“ výsledek, takže takové šablony jsou plné vcelku zbytečných js a css souborů. Máte sice možnost částečně ovlivnit načítání souborů pomocí dequeue v child šabloně, ale často jsou tyto soubory v nějaké závislosti a vy pak zboříte celý vzhled. Většinou se bez pomoci programátora neobejdete. Takže vám zbývá, vybrat si jinou šablonu, nebo použít cache, viz. bod 12.
Náklady: individuální – na výběr a testování vhodné šablony
Další možností, jak vylepšit načítání webu v tomto bodu, je stavba vlastní optimalizované šablony. Zde si můžete přesně definovat co budete v šabloně chtít a pohlídat si výsledek. Rychlost pak určitě lepší než u zakoupené šablony.
Náklady: 20 – 100 tisíc, dle zadání a složitosti.
5/ Optimalizace databáze
Optimalizace databáze většinou spočívá v promazání vypršených dočasných záznamů, vymazání revizí uložených postů, odstranění „osiřelých“ dat po smazání nějakého obsahu. Smazání osiřelých variant je poměrně prospěšné u WooCommerce, kde může z nějakého důvodu, zůstav databázi varianta produktu, bez nadřazeného variantního produktu. Často takové promazání značně zmenší tabulku postmeta, čímž se zrychlí databázové dotazy. Existuje řada pluginů, které vám s tím pomohou, například https://cs.wordpress.org/plugins/wp-sweep/, ale pamatujte na zálohu před každou optimalizací.
Náklady: minimální – pouze čas na spuštění procedur optimalizačního pluginu.
6/ Pomalý hosting
Tohle je oblíbená část pro všechny stěžovatele. Není snad týden, aby se v diskuzích neobjevilo vlákno, kde si někdo stěžuje na to, že má pomalý web a může za to hosting. A zároveň jsou tato vlákna nejpopulárnější. Nebudu jmenovat, ale jeden z českých hostingů je přímo hromosvod pro takové lidi.
Neexistuje pomalý hosting. To, co si platíte, je tarif hostingu. Každý hosting jich nabízí několik a dostanete to co si zaplatíte. Když si koupíte sdílený hostingový tarif za pár desetikorun měsíčně, nesmíte se divit, že rychlost vašeho webu kolísá. Výkon stroje, na kterém je váš web je sdílen s ostatními weby na serveru.
V článcích se uvádí, že čas, kdy server odpoví ( označovaný jako TTFB ), závisí na tom jak výkonný hosting máte. To je i není pravda. V tu chvíli, kdy zapnete cache plugin, server vám vrací html stránku a odpověď by měla být co nejkratší. Pokud toto uděláte a TTFB budete mít dlouhý, pak je třeba začít hledat problém. A tím může být i nedostatečný výkon stroje a jeho přetížení, kdy zpracovává požadavky a váš stojí ve frontě.
Pak by přišla na řadu změna tarifu hostingu. Úmyslně píši tarifu, protože každá firma vám bude schopna nabídnout lepší výkon, ale samozřejmě za delší peníze. Toto rozhodnutí je především na vás, ale počítejte s tím, že čím lepší stroj, tím větší rychlost hlavně u WooCommerce eshopů, což poznáte především na pokladně, kde se na pozadí provádí řada PHP funkcí, které většinou nejsou cacheované.
Pokud přejdete na lepší stroj, poznáte zlepšení na první pohled především v administraci WordPressu.
Náklady: individuální – sdílený hosting desetikoruny měsíčně, virtuální server – stokoruny měsíčně, dedikovaný server – tisícikoruny měsíčně.
7/ PHP, HTTP 2, CDN
Tyto body jsem shrnul do jednoho, protože se jedná o věci, které nejsou přímo uživatelské, ale většina z nich by měla již být běžná na všech hostinzích. Protože jsou v návodech na zrychlení uváděny, patří to sem také.
Verze PHP zrychlí váš web – ano i ne. Zrychlí provádění PHP, což zaznamenáte u částí, na které není použitá cache. Třeba u ajax dotazů asi naměříte zlepšení, ale rychlost nezávisí jen na PHP, ale i na tom, jak je napsaná js část, jak rychle dojde k navázání spojení, atd. Protože by ale měla být PHP verze 7 automaticky již na každém hostingovém tarifu, beru to jako samozřejmost. Pokud nemáte PHP 7+, požádejte váš hosting o navýšení a pokud to nepůjde, je čas přejít jinam.
HTTP 2 – podobně jako verze PHP, zrychlí načtení vašeho webu a mělo by být na hostinzích již automaticky. Četl jsem několik článků, které sice nějaké dramatické zlepšení rozporují, ale ničemu to neublíží a rychlost to zlepšit může. Jen krátce, jak to funguje – prohlížeč u předchozího protokolu navázal spojení, stáhl css soubor, pak navázal další spojení a stáhl další soubor v pořadí. U HTTP 2 prohlížeč naváže spojení několik na jednou a stahuje soubory. Dochází tak k menším prodlevám při opakovaném navazování spojení. U HTTP se proto doporučovalo spojovat css a js soubory do jednoho většího, aby se počet spojení co nejvíce snížil.
CDN – je zjednodušeně řečeno rozkopírování statických souborů (obrázky, css, js a podobně) na více serverů po celém světě tak, aby Prohlížeč tyto soubory stahoval z umístění, které je bližší, než váš hosting. Snižuje se tak prodleva při přesunu dat, protože ze serveru v Thajsku budete obrázek stahovat delší dobu než ze serveru v Praze. Pokud tedy nejste v Thajsku. CDN je nezbytné pro všechny projekty, které mají mezinárodní ambice, u lokálních webu to zas až takový význam nemá. Existuje řada služeb, které vám použití DNS umožní, například CloudFlare. Většina z nich má i WordPress plugin, pomocí kterého se službou propojíte.
Náklady: – minimální, pouze u CDN dle použité služby, poplatky za použití.
8/ Javascript
Po obrázcích jsou javascriptové soubory největší brzdou načítání webu a opět záleží na tom, jakou máte šablonu a jaké jste použili pluginy. Pokud nemůžete vytvořit vlastní šablonu a pluginy, abyste optimalizovali kód, musíte se spolehnout na to, jak jsou napsané ty, které jste použili. Často tak můžete načítat v podstatě duplicitní, nebo zbytečnou funkčnost a jedinou možností, jak zrychlit web, je minifikace souborů, nebo jejich asynchronní načítání. Protože to je celkem běžná součást cache pluginů, stačí to většinou nastavit. Zde ale můžete narazit na problém, kdy po aktivaci odloženého načtení js souborů vám přestane fungovat část webu. To je protože, nemáte plnou kontrolu nad tím, jak a v jaké závislosti jsou js soubory vkládány do stránky. Dalším problémem u WordPressu může být, přesunutí načítání js souboru do patičky, jak doporučuje třeba Google, ale protože je většina pluginů a šablon závislá na jQuery, můžete si tím zadělat na problém.
Náklady: minimální, protože minifikace a asynchronní načítání je součástí cache pluginů. Optimalizaci js kódu zde vůbec neuvažuji, náklady na takovou optimalizaci se mohou vyšplhat na desetitisíce.
9/ CSS
Css soubory jsou další části, které se velmi často zmiňují při optimalizaci webu, pro rychlejší zobrazení. Dá se říci, že pro ně platí podobné pravidle, jako pro js soubory, tedy minifikace. Ta, na rozdíl od minifikace js souborů spočívá jen v odstranění mezer v souboru a komentářů. Stále platí, že rozhodující je velikost webu a pokud budete chtít ušetřit co nejvíce, můžete optimalizovat css kód odstraněním duplicitních pravidel. Čím více zmenšíte velikost souboru, tím lépe. Stejně jako u javascritpu platí, že tato optimalizace může být poměrně nákladná, na rozdíl od minifikace a spojení souborů, kterou umí každý cache plugin. Poznámka na konec – inline styly nejde cacheovat a to samé platí i o stylech nacpaných hlavičky pomocí customizéru, takže používat co nejméně, pouze v nejnutnějších případech. Což může být i vykreslení kritického css https://www.vzhurudolu.cz/blog/35-critical-css
Náklady: minimální, nastavení obsahují všechny cache pluginy. Optimalizaci neuvažuji.
10/ HTML
Stejně, jako css a js soubory, lze minifikovat i html kód. Stále jde o co největší zmenšení velikosti stránky a protože to umí také většina cache plugin, stačí to zapnout. Některé pluginy umí odstranit i komentáře z kódu, ale testujte, občas se web nezobrazuje správně. Samozřejmě, že i zde lze použít optimalizaci html kódu, ale opět, pokud na to nemáte budget, nepouštějte se do toho. a pokud máte dostatek financí, raději si nechte napsat rovnou šablonu na míru.
Náklady: minimální – součást cache pluginů, nebo free pluginy na WordPress.org
11/ Lazy loading
Dostáváme se k části, která vám může velmi vylepšit uživatelský dojem, při zobrazování webu, především u magazín, eshopů a webů, které mají velké množství obrázků. Při použití lazy loadingu se načítají obrázky, které jsou vidět na displeji zařízení a ty které jsou „mimo“ obrazovku se nahradí jednopixelovým obrázkem s minimální velikostí. Tak jak začnete scrolovat stránkou, jsou obrázky donačítány. Díky tomu se může velikost přenesených dat radikálně snížit a web bude podstatně svižnější. Většina cache pluginů to umí, nebo je možné použít free pluginy z WordPress.org.
K lazy loadingu chci říci, že velmi postrádám jeho použití třeba u carouselů, kdy se často načítá o 16 náhledů, i když viditelné jsou 4. Ale to je již záležitost programátorů.
Lazy loading se dá použít i na části html kódu, ale to je mimo rozsah tohoto článku.
Náklady: minimální, cache pluginy umí, lze použít free pluginy z WordPress.org.
12/ Cacheování
Zde musím napsat, že se budeme bavit o cache na straně webu, ne o serverové cache, což je záležitost hostingu. A také, že se budeme bavit o pluginech, které to umí, protože to je nejlepší a nejlevnější řešení. V podstatě si takový plugin uloží html stránku do nějakého souboru a má nastaveno, jak dlouho je ta uložená stránka platná. A když pak přijde na web návštěvník, tento html soubor pošle server prohlížeči. A to je v podstatě vše. Díky tomu se neprovádí php funkce a odpověď serveru je téměř okamžitá. Pokud použijete cache plugin, okamžitě vám spadne ukazatel TTFB.
Jde však jen o zrychlení prvního zobrazení webu. V případě, že máte na stránkách nějaký js script, který překresluje části stránek, nebo na pozadí něco vykonává, netýká se to již této cache. Problém také může nastat, pokud umožňujete uživatelům se přihlásit a na některé časti webu se cache nepoužívá. Například WooCommerce si ukládá data produktu do databáze a pak načítá tato data, aby je nemusela znovu generovat.
Na WordPress.org najdete řadu cache pluginů, které jsou zdarma a řadu z nich jsem vyzkoušel. Většinou jsem je musel kombinovat, například s pluginem Autoptimize, ale nakonec jsem šáhnul po plugin WP Rocket, který je sice placený, ale má nejlepší výsledky z hlediska poměru výkon/cena/nastavování. V podstatě stačí zapnout.
Náklady: minimální, při použití free pluginů/ 50 dolarů ročně při použití WP Rocket
13/ AMP
AMP je formát, který poslední dobou docela propaguje Google, především pro mobilní zařízení. Jde o to, že ze stránky oseká vše nepodstatné a nechá jen obsahovou část. Vhodné pro blogy a magazíny, pro eshopy moc ne. Web se pak načítá bleskově. Na Musilda.cz mám AMP aktivní, ale nikdy jsem to neměřil, takže vám nemohu říci, jak používané to je. Pro nasazení použijte free plugin z WordPess.org https://cs.wordpress.org/plugins/amp/
Náklady: minimální, instalace free pluginu.
14/ Aktualizace
Aktualizace se zmiňují spíše ve spojení s bezpečností, ale i rychlost webu často souvisí s aktualizovanými pluginy. Může se stát, že plugin používá nějakou knihovnu, umístěnou na externím serveru a po určité době se změní její umístění. Prohlížeč se pak snaží načíst neexistující soubor a web bude zpomalen. Případně si vývojáři uvědomí nějaký problém, který jejich plugin způsobuje a opraví jej. Příkladem mohou být webhooky ve WooCommerce, kdy se plugin snažil načítat i neaktivní webhooky. Problém byl v aktuální verzi pluginu odstraněn.
Náklady: nízké – čas na aktualizace a testování funkčnosti webu.
Co se vám vyplatí udělat a kdy?
V případě, že se vám zdá váš web pomalý a chcete jej zrychlit, projdete si několik návodů na zrychlení, bude vás zajímat, co to bude stát.
Vyjdeme z předpokladu, že máte běžný WordPress web, nebo magazín, žádné rozsáhlé databáze, či eshop a zvládáte základní práci s WordPressem, jako je instalace a nastevní pluginů a šablon.
- Zkontrolujete si hostingový tarif a jeho parametry, případně jej změníte, nebo si vyžádáte aktualizaci PHP a podobně.
- Nasadíte plugin, pomocí kterého zoptimalizujete obrázky na webu. Můžete použít i free plugin WP Smush, ale ve free verzi dělá kompresi jen na 80% myslím.
- Vyházíte nepotřebné a nepoužívané pluginy.
- Zoptimalizujete databázi.
- Nasadíte cache plugin.
- Nastavíte lazy loading obrázků a videí.
- Minifikujete css a js, případně zapnete spojení souborů.
- Minifikujete HTML
A to je v podstatě všechno, pokud nemáte k dispozici rozpočet v desítkách tisíc korun. Výsledky záleží na tom, jaký je výchozí stav. Občas můžete narazit na titulky – Jak jsme zrychlili web o 380% a podobně.
Je ale rozdíl, zda se snažíte optimalizovat web, který se načítá 12 vteřin a web, který se načítá 3 vteřiny.
Pokud uděláte to co jsem popsal výše, je velká pravděpodobnost, že pokud nebude šablona opravdu špatná, dosáhnete výsledku mezi 2 a 3 vteřinami. Což je dostačující výsledek, když budeme nohama na zemi.
Samozřejmě, že můžete chtít dosáhnout ještě větší rychlosti. Ale zde pak rostou velmi výrazně náklady na optimalizaci a bez programátora, nebo kodéra se neobejdete. Takže, pokud máte web, který generuje nějaký zisk a chcete do optimalizace investovat, raději se rozhodněte pro vlastní šablonu, která bude již od začátku uzpůsobená vašim potřebám a nebude obsahovat nic navíc, co by web brzdilo.
P.S.: vždy se dají najít cesty, jak drobně po kouskách web zrychlovat a pokud těch maličkostí uděláte dostatek, web bude opravdu svižný. Když si však spočítáte hodnotu vlastní práce, budete zase na desetitisících.
Články o zrychlení WordPress webu:
- https://www.andrliktomas.cz/zrychlit-web-wordpressu-vice-nez-84/
- https://www.wplama.cz/optimalizace-rychlosti-nacitani-webu-na-wordpress-bez-znalosti-programovani/
- https://www.danielnytra.cz/jak-zrychlit-web/
- https://mladypodnikatel.cz/jak-zrychlit-wordpress-web-v-nekolika-celkem-jednoduchych-krocich-t33879
- https://www.kocman.info/blog/jak-zrychlit-web-na-wordpressu/
- https://mojewebovka.cz/wordpress-navod/jak-zrychlit-wordpress/
- https://www.seoconsult.cz/blog/jak-zvysit-rychlost-nacitani-stranky-ve-wordpressu
- https://wp-programator.cz/zrychleni-webu-na-wordpressu/
- https://www.diginomad.cz/jak-zrychlit-wordpress/
- https://www.michalblazek.cz/wordpress/zvyseni-rychlosti-wordpress-webu-z-9-na-93-v-google-pagespeed-insights-krok-za-krokem
- https://www.snackhost.com/cs/blog/wordpress-navod-na-zrychleni-webu-pomoci-cachovacich-pluginu/
- https://www.chodelka.sk/navod-ako-som-dostal-rychlost-wordpress-webu-pod-2-sekundy/
- https://jurosko.sk/ako-zrychlit-wordpress/
- https://www.collabim.cz/akademie/knihovna/jak-docilit-rychleho-nacitani-stranek-na-wordpressu/
- https://www.lenivakucharka.sk/ako-zrychlit-wordpress-webstranku/
- https://www.webypro.cz/rychlost-nacitani-webu-wordpress/
- https://www.mikrom.cz/jak-bylo-narocne-zrychlit-wordpress/
- https://marketingmakers.net/jak-jsme-zrychlili-web-marketing-makers-o-3-sekundy/
- https://www.jaknawebovky.cz/jak-zrychlit-svuj-web-ve-wordpressu/
- https://www.ppcprofits.cz/blog/7-snadnych-tipu-pro-zrychleni-stranky-na-wordpressu
- https://www.websupport.sk/blog/2015/05/6-krokov-ako-zrychlit-wordpress/
- https://mkurri.cz/nacitejte-web-za-pul-sekundy-tipy-a-praktiky-ktere-udelaji-z-pomaleho-webu-superrychly-video/
- https://www.itsoft.sk/ako-zrychlit-wordpress/
