Domov Blog 13 rád, ako jednoducho zrýchliť WordPress webstránku

13 rád, ako jednoducho zrýchliť WordPress webstránku

Autor: Peter Farkaš

Prečo by sme mali dbať na rýchlosť načítavania webstránok?

Podľa tejto štúdie môžeme stratiť viac ako 50 % užívateľov, ak sa stránka načítava viac ako 3 sekundy. Príde ti to nereálne? Predstav si bežného užívateľa, ktorý je s najväčšou pravdepodobnosťou na mobilnom zariadení a pri prehliadaní vidí na mobile 3 sekundy biele pozadie, lebo sa mu stránka načítava pridlho. Je dosť možné, že sa mu buď nebude chcieť čakať, kým sa mu stránka načíta, alebo si popri načítavaní povie, že stránka pravdepodobne nefunguje.

S rýchlosťou blogu Lenivá kuchárka sme ešte nedávno mali problémy aj my, pomalšie načítavanie spôsoboval hlavne fakt, že sme využívali viacero pluginov a články obsahovali viac fotiek. Kvôli tomu som začal študovať ako zrýchliť WordPress webstránku bez nutnosti odstránenia potrebných pluginov a obrázkov, ktoré tvoria v podstate veľkú a nevyhnutnú časť blogu. Dnes by som ti teda rád ukázal 11 jednoduchých metód ako zrýchliť webstránku, ktoré mám osobne odskúšané a vďaka nim som zrýchlil priemerné načítanie stránky o viac ako 50 %.

Momentálne je na tom náš blog takto:

tools.pingdom.com

Ako túto rýchlosť otestovať?

Chceš si otestovať, ako rýchlo sa tvoja stránka načítava? Skús to cez tools.pingdom.com (Test from: Germany) alebo gtmetrix.com. Pri GTmetrix sa ale nezľakni, ak ti to ukáže dlhšie načítavanie, testovanie pravdepodobne prebieha na vzdialenom serveri. Alternatívou sú aj dáta v Google Analytics. Nájdeš ich pod Správanie > Rýchlosť webu. Za zmienku stojí aj metrika “Priemerná rýchlosť interakcie s dokumentom“, táto metrika ti ukazuje, kedy je už stránka načítaná tak, že s ňou môže používateľ interagovať. Túto metriku používam najčastejšie na určenie priemernej rýchlosti načítania stránky, nájdete ju keď si vytvoríte vlastný report v Google Analytics. Výhodou vyššie spomenutých stránok v porovnani s Google Analytics je, že ti dajú vedieť, aké sú nedostatky tvojej webstránky a odporučia ti ako tvoj web optimalizovať.

Moja rada na začiatok

Ak sa rozhodneš ísť do optimalizácie rýchlosti svojej stránky (alebo do hocijakej zmeny v CMS), rob zmeny krok po kroku a zapisuj si, aké zmeny na stránke robíš (a najlepšie aj kedy boli spravené). Pri WordPresse sa ti môže ľahko totiž stať, že niečo zmeníš a potom (alebo aj neskôr) zistíš, že ti niečo iné prestalo fungovať, alebo to už nefunguje tak ako predtým. Keď budeš zmeny robiť postupne a s časovým odstupom, bude sa ti ľahšie hľadať príčina možného problému. Stačí keď si spravíš v Excely jednoduchú tabuľku s údajmi, akú zmenu si na webe vykonal a kedy. Ja si takto napr. aj zapisujem, ktorý plugin som updatol a kedy, ak mi zrazu na webe prestane niečo fungovať ako má, viem ľahšie odsledovať, čím to mohlo byť spôsobené.

1. Plugin na cachovanie

