Ako Zrýchliť Načítavanie Stránky WordPress: Kompletný Sprievodca

Máte blog alebo web pre seba alebo pre niekoho iného? Určite sa vašim čitateľom nechce čakať neúmerne veľa sekúnd, kým sa článok načíta. Rýchlosť načítania stránky je kľúčová v každom prípade, nezáleží teda na tom, akému účelu má slúžiť web. Používatelia očakávajú rýchle načítanie a vyhľadávače, ako je Google, berú rýchlosť stránky ako jeden z dôležitých hodnotiacich faktorov.

Podľa štatistík boli ľudia v roku 1999 ochotní čakať až 8 sekúnd na načítanie stránky. Dnes štvrtina návštevníkov odchádza z webu, ak sa nenačíta do 4 sekúnd. Iba 2 sekundové zdržanie v načítaní môže zvýšiť odchody z košíka až o 87%. Pomalšie stránky môžu negatívne ovplyvniť predaje alebo iné ciele.

V tomto článku sa pozrieme na rôzne metódy a nástroje, ktoré vám pomôžu zrýchliť načítavanie vašej WordPress stránky. Dobré je sledovať page speed pri webe aj mobilnom telefóne, ktoré sa často líšia.

Nástroje na Meranie Rýchlosti Načítania

Ak máte iba pocit, že vaše stránky sú pomalé, môžete si to overiť aj pomocou online nástrojov. Existuje niekoľko skvelých nástrojov, ako si zmerať rýchlosť načítania. V nástrojoch ako Google PageSpeed Insights sa stretnete so špecifickými termínmi, ktoré je dobré poznať. Tieto metriky sú kľúčové pre pochopenie toho, ako rýchlo a efektívne sa stránka načítava z pohľadu používateľa.

Medzi odporúčané nástroje patria:

• GTmetrix
• Webpagetest
• Page Speed Insights od Googlu
• Pingdom

Ideálny čas je 2 sekundy a menej. Aspoň to sú očakávania internetových používateľov a odporúčanie z Google. Samozrejme, nie vždy bude možné takýto čas dosiahnuť. Dobré sú aj 3 sekundy. Tak či tak, mali by ste sa čo najviac tým 2 sekundám priblížiť a znížiť čas načítania čo to len pôjde.

Faktory Ovplyvňujúce Rýchlosť Načítania

Predtým, ako začnete optimalizovať rýchlosť stránok, je potrebné identifikovať, ktorá časť spôsobuje pomalé načítavanie. Je to pomalá aplikácia, priveľké obrázky, priveľa súborov? Taktiež je potrebné identifikovať nepotrebné súbory, ktoré sa načítavajú, avšak nemajú vplyv na zobrazenie stránky. Napríklad fonty, skripty či súbory štýlov, ktoré sa nepoužívajú celé alebo ich časť.

Medzi hlavné faktory patria:

• Internetové pripojenie: Vzhľadom na to, že dnes už nie je internet napojený cez telefón ako kedysi, a poskytovatelia internetového pripojenia aj mobilný operátori poskytujú v dnešnej dobe vysokorýchlostné pripojenie, tento faktor do úvahy nemusíte brať.
• Internetový prehliadač: V minulosti boli rozdiely dosť výrazné, ale dnes sú tieto rozdiely menšie. Najrýchlejšie prehliadače sú jednoznačne Google Chrome a Firefox.
• Výkon servera: Keď cez prehliadač chcete nájsť nejakú web stránku, v podstate zadávate príkaz vzdialenému počítaču (serveru, na ktorom je web stránka umiestnená), aby vám sprístupnil a zobrazil súbory danej stránky.
• Dedikované zdroje: Každý server má určitý výkon (RAM - pamäť; CPU - procesory). V prípade zdieľaného hostingu si výkon servera “zdieľa” viacero web stránok. V Prípade Virtuálneho servera (VPS) si už môžete nakonfigurovať prostriedky servera podľa svojich potrieb.
• Rýchly hardware: Dáta sa načítajú z novších SSD diskov sa oveľa rýchlejšie ako z klasických HDD.
• Prepojenie: Aby sa vám WordPress stránka načítala, potrebujete prístup k databázam a ďalším zdrojom. V ideálnom prípade by tieto zdroje mali byť na jednom serveri pre rýchlejšiu prepojenie a komunikáciu medzi nimi.

Optimalizácia pre Rýchlosť

Existuje mnoho spôsobov, ako zrýchliť svoje WP stránky, pričom každý z nich sa dopĺňa s ostatnými. Univerzálna metóda neexistuje. Zlepšenie rýchlosti vášho webu je v skutočnosti súhrnom viacerých týchto metód dohromady.

