Na webu se to hemží tipy a triky, jak optimalizovat výkon WordPressu. Bohužel vysvětlení a vyhodnocení významu jednotlivých nastavovacích šroubků rychle ustupují do pozadí. Ukážeme vám důležitá východiska a nastavovací šrouby - v rozumném pořadí a s kontextem. Tímto způsobem můžete dosáhnout úspěchu obzvlášť rychle.
Mezitím jsme hostili mnoho projektů WordPress. Během nich se nashromáždilo mnoho dat. A stále znovu se nás ptáte, jak lze dobu načítání webu WordPress ještě více zkrátit. Systematicky jsme tedy zpracovali naše poznatky z minulých let. Výsledek: 10 opatření, pomocí kterých můžete snadno a rychle optimalizovat rychlost načítání stránek WordPressu.
Jedna věc je obzvláště důležitá: někteří se rychle nechají odradit návrhy optimalizace v nástrojích, jako je Google PageSpeed Insights. Dovolte mi, abych vám to řekl: Nejvíce času načítání nezískáte složitými optimalizačními opatřeními, ale snadno proveditelnými metodami.
Optimalizace doby načítání samozřejmě není samoúčelná. Kromě lepšího uživatelského zážitku přináší kratší doba načítání také výhody pro viditelnost vaší nabídky v Googlu. Z tohoto důvodu také stručně nastíním, o co vlastně v jednotlivých krocích optimalizace jde, abyste si vytvořili odpovídající kontext.
Teoreticky můžete postupovat shora dolů, a tak postupně zlepšovat dobu načítání webu. Mimochodem, prvních sedm bodů se týká také typických návrhů na zlepšení od společnosti Google PageSpeed Insights, kterým se podrobněji věnujeme například v tomto článku.
#1 Ukládání do mezipaměti - nejdůležitější faktor výkonu pro rychlé načítání
Ukládání do mezipaměti neboli caching znamená, že vaše stránka nemusí být nejprve požadována prohlížečem z webového serveru a poté sestavena krok za krokem. Místo toho je stránka načtena z mezipaměti s dokončeným vykreslováním.
Výhoda tohoto ukládání do mezipaměti je zřejmá: WordPress nemusí přepočítat stránku při každém jejím zobrazení. Protože je WordPress založen na velmi pomalém PHP, je zde ukládání do mezipaměti elementární. Protože mimo jiné brání, aby musel být PHP načten.
V zásadě existují dvě varianty implementace do mezipaměti:
- O pluginech mezipaměti: Většina uživatelů používá plugin mezipaměti, například W3 Total Cache nebo WP Super Cache. Jejich nastavení je někdy jednodušší, jindy složitější. V každém případě je zde zapotřebí určitá míra ruční práce.
- O hostiteli: Někteří hostitelé - včetně Raidboxes - nabízejí ukládání do mezipaměti na straně serveru. To znamená, že se téměř vždy obejdete bez cachovacích pluginů. Je to proto, že poskytovatel hostingu již nakonfiguroval mezipaměť za vás.
Pokud jste nastavili vysoce výkonné ukládání do mezipaměti, učinili jste již nejdůležitější krok k optimalizaci WordPressu. Podrobnější informace naleznete v našem článku o základech cachování.
#2 WordPress úklid - pořádek nade vše
Podle našich zkušeností je jednou z nejčastějších příčin dlouhého načítání přetížená instalace WordPressu. A protože tento bod vylepšení Google PageSpeed Insights nezmiňuje, je v mé top 10 přímo na druhém místě.
Nepřehledná instalace WordPressu ve většině případů znamená: Nainstalováno je příliš mnoho zásuvných modulů. V zásadě platí, že čím méně pluginů, tím rychlejší web. Zásuvné moduly jsou samozřejmě důležité a neobejdete se bez nich, ale vždy byste měli zkontrolovat, které zásuvné moduly skutečně potřebujete.
A: Měli byste dávat pozor, abyste pluginy nejen deaktivovali, ale zcela je odstranili.
Totéž platí u šablon: Víc než jednu nepotřebujete.
Pozadí je následující: každý zásuvný modul a každé téma přidává na vaše webové stránky kód PHP. To platí i pro deaktivované zásuvné moduly. Tím se vaše webové stránky stávají celkově objemnějšími, a tudíž pomalejšími (a náchylnějšími k útokům). Je to proto, že PHP je velmi pomalý skriptovací jazyk. Čím méně ho bude, tím lépe.
Zásuvné moduly a motivy, které již nejsou potřeba, jsou často pozůstatkem funkčních a designových testů. Proto je dobré webové stránky WordPress pravidelně čistit a nové funkce a návrhy testovat spíše v testovacím prostředí než na samotných webových stránkách. Tímto způsobem se vyhnete hromadění příliš velkého množství zbytků zásuvných modulů.
#3 Obrázky: podceňovaná brzda doby načítání
Jedním z nejúčinnějších a nejjednodušších opatření ke zkrácení doby načítání je zmenšení velikosti obrázků. Zde můžete ušetřit velké množství dat. Bezztrátová komprese obrázků" zmenšuje velikost souborů s obrázky bez viditelné ztráty kvality. To znamená, že se vaše stránka téměř vůbec nezmění, a zároveň můžete díky optimalizaci obrázků výrazně snížit její velikost.
Obrázky často tvoří největší část objemu dat na webových stránkách. Zmenšení velikosti obrázků by proto mělo být jedním z prvních kroků optimalizace. Obrázky můžete optimalizovat buď ručně, nebo pomocí kompresního pluginu.
Použití zásuvného modulu je jistě pohodlnějším řešením. Zásuvné moduly umožňují nejen komprimovat nové obrázky a jejich náhledy, ale také se automaticky starají o všechny stávající obrázky na vašich webových stránkách. Tato služba je však často zpoplatněna.
#4 CSS a JavaScript - zní objemně, lze ale snadno optimalizovat
Druhým největším objemem dat na webových stránkách jsou obvykle soubory JavaScript a CSS. Zde se projevuje velký strach z kontaktu. Ale i bez znalosti kódu snadno pochopíte, v čem spočívá optimalizace CSS a JavaScriptu. V zásadě je zde třeba udělat tři věci:
- Shrňte: CSS a JavaScript jsou ukryty v mnoha malých jednotlivých souborech. Prohlížeč si musí každý z těchto souborů vyžádat z webového serveru samostatně. To generuje požadavky HTTP, které mají tendenci prodlužovat dobu načítání webových stránek. Pokud jsou však skripty kombinovány, sníží se počet souborů, které je třeba načíst, a tím i počet požadavků. Například z 53 jednotlivých požadavků se stane jen asi tucet. Samozřejmě to za vás mohou udělat i příslušné moduly plug-in.
- Snížení: Soubory CSS a JavaScript jsou řádky kódu, které umožňují určité funkce a vzory na vašich webových stránkách. Tento kód píší lidé. Čtou ho však stroje. Proč je to důležité? Mnoho z toho, co člověk potřebuje ke správnému pochopení kódu, počítač nepotřebuje. Mezery, komentáře a podobně tedy nejsou potřeba k tomu, aby vaše stránka mohla být správně sestavena. Zde přicházejí ke slovu zásuvné moduly, jako je Autoptimize. Převádějí CSS a JavaScript z lidsky čitelného kódu na strojově čitelný. Díky tomu jsou jednotlivé datové pakety menší a jejich přenos rychlejší.
- Komprimovat: Po sloučení a zmenšení je posledním krokem komprese datových paketů, které jsou odesílány z webového serveru do prohlížeče. To znamená, že server minimalizuje velikost jednotlivých požadavků a prohlížeč je rozbalí a vypočítá. To je rychlejší než odesílání nekomprimovaných datových balíčků. Takovou kompresi GZIP můžete nastavit například pomocí zásuvných modulů kešování, pomocí ručního nastavení v souboru .htaccess nebo váš hostitel již kompresi na straně serveru aktivoval.
I bez znalosti skript je snadné pochopit, co jednotlivá opatření přinášejí. Pro všechny tři kroky navíc existují pluginy, které umožňují optimalizovat CSS a JavaScript i neprofesionálům. V našem článku o optimalizaci CSS a JavaScriptu vysvětlujeme další podrobnosti a představujeme různé pluginy.
Čtyřka vyhrává!
V těchto čtyřech oblastech lze ušetřit spoustu času při načítání. S relativně malým úsilím můžete již nyní optimalizovat svůj výkon - díky ukládání do mezipaměti, optimalizaci obrázků, optimalizaci CSS a JavaScriptu a vyčištění WordPressu můžete již nyní dosáhnout výrazného zlepšení.
#5 Hosting má velký vliv na dobu načítání
První čtyři oblasti optimalizace slibují obzvláště velké zkrácení doby načítání, ale mohou být k ničemu, pokud vás hosting zpomaluje. Nejde ani tak o hardwarové požadavky na WordPress, ale spíše o určité technologie, které ukazují, že vám hosting umožňuje WordPress odpovídajícím způsobem optimalizovat.
Jako pravidlo si můžete zapamatovat, že vysoce výkonný hosting WordPress by měl mít tyto klíčové údaje:
- Pevný disk SSD
- Paměťový limit PHP alespoň 64 MB, lépe 128 MB
- Datové centrum v zeměpisné blízkosti vaší cílové skupiny
- Aktuální verze PHP
- HTTP/2 a bezplatný certifikát SSL
Pak je tu rozdíl mezi sdíleným hostingem (shared hosting) a vlastním (virtuálním) serverem.
Při sdíleném hostingu sdílíte server a jeho výpočetní výkon s dalšími webovými stránkami. Obvykle je to několik desítek až několik stovek. U vlastního serveru se o výpočetní výkon s nikým dělit nemusíte. Nabízí proto výhodu v podobě bezpečnosti výkonu.
Ačkoli vlastní server není synonymem větší výkonnosti, zkušenosti ukazují, že levné hostingové tarify, které stojí jen pár eur měsíčně, nemohou konkurovat s virtuálními servery, pokud jde o výkon.
"*" povinný údaj
Detaily - méně přínosu, více úsilí
Všechny oblasti důležité pro výkon, které jsem dosud zmínil, může optimalizovat téměř každý. Buď pomocí zásuvných modulů, jednoduchým pokusem a omylem, nebo zakoupením odpovídajících produktů. Složitější to bude, pokud jste již tyto oblasti optimalizovali. Pak totiž musíte jít hlouběji do struktury stránky. A jednotlivá optimalizační opatření už nemají takový dopad.
#6 Blokování vykreslení - nesprávné pořadí při načítání
Bod, na který si nástroje jako je Google PageSpeed Insights opakovaně stěžují, je pořadí načítání, které blokuje vykreslování.
Problém je zřejmý na příkladu: Posuvník se skládá z obrázků a příkazu animace, který tyto obrázky otáčí. Pokud je příkaz JavaScriptu načten jako první a obrázky jako poslední, vaše stránka již má funkci posuvníku, ale ne obrázky, které se mají zobrazit. Stránka se proto bude načítat déle. Tomuto stavu lze zabránit správným pořadím načítání.
Přestože existují pluginy pro optimalizaci pořadí načítání, naše zkušenosti ukazují, že ne vždy jsou schopny plně optimalizovat vaše webové stránky. Ve skutečnosti nejlepších výsledků v takovém případě obvykle dosáhne webový designér, který je s webem a jeho funkcemi dobře obeznámen.
#7 Above the Fold - Optimalizace viditelné oblasti stránky
Kromě celkové doby načítání webu je rozhodující i vnímaná doba načítání. Jinými slovy doba, která je vizuálně vnímána jako doba načítání. Tuto vnímanou dobu načítání lze zkrátit pomocí několika triků. Například získáte dojem, že stránka je již kompletně sestavena, přestože na pozadí stále probíhají výpočty.
Optimalizace pořadí zatížení je obzvláště důležitá pro optimalizaci této oblasti, známé jako nad záhybem. To znamená upřednostnit obsah a funkce, které by návštěvníci měli vidět na první velikosti obrazovky.
Toho lze dosáhnout například optimalizací sekvence načítání. Existují však také pluginy, které zajistí efektivnější načítání stránky. A to pouze ve viditelné oblasti. a3 Lazy Load je příkladem takových pluginů. Tímto způsobem se vám stále zobrazí veškerý obsah, ale doba načítání stránky z toho může těžit, zejména pokud se jedná o stránku s velkým množstvím obrázků.
#8 Úklid databáze
Kromě obrázků a skriptů může být vaše databáze také příliš velká. Existují praktické nástroje, které vaši databázi udržují pěkně štíhlou, včetně pluginu WP-Optimize.
#9 Pingbacky a trackbacky
Ve výchozím nastavení WordPress komunikuje s jinými webovými stránkami, které umožňují pingbacky a trackbacky. Pokaždé, když je vaše webová stránka nebo jeden z vašich blogpostů zmíněn na takové webové stránce, je vaše webová stránka automaticky upozorněna - čímž je databáze zatížena navíc.
Pokud tuto funkci nepotřebujete (podle mého názoru je její přidaná hodnota stejně zanedbatelná), měli byste pingbacky a trackbacky deaktivovat. Opět zde pomůže plugin WP-Optimize. Pro úplnost je však třeba na tomto místě zmínit, že se jedná spíše o teoretický problém. Zatím jsme z tohoto důvodu nezaznamenali vážné ztráty výkonu.
#10 Zábrana hotlinkingu
Hotlinking znamená, že někdo odkazuje přímo na obrázek na vašem serveru, čímž vám vlastně "krade" šířku pásma. Na webovém serveru Apache můžete zabránit odkazování pomocí hotlinků přidáním následujícího kódu do souboru .htaccess:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yourwebsite.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?google.de [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?google.com [NC]
RewriteRule .(jpg|jpeg|png|gif)$ – [NC,F,L]Chcete-li na serveru NGINX zabránit odkazování za chodu, přidejte do konfiguračního souboru NGINX tyto řádky kódu:
location ~ .(gif|png|jpeg|jpg|svg|webp)$ {
valid_referers none blocked server_names
*.example.com example.* www.example.org/galleries/ ~\.google\.;
if ($invalid_referer) {
return 403;
}
}Členění kódu:location ~ .(gif|png|jpeg|jpg|svg|webp)$ {
určuje přípony souborů, které chcete chránit před horkými odkazy, například pokud chcete chránit soubory PDF, řádek kódu by vypadal takto:location ~ .(gif|png|jpeg|jpg|svg|webp|pdf)$
{valid_referers none blocked server_names*.yourwebsite.com ~.google. ~.bing. ~.yahoo.;
Tyto řádky jsou trochu obsáhlejší, ale pomohou vám lépe pochopit, co všechno můžete s tímto pravidlem dělat. V těchto řádcích je uvedeno, které domény mohou přesto odkazovat na vaše soubory. V tomto příkladu je to yourwebsite.com se všemi subdoménami a také Google, Bing a Yahoo.
if ($invalid_referer) {return 403;}
Pokud nyní přijde požadavek a požadovaný zdroj NENÍ na vrcholu vašeho whitelistu, server vrátí chybu 403 (Forbidden).
Další metody prevence horkých odkazů
V oficiálním adresáři pluginů WordPressu najdete řadu bezpečnostních pluginů, které můžete použít k zabránění hotlinkingu - například All In One WP Security & Firewall. Na adrese Raidboxes můžete hotlinkingu zabránit také prostřednictvím hlaviček CORS v nastavení webu Box . Pokud máte jakékoli dotazy ohledně konfigurace hlaviček na Box , obraťte se na náš tým podpory.
"A co CDN?"
Jednou z nejčastěji kladených otázek je síť pro doručování obsahu (CDN). Například: "Zrychlí CDN mé webové stránky pro návštěvníky v Německu?", "Proč vlastně potřebuji CDN?", "Doporučili byste mi používat CDN pro můj blog nebo obchod?". Ve většině případů však odpověď zněla: ne.
Stručně řečeno: CDN má největší smysl, pokud jsou vaši uživatelé geograficky široce rozmístěni. Například pokud máte zákazníky ve střední Evropě, Jižní Americe a Austrálii. Pokud je vaše hlavní cílová skupina omezena na jednu zemi, můžete síť CDN pro optimalizaci WordPressu rovnou zavrhnout.
Mimochodem, vývojář WordPressu Ernesto Ruge napsal o tomto problému velmi pěkný článek, který vám mohu jen doporučit.
Závěr: Nebojte se složitě působících optimalizačních kroků
Často existuje strach z kontaktu s takovými oblastmi, ve kterých je obzvláště snadné ušetřit čas při nakládání, nebo jsou zanedbávány. Jiné, jako například CDN, se však při konzultacích objevují stále znovu, ačkoli obvykle nemají na dobu načítání webu vůbec žádný vliv.
Proto vám mohu jen doporučit, abyste se nejprve zaměřili na "nízko visící ovoce" optimalizace výkonu WordPressu. S relativně malým úsilím můžete již nyní dosáhnout velkého pokroku při snižování doby načítání. A to i v případě, že jste laik.
Nenechte se proto znejistit radou nástrojů, jako je Google PageSpeed Insights.
Protože jde u optimalizace doby načítání ve své podstatě jen o několik oblastí:
- Zmenšení velikosti webových stránek
- Snížení počtu požadavků HTTP
- Komprese jednotlivých datových balíčků
- Optimalizace vnímané doby načítání
Pokud jste to pochopili, můžete také rozumně otočit 10 nejdůležitějších šroubů optimalizace WordPressu. A pro složitější optimalizační kroky jsou tu také odborníci, kteří váš web vyšperkují.
Doba načítání vám poděkuje!