Cachovanie (caching) v jednoduchosti znamená, že tvoj internetový prehliadač bude ukladať dáta stránky, ktorú užívateľ navštívi. Ak tento užívateľ z danej stránky odíde, ale neskôr sa vráti, nebude sa mu obsah načítavať odznova, pretože bude už uložený v prehliadači (do určitej doby). Toto je jedna z najlepších metód ako zrýchliť načítavanie webstránok. Stačí, keď si stiahneš cachovaci plugin a nastavíš si ho podľa potreby. My používame na blogu W3 Total Cache a podľa tohto manuálu si ho môžeš jednoducho nastaviť na ideálny výkon. Rady na využitie cachingu nájdeš asi v každom článku o zlepšení rýchlosti webstránky, niečo na tom teda asi bude :D.

2. CDN – Content Delivery Network, čo to je a je to vôbec potrebné?

Funkcionalitou CDN je v podstate cloudové riešenie ako načítavať obrázky z tvojej webstránky zo servera (krajiny), ktorý je k návštevníkovi čo najblžsie.

Problém: ak cieliš na užívateľov z celého sveta, je veľmi pravdepodobné, že napr. užívateľovi z Austrálie sa budú tvoje obrázky načítavať strašne dlho, pretože sú uložené na serveri, ktorý je umiestnený na Slovensku.

Riešenie: CDN systém má servery vo viacerých krajinách a tvoje obrázky sa budú načítavať zo servera, ktorý bude najbližšie k užívateľovi.

Spoločností, ktoré ponúkaju službu CDN, je viacero, my sme skúšali cenovo veľmi dostupný Bunny CDN a určite stojí za skúšku (má free trial), pri cca. 250 000 zobrazení stránok mesačne nám vychádzalo, že by sme platili asi 3 až 5 eur. Zváž si ale, či CDN vôbec potrebuješ, my sme sa nakoniec rozhodli túto funkcionalitu nevyužiť , pretože väčšina našich návštevníkov je zo Slovenska a po odsledovaní priemerného načítania webstránky z Google Analytics sme nevideli veľký rozdiel popri využívaní CDN.

Bonus výhoda CDN: tvoje obrázky sa budú načítavať z inej domény, čo môže zrýchliť celkovú rýchlosť tvojej stránky (o jednu vec v poradí menej, ktorú bude tvoja doména musieť načítať).

3. Optimalizácia obrázkov

Základ je uploadovať obrázky v rozlíšení, ktoré nepresahuje maximálnu plochu, kde sa obrázok bude zobrazovať.

Príklad: ak je maximálna šírka tvojho článku 800px (body width), nepotrebuješ uploadovať obrázok, ktorý je širší ako 800px.

Odporúčam taktiež používať plugin na zmenšenie veľkosti obrázkov, niekedy ti takýto plugin dokáže zmenšiť obrázok aj o viac ako 70 % jeho veľkosti, pričom kvalita obrázku zostane zachovaná. My používame plugin ShortPixel a sme s ním veľmi spokojní. Cez uvedený odkaz si okrem toho môžeš rýchlo otestovať, koľko miesta by ti spomínaný plugin na webe ušetril, ak si cez neho optimalizuješ obrázky. Priemerne za neho zaplatíme cca. 2 eurá mesačne, ale je dostupný aj vo Free verzii, pričom tá má zadarmo optimalizáciu 100 obrázkov na mesiac. Toľko ti možno aj bude stačiť a môžeš tak využívať neustále iba free verziu. Ak máš web, na ktorom uploaduješ viacero obrázkov, určite vyskúšaj takýto plugin, pretože posledné čo chceš je, aby sa tvojim návštevníkom načítavali články pomaly kvôli zbytočne veľkým obrázkom. Vidíš na týchto obrázkoch nižšie veľký rozdiel v kvalite? Majú rovnaké parametre, spodný obrázok bol optimalizovaný cez vyššie uvedený plugin a nastavený na najvyššiu možnú kompresiu. Pluginov na kompresiu obrázkov je naozaj veľa, v podstate ale robia všetky to isté, hlavné teda skôr je, aby vám ten váš plugin vyhovoval ak ide o jeho správu v WordPresse a kvalitu supportu.

Pred optimalizovaním - 192 kB

Pred optimalizovaním