1. Optimalizácia Obrázkov

Najčastejším problémom pri rýchlosti zobrazenia je veľkosť obrázkov. Pri vkladaní obrázkov na vašu stránku je potrebné myslieť na to, že je vám zbytočné vkladať do stránky obrázky s vysokým zobrazením, ak daný obrázok nezobrazujete v takomto rozlíšení. V praxi to znamená, že ak obrázok stránka zobrazuje v rozlíšení 600 na 300 pixelov, je zbytočné a zaťažujúce nahrávať takýto obrázok vo vyššom rozlíšení.

Ďalšie tipy na optimalizáciu obrázkov:

• Zvoľte správny formát obrázkov a správny pomer kompresie a zachovanie kvality obrázku.
• Ak máte ten istý obrázok umiestnený viackrát na webstránke, používajte vždy jeden a ten istý obrázok a nenahrávajte ho zakaždým na webstránku.
• Optimalizujte obrázky pre malé zariadenia. Definujte, ktorý obrázok sa má pri akej šírke obrazovky načítať v danej časti stránky. Je nepotrebné načítavať obrázok so šírkou 600 pixelov pre zariadenia so šírkou menšou ako 600 pixlov. Urobte si kópie obrázka v menšom rozlíšení a následne definujte, ktorá verzia obrázka sa kedy má načítať. Niektoré CMS disponujú nástrojom, ktorý to za vás vykoná.
• Ak máte na stránke veľký počet obrázkov, ktoré tam nevyhnutne musia byť, nenačítavajte všetky obrázky pri prvom načítavaní stránky. Načítajte len obrázky, ktoré sa zobrazia návštevníkovi na jeho zariadení a zvyšok obrázkov načítavajte až pri skrolovaní.
• Pri protokole HTTP je tiež výhodné spojiť viac menších obrázkov, ktoré obsahujú grafiku (nie fotografie) do jedného súboru, tzv. image sprites. Takto znížite počet súborov potrebných k načítaniu stránky. Tu treba byť opatrný, keďže nechcete vytvoriť jeden priveľký obrázok a efekt bude opačný.
• Hlavne pri ikonách porozmýšľajte, či ich budete načítavať ako obrázky alebo ako časť fontov. Ak máte na stránkach napríklad 2 ikony a tie sú súčasťou fontov obsahujúcich ďalších 100 ikon, ktoré nevyužívate a celková veľkosť tejto fontovej sady je väčšia ako veľkosť 2 obrázkov, je potrebné prehodnotiť, či nie je rýchlejšie načítať tieto ikony ako obrázky. Platí to však aj naopak. Na stránkach máte veľa ikon, ktoré sú uložené ako obrázky. Porozmýšľajte, či sa vám neoplatí zaplatiť grafika, ktorý vám vytvorí vlastnú fontovú sadu, ktorá býva zvyčajne menší súbor. Taktiež zmenšíte počet potrebných súborov na stiahnutie. Takéto ikony sú aj krajšie zobrazované na retina obrazovkách, čiže môžete meniť ich veľkosť bez straty kvality.

2. Cachovanie (Caching)

Catching je akcia dočasného uloženia údajov do medzipamäte, takže ak používateľ navštevuje vaše stránky často, údaje sa doručia automaticky bez toho, aby znova prešli procesom počiatočného načítania (k čomu dochádza pri prvej návšteve stránky). Vyrovnávacia pamäť je druh pamäte, ktorá zhromažďuje údaje, ktoré sa pravidelne požadujú pri každej návšteve a používa sa na zvýšenie rýchlosti poskytovania týchto údajov.

Medzi najlepšie doplnky patria WP Super Cache a W3 Total Cache a WP Super Cache - sú bezplatné a najlepšie hodnotené v oficiálnom úložisku WordPress.org.

3. Siete na Doručovanie Obsahu (CDN)

Sieť CDN požiada o obsah vašej stránky z najbližšie umiestneného servera k miestu vašich čitateľov. (A CDN will request your site content from the nearest server location to your readers’ accessing point.) To znamená, že uchováva kópiu vašej stránky v mnohých dátových centrách umiestnených na rôznych miestach po celom svete. Akonáhle návštevník navštívi vaše stránky prostredníctvom svojho domovského umiestnenia, najbližší server si vyžiada váš obsah, čo sa prejaví v rýchlejšom načítaní. Cloudflare a MaxCDN (teraz StackPath) sú najobľúbenejšie riešenia pre WordPress.