Pred optimalizovaním - 192 kB

Po optimalizácii cez plugin ShortPixel  - 33 kB (-83 %)

Po optimalizácií

Po optimalizácii - 33 kB

4. Zbytočné pluginy

Naozaj potrebuješ všetky pluginy, ktoré máš aktívne? My sme ich kedysi mali viac ako 45, ale dokázal som to postupne skresať na cca. 30, čo veľmi pomohlo znížiť priemernú rýchlosť načítania stránok. Dôležité je aj vymazať pluginy, ktoré máš nainštalované, ale sú neaktívne. Ak ich nepotrebuješ, proste ich vymaž. Tu nájdeš zoznam pluginov, ktoré vytvárajú najväčšiu záťaž na rýchlosť webu, máš niektoré z nich?

5. Pozor na plugin Contact Form 7

Ak tvoja odpoveď na predošlú otázku bola "Contact Form 7", nemusíš sa obávať.  Toto je jeden z najpoužívanejších WP pluginov a používame ho aj my. Čo ale možno nevieš je to, že tento plugin sa spúšťa na všetkých stránkach tvojho webu, nie iba na stránkach, kde je reálne umiestnený. Ako to poriešiť? Stačí pridať kúsok kódu do tvojho súboru functions.php, celý návod nájdeš vo videu nižšie. Po implementácií odporúčam skontrolovať tvoje formuláre, či stále fungujú ako majú.

Alternativne, ak sa nechceš babrať s kódom, môžeš využiť Plugin Load Filter. Cez tento plugin budeš môcť nastaviť, či sa má konkrétny plugin spúšťať iba na stránkach, postoch, vo WP rozhraní a pod..

6. Zdieľaný hosting vs. VMS/VPS

Klasický (najlacnejší a najvyužívanejší) hosting pre WordPress je práve zdieľaný. Znamená to, že okrem tvojej domény môže byť na jednom serveri ďalších 100, s ktorými zdieľaš priestor. To môže spôsobovať pomalšie spojenie so serverom a tiež občasné výpadky. My sme sa už dávnejšie rozhodli využiť VMS (virtual managed server), kde je maximálny počet domén ďaleko nižší a výpadky stránky veľmi zriedkavé, ale samozrejme jeho cena je tým pádom vyššia. Ak máš problém s častým padaním tvojej webstránky alebo pomalou odozvou servera, VMS alebo VPS (virtual private server)  môže byť tá správna voľba pre teba. Len si pre istotu skontroluj,  či tvoj hosting provider takúto možnosť pre WordPress aj ponúka. My používame VMS od Active24, stojí nás cca. 20 eur mesačne (pre porovnanie, klasický zdieľaný hosting pre WordPress stojí cca. 2 eurá na mesiac).

Zdieľaný hosting vs VMS/VPS

Rozdiel v rýchlosti načitania stránok po prechode zo zdieľaného hostingu na VMS/VPS a implementácii cachingu

7. Defer Javascript

Pridaním  kódu nižšie do súboru functions.php nariadiš WordPressu, aby všetky Javascripty načítaval až keď sa načíta všetok obsah stránky. Toto ti môže pomôcť ak máš veľa pluginov. Pre istotu si ale poriadne tvoju webstránku po implementácii kódu otestuj, či všetky funkcionality naďalej fungujú ako majú. Nám sa napríklad stalo, že prestal správne fungovať plugin s Cookie Policy informáciou a zobrazoval sa užívateľom stále, aj keď ho zavreli.

// Defer Javascripts
// Defer jQuery Parsing using the HTML5 defer property
if (!(is_admin() )) {
 function defer_parsing_of_js ( $url ) {
 if ( FALSE === strpos( $url, '.js' ) ) return $url;
 if ( strpos( $url, 'jquery.js' ) ) return $url;
 // return "$url' defer ";
 return "$url' defer onload='";
 }
 add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

Existujú aj pluginy, cez ktoré si môžeš nastaviť defer aj pre konkrétne scripty, za skúšku by mohlo stáť napr. Async JavaScript. Moje odporúčanie je, implementovať defer len na konkrétne scripty, ktoré sa môžu načítavať až na konci, napr. sharing buttons, rating widget a pod.

Pri testovaní rýchlosti napr. cez GTmetrix zistíš, či sa ti odporúča použiť túto funkciu:

GT metrix - defer javascript

Alternatívne ak budeš používať CloudFlare, je tam jedna funkcia, ktorá sa volá Rocket Loader, s ňou sa scripty loadujú až po načítaní stránky.

8. Zbytočnosti v header časti a loadovanie smajlíkov

WordPress má štandardne nastavené rôzne zbytočnosti, ktoré možno nikdy nevyužiješ, ale môžu ti zvyšovať čas načítania stránky. Pozri si tento manuál ako z tvojho headeru odstrániť všetky zbytočnosti. Ak napr. nepoužívaš na svojej webstránke smajlíky, odstráň z WP ich zbytočné načítavanie. Ja som ich pre istotu nahadzoval štýlom pridať jeden, skontrolovať, či všetko na stránke stále funguje, pridať druhý....

9. PHP 5.6 vs. PHP 7

Tvoj hostingový provider bude veľmi pravdepodobne používať PHP 5.6, pretože je to stará odskúšaná verzia.  Ak máš pomalé WP Admin rozhranie, skús si vo svojom hosting panely zmeniť PHP 5.6 na PHP 7. Novšia verzia PHP 7 je oproti 5,6 výrazne rýchlejšia. Daj si ale pozor na to, že staré (dlho neaktualizované) pluginy nemusia PHP 7 podporovať, preto by som pred zmenou najskôr kontaktoval tvorcov pluginov, ktoré používaš, a spýtal sa, či ich plugin PHP 7 podporuje. Pre rýchly test, môžeš vyskúšať aj plugin PHP Compatibility Checker, ktorý ti dá vedieť, či sú ostatné pluginy kompatibilné s verziou PHP 7. Viac informácií o verziách PHP nájdeš tu. Mne osobne sa touto jednoduchou zmenou podarilo stránku výrazne zrýchliť.

10. Vyčistenie databázy

Cez plugin WP Optimize si môžeš vyčistiť svoju databázu od zbytočných dát, ktoré nikdy pravdepodobne nevyužiješ, ale WordPress ich pre istotu ukladá do tvojej databázy. Ide napr. o spamové komenty, pingbacky, staré revizie článkov atď.

My máme napr. nastavené, aby sa nám pre každý článok vytvárali iba tri revízie, čo celkom šetrí databázu. Vyčistiť revízie si môžeš cez vyššie spomenutý plugin a nastaviť si maximálny počet revízií môžeš cez tento kód, ktorý treba dať do súboru wp-config.php a to hocikam pred "require_once(ABSPATH . 'wp-settings.php');"

define ('WP_POST_REVISIONS', 3);

Počet maximálnych revízí si môžeš ľubovoľne zmeniť zmenou číslice v kóde. Staré revízie ti to ale nevymaže, na to treba použiť plugin spomenutý vyššie.

11. Minify CSS a HTML

Táto možnosť je aj v plugine V3 Total Cache (a pravdepodobne aj v iných podobných pluginoch). Jedná sa o odstránenie medzier, ktoré sa nachádzajú v kóde. Tieto nepotrebné medzery môžu zapríčiniť pomalšie načítavanie súborov, v ktorých sa nachádzajú a tým teda aj celej stránky.

12. HTTP/2.0

HTTP/2 je novší protokol, ktorý môže drasticky zrýchliť načítavanie webu, pretože oproti staršiemu HTTP/1, dokáže server posielať súbory naraz a nie po jednom. Toto je veľká výhoda hlavne ak máš na webe veľa pluginov, ktoré vytvárajú množstvo requestov. Predtým, než sa rozhodneš pre určitý webhosting, skontroluj si pre istotu či už používajú HTTP/2. Ak už webhosting máš, skontrolovať si či podporuje HTTP/2 si môžeš napr. tu: tools.keycdn.com.

13. Cloudflare

Toto je asi taká najpokročilejšia možnosť ako zrýchliť WordPress web (čo sa týka času na implementáciu), ale nie je to vôbec ťažké nastaviť. Cloudflare je v podstate CDN, ktoré ponúka okrem zlepšenia rýchlosti aj zabezpečenie alebo analytiku. Ja túto funkcionalitu používam iba pre zlepšenie rýchlosti, ale je fajn vedieť, že dokáže v prípade potreby pomôcť aj pred útokmi na web (napr. cez DDoS). Opisovať, ako si nastaviť Cloudflare by bolo asi na separátny článok, na YouTube je ale super návod, ktorým som sa riadil a môžem ho odporučiť. V nižšie uvedenom návode je aj spomenuté ako nastaviť W3 Total Cache plugin (ktorý som spomenul vyššie) ak chceš používať zároveň aj Cloudflare.

V tomto návode som vynechal iba jednu vec, featurka "Rocket Loader" mi spôsobovala, že sa stránky akoby načítavali 2x po sebe, tak som to radšej vypol :), načítavanie sa mi ale aj tak zrýchlilo odhadom o 20 %. Posledná vec: ak máš aj subdomény, nebudú ti po implementácií Cloudflaru fungovať, musíš ich manuálne pridať do DNS záznamu, kukni tento návod.