4. GZIP Kompresia

Pomocou tejto metódy môžete komprimovať súbory svojho webu tak, že ich zmenšíte. Toto zníži bandwidth vášho webu a rýchlejšie prenesie príslušné súbory do prehliadača. WP Super Cache aj W3 Total Cache majú funkciu kompresie GZIP, ktorú môžete povoliť po inštalácii.

5. Optimalizácia Súborov

Ďalšie tipy na optimalizáciu súborov:

• Taktiež je výhodné nastaviť na serveri komprimovaný transfer, čo v praxi znamená, že server zmenší veľkosť súboru pred prenosom a tým sa zníži celkový prenos dát.
• Výhodná je aj minifikácia súborov typu css alebo js. Ide o metódu, kedy sa z týchto súborov odstránia nepotrebné medzery a tým sa zmenší celková veľkosť súboru.
• Spájanie súborov do jedného súboru je tiež výhodná metóda. V princípe sa zmenší počet prenesených súborov (súbory sú spojené do jedného väčšieho súboru). Treba však byť opatrný, keďže tieto súbory môžu byť kritické pre zobrazenie stránky a stránka sa nezobrazí, pokiaľ tento veľký súbor nie je načítaný, čo môže mať v konečnom dôsledku negatívny efekt. Avšak správne pospájané súbory zväčša majú efekt pozitívny.
• Súbory typu JS (obsahujúce skripty) sa snažte dávať, ak je to možné, na koniec stránky. Taktiež skripty nepotrebné pre chod stránok, spúšťajte až po načítaní, či vykreslení obsahu stránky. Takto môžete presunúť len skripty, ktoré nie sú potrebné pre renderovanie DOM (Document Object Model). Veľmi pomalé alebo vyťažené zariadenia, môžu u návštevníka vyvolať dojem pomaly sa načítavajúcej stránky. Skripty, ktoré sa spúšťajú ešte pred vytvorením DOM, na týchto zariadeniach, sa spúšťajú dlhšie, ako je to bežné a blokujú vykreslenie samotnej stránky.
• Optimalizujte aj súbory obsahujúce štylovanie stránok ( súbory s príponou css). Zbavte sa nepotrebných štýlov, ktoré nevyužívate nikde na webe. Nenačítavajte zbytočne vela fontových sád a ich variantov. Na stránke nepotrebujete mať 5 rôznych typov písma. Môže sa vám takáto stránka vizuálne páčiť, ale skončíte pri tom, že sa bude páčiť len vám, keďže ju nikto nebude navštevovať a mať možnosť dozvedieť sa informácie, ktoré chcete svojou stránkou ukázať návštevníkom.

6. Používanie Šablón

Pomerne častým problémom je takisto používanie predpripravených šablón. Pred výberom šablóny si otestujte, ako rýchla je daná šablóna. Stáva sa, že po vytvorení svojho webu zistíte, že využívate len 30 percent elementov z danej šablóny, avšak načítavate štýlovanie a skripty aj pre elementy, ktoré nevyužívate.

Ďalšie tipy na optimalizáciu štýlov:

• Niektoré zo štýlov využívate na každej stránke webu a niektoré len na konkrétnej stránke. Preto tie, ktoré využívate na každej stránke, dajte do jedného súboru, ktorý budete načítavať všade a štýly pre konkrétne stránky do iného súboru, ktorý budete načítavať podľa potreby.
• Ak ste už však použili šablónu využívajúcu túto knižnicu, zvážte či nie je lepšie načítať knižnicu z CDN siete, kedy je veľká pravdepodobnosť, že návštevník už bol na inej stránke, ktorá využíva tú istú knižnicu z tej istej adresy a tým pádom ju už má načítanú v prehliadači. Aj to ma však svoju nevýhodu, keďže vy nie ste “pánom” tohto súboru a môže sa stať, že bude časom premiestnený či zmazaný a tým sa Vaša stránka znefunkční.

7. LiteSpeed Cache Plugin

LiteSpeed Cache je plugin pre CMS WordPress, ktorý slúži na zrýchlenie webstránky a to až desaťnásobne. Komunikuje priamo s OpenLiteSpeed serverom a jeho cache pamäťou. Tento plugin má množstvo funkcií a zvládne toho naozaj veľa:

• Cachovanie stránok, aj REST api
• Objektové cachovanie - Redis
• Browser cachovanie
• Pridanie hlavičiek control-cache pre asset
• Napojenie na CDN
• Optimalizácia obrázkov
• Vytváranie WebP formátov obrázkov
• Minifikovanie HTML / CSS / JS
• Kombinovanie CSS / JS
• Generovanie tzv. Critical css
• Lazy Loading obrázkov / iframes
• Asynchrónne načítavanie CSS
• Odloženie načítania JS
• Optimalizácia databáz
• Podpora HTTP/2 a HTTP/3
• Prednačítavanie DNS
• Podpora Woocommerce
• Podpora WP CLI
• A ďalšie, ktoré nájdete na oficiálnej webstránke WordPressu.

LiteSpeed Cache plugin je ako vyšitý pre OpenLiteSpeed webserver, ale je kompatibilný aj s inými druhmi webserverov ako je napríklad Apache a NGINX. Najlepšie výsledky s ním však dosiahnete v súčinnosti s naším OpenLiteSpeed webserverom. Takisto je kompatibilný aj s väčšinou WordPress tém a pluginov.

Ako nainštalujem LiteSpeed Cache plugin?

Tento plugin si môžete nainštalovať viacerými spôsobmi. Najrýchlejší a najjednoduchší z nich je nainštalovať si ho súčasne s WordPressom cez nás WebAdmin.

1. Prihláste sa do WebAdminu.
2. Na nástenke, alebo v ľavej časti v menu vyberte doménu.
3. Kliknite na ikonu „Inštalácia aplikácií“.
4. Kliknite na ikonu „Inštalovať WordPress“.
5. Vo výbere pluginov zakliknite možnosť inštalovať LiteSpeed Cache.
6. Už len stačí kliknúť na tlačidlo inštalovať a počkať pár minút, kým prebehne inštalácia.

Alebo môžete postupovať nasledovne:

1. Do vyhľadávania kľúčových slov napíšte „LiteSpeed Cache“.
2. Pri plugine LiteSpeed Cache (od LiteSpeed technologies) kliknite na tlačidlo „Nainštalovať“.
3. Nezabudnite si po inštalácii plugin aktivovať.

Ako zistím v Google Chrome či plugin funguje?

1. Otvorte si Vašu webstránku v incognito okne prehliadača Google Chrome. Je to preto, lebo webstránka môže byť zacachovaná a zmeny sa nemusia prejaviť v prehliadači, v ktorom máte Vašu webstránku otvorenú.
2. Na frontende Vašej webstránky kliknite pravým tlačidlom myši a z ponuky možností vyberte „preskúmať“.
3. Kliknite na „Network“.
4. Stlačte kombináciu tlačidiel na klávesnici „Ctrl+R“ (alebo akýmkoľvek iným spôsobom znovu načítajte webstránku).
5. V zozname, ktorý sa Vám objaví kliknite na prvú možnosť.
6. Kliknite na „Headers“.
7. Ak máte v časti „Response Headers“ vypísaný „x-litespeed-cache: hit“, môžete byť spokojný, plugin funguje ako má.

Ako zistím vo Firefoxe či plugin funguje?

1. Takisto ako v Google chrome si otvorte súkromné okno vo Firefoxe.
2. Na frontende Vašej webstránky kliknite pravým tlačidlom myši a z ponuky možností vyberte „preskúmať prvok“.
3. Kliknite na „Sieť“.
4. V zozname, ktorý sa Vám objaví kliknite na prvú možnosť.
5. Kliknite na „Hlavičky“, kde musí byť vypísané „x-litespeed-cache: hit“.

Ak by tam chýbal „x-litespeed-cache: hit“, to by znamenalo, že plugin necachuje Vašu webstránku. Problém môže byť v nekompatibilite LiteSpeed Cache pluginu s niektorým iným pluginom, ktoré máte nainštalované a aktivované.

Optimalizácia pre Mobilné Zariadenia

Je nepotrebné načítavať obrázok so šírkou 600 pixelov pre zariadenia so šírkou menšou ako 600 pixlov. Urobte si kópie obrázka v menšom rozlíšení a následne definujte, ktorá verzia obrázka sa kedy má načítať. Niektoré CMS disponujú nástrojom, ktorý to za vás vykoná.

Záver

Optimalizácia webovej stránky pre rýchlosť je kontinuálny proces, ktorý si vyžaduje pravidelné monitorovanie a úpravy. Použitím vyššie uvedených techník a nástrojov môžete výrazne zlepšiť výkon svojej WordPress stránky a zabezpečiť tak lepšiu používateľskú skúsenosť a vyššie hodnotenie vo vyhľadávačoch.

Tabuľka: Prehľad Optimalizačných Techník

tags: #wordpress #ikona #pri #nacitavani #stranky