A na záver...

Pomohli ti tieto tipy zrýchliť webstránku? :) Ja priebežne cez rôzne fóra, videá, webstránky a blogy zisťujem nové možnosti, ako jednoducho zrýchliť našu webstránku a ak nájdem niečo nové a užitočné, určite to sem pridám. Vieš o inej metóde, ktorá by tu nemala chýbať? Prosím podeľ sa o ňu cez komentár.

Podporiť ma v tvorbe môžeš kúpou mojich kuchárok


Prezrieť knihu

Môže sa ti páčiť

Napíš komentár

Pridať hodnotenie


Použitím tohto formulára vyjadrujete súhlas s podmienkami ochrany súkromia.

8 komentárov

Angel 21.12.2021 - 19:37

Výborný článok. Ďakujem, že si sa podelil o svoje skúsenosti.
Upútala ma najmä časť o Cloudflare, ktorý sa tiež chystám vyskúšať na svojom blogu. :)

Reaguj
Ľubomír Laššák 12.4.2019 - 9:53

Výborný článok, dosť podrobný. Musím sa priznať, že som sa ním trošku inšpiroval pri písaní svojho ebooku na túto tému (https://www.itsoft.sk/ako-zrychlit-wordpress/), snáď to nebude prekážať :)

Reaguj
Peter Farkaš 12.4.2019 - 10:44

Vdaka Lubomir, v pohode, ked tak mi tam prosim uved stranku ako zdroj ;)

Reaguj
Vladimír Juroško 27.11.2018 - 11:42

Výborný článok. Ďakujem, že si sa podelil o svoje skúsenosti.
Upútala ma najmä časť o Cloudflare, ktorý sa tiež chystám vyskúšať na svojom blogu. :)

Reaguj
Peter Farkaš 27.11.2018 - 14:43

Ahoj Vlado, vdaka, potom daj vediet ci ti Cloudflare vylepsil rychlost webu ;)

Reaguj
Damián 29.9.2018 - 23:52

Pekne napísane niekto si dal záležať,,

Reaguj
Veronika
Veronika 30.9.2018 - 21:09

Ahoj Damián, písal to môj priateľ Peťo, ktorý má na starosti technickú stránku blogu :) A v jeho mene ti aj ďakujem za feedback :)

Reaguj
Peter Farkaš 15.11.2018 - 8:54

Vďaka Damián ;) tento návod sa snažim stále aktualizovať, takže časom bude dúfam ešte lepši :D

Reaguj