Vytvorili ste nedávno web pre seba alebo niekoho iného? Tak to by ste určite mali vedieť, že ideálne by sa mal načítať do 2 sekúnd.
Máte blog? Určite sa vašim čitateľom nechce čakať neúmerne veľa sekúnd, kým sa článok načíta. Vám by sa tiež určite nechcelo.
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%. Na mobiloch dokonca až 74% ľudí odchádza, ak sa stránka nenačíta do 5 sekúnd.
Nezáleží teda na tom, akému účelu má slúžiť web, rýchlosť načítania stránky je kľúčová v každom prípade. Pomalá stránka znamená menej návštev, menej konverzií, menej nákupov a menšiu spokojnosť.
Ako si otestovať rýchlosť stránky?
Existuje niekoľko skvelých nástrojov, ako si zmerať rýchlosť načítania. Odporúčam GTmetrix alebo Webpagetest. A do tretice je najlepšie odstopovať si načítanie manuálne. Stačí zobrať stopky na mobile a zmerať čas.
Užitočný nástroj je aj Page Speed Insights od Googlu. Síce vám neukáže rýchlosť načítania stránky, ale odhalí vám niektoré z nedostatkov, o ktorých bude reč v tomto článku.
Pre rýchlosť načítania na mobiloch odporúčam nástroj Testmysite.
Za koľko by sa vám stránka mala načítať?
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. Nikto sa nebude sťažovať, že sa vám web načíta príliš rýchlo.
4 faktory ovplyvňujúce rýchlosť načítania WordPress stránky
- Rýchlosť pripojenia na internet – neovplyvníte na strane návštevníka
- Internetový prehliadač – neovplyvníte na strane návštevníka
- Webhosting
- WordPress šablóna a nastavenia
Poďme sa na ne pozrieť trochu detailnejšie.
Rýchlosť pripojenia na internete
Pochopiteľne, čím pomalší internet, tým pomalšie sa bude web stránka načítať.
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ť.
Tak či tak, ani nie je vo vašich možnostiach ovplyvniť rýchlosť internetového pripojenia ľudí, ktorí prídu na váš web.
Internetový prehliadač
Ďalším faktorom je samotný 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.
Nanešťastie, nemáte ako ovplyvniť to, aký prehliadač ľudia používajú alebo či používajú staršiu neaktuálnu a potenciálne aj pomalšiu verziu z toho dôvodu, že starší prehliadač nemusí vedieť načítať niektoré časti webu alebo kódu.
Webhosting a jeho vplyv na rýchlosť načítania stránky
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. Samozrejme platí, že čím výkonnejší server, tým rýchlejšie sa vám stránka načíta.
Výkon servera ovplyvňujú:
- 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. Ak sú rozdelené na viacerých serveroch, načítanie môže byť pomalšie, ak to nie je dobre nastavené.
Na čo si dať pozor pri výbere hostingu
Pochopiteľne, asi každý hostingový poskytovateľ vám povie, že jeho riešenie je super rýchle, lebo má SSD disky, alebo je jeho zdieľaný hosting optimalizovaný (nech to už znamená čokoľvek).
Lenže server určený na zdieľaný hosting pri optimálnom fungovaní a za ideálnych podmienok zvládne niekoľko sto bežných web stránok. Ak ich už je 1000 a viac, server môžu vyťažovať “susedské” stránky a tým pádom vás spomaliť.
Iný príklad: u jedného silného hráča, ktorý sa hrdí rýchlym hostingom nielen pre WordPress stránky, mám dva WordPress weby. Jedna má rýchlosť odozvy servera podľa nástroja Pagespeed Insights 0,53 sekúnd, čo by mohlo byť aj rýchlejšie, ale dá sa povedať, že je to v poriadku. Lenže druhý web mal odozvu servera 2 sekundy. Len pre vysvetlenie, odozva servera neznamená načítanie celej stránky, iba čas odkedy server začal odosielať súbory stránky. Až keď som urobil niekoľko zmien v nastaveniach, tak sa mi podarilo znížiť celkový čas načítania na 1,6 sekundy.
Čo to znamená? Majú nekvalitný hosting? To určite nie. Spokojný som, ale naučilo ma to neveriť tvrdeniam o rýchlom hostingu. Jednoducho, kým to neotestujete naostro, neurobíte nejaké úpravy v nastaveniach svojho WordPressu, o ktorých si povieme viac už za chvíľu, web vám rýchlejšie nepobeží. Hostingová firma za vás tie zmeny neurobí, dokonca ani tie úpravy nie sú vždy sto percentnou zárukou rýchleho webu na danom hostingu.
Ten istý web s tými istými nastaveniami môže niekde fungovať rýchlejšie, niekde o niečo pomalšie. Preto kým nespustíte web naostro, v skutočnosti nemáte istotu.
Ako zrýchliť načítanie WordPressu
Pravidelné aktualizácie
Nemám nimi na mysli len aktualizácie WordPressu ako takého, ale aj technologického pozadia hostingu. Väčšinu by mal za vás urobiť poskytovateľ hostingu, ale niektoré veci si často môžete nastaviť aj sami v administračnom rozhraní svojho hostingu. Jedna z nich by mala byť aj aktualizácia na PHP 7, ak ste tak ešte neurobili.
Ak by ste nevedeli, PHP je skriptovací jazyk na tvorbu dynamických a interaktívnych web stránok. A áno, je na ňom postavený aj WordPress.
A prečo by ste mali svoje PHP aktualizovať aspoň na verziu 7? Pretože môžete zaznamenať značné zrýchlenie svojej stránky. Niekoľko porovnaní v rýchlosti so staršou verziou nájdete tu, tu a tu.
Dajte si však pozor na to, aby vaša šablóna bola plne kompatibilná s novou verziou PHP, inak možno budete mať problém v zobrazení niektorých prvkov na webe, prípadne celého webu.
Vyberte si WordPress šablónu optimalizovanú pre rýchlosť
Výber WordPress šablóny je jedným z 3 krokov pri tvorbe WordPress stránky.
Lenže vo všeobecnosti platí, že čím viac kódu bude na stránke, o to dlhšie sa bude stránka načítavať. To isté platí pri nekorektne nakódovaných šablónach.
Možností na výber šablón máte veľmi veľa aj na oficiálnej stránke WordPressu. Keďže sú zadarmo, nemusia byť pravidelne aktualizované, alebo vhodne nakódované. Toto riešenie je najlepšie vtedy, keď s webmi alebo blogovaním iba začínate. Aby ste však mali väčšiu istotu, je lepšie investovať do platenej šablóny.
Osobne mám skúsenosti s Divi (na nej sa mi podarilo znížiť rýchlosť načítania na spomínaných 1,6 sekundy z pôvodných 4 sekúnd) a Optimizepress, ktoré sú skvelo naprogramované, pravidelne aktualizované a dosť rýchle.
Určite takto viete nájsť aj ďalšie, no uistite sa, že programátori mysleli aj na rýchlosť – nielen na desktopoch ale aj na mobilných zariadeniach.
Odstráňte zbytočné sledovacie kódy
Ako ste sa už dočítali v bode vyššie, čím viac kódu na stránke máte, tým pomalšie sa bude načítavať. Problém v tomto ohľade môžu robiť aj rôzne marketingové sledovacie kódy ako Facebook pixel, nástroje na sledovanie správania na webe ako Hotjar, Smartlook a podobne.
Ak ich nevyužívate, odstráňte ich úplne alebo vyskúšajte ich implementáciu do stránky prostredníctvom Google Tag managera, cez ktorý viete spravovať rôzne kódy bez nutnosti vkladať ich na web. Takto vymeníte viac kódov za jeden.
Používajte WordPress pluginy s rozumom
WordPress pluginy sú užitočná vec. Ak chcete nejakú funkcionalitu, ktorá vám chýba na stránke, ľahko nájdete potrebný plugin, či už zdarma alebo nejaký platený.
Lenže čím viac ich máte na stránke, tým pomalšie sa vám môže načítať. Navyše, ak je zle naprogramovaný, môže web stránku ešte viac spomaľovať. Základné pravidlo teda je čím menej pluginov, tým lepšie.
Vyčistite si databázu
Databáza vášho webu sa postupne môže zaplniť zbytočnými dátami. Z toho dôvodu je užitočné z času na čas databázu prečistiť, napríklad od revízií stránok, ktoré nepotrebujete. V prečistení vám pomôže napríklad plugin WP-Optimize alebo WP-Sweep. Manuálne viete nastaviť aj maximálny počet revízií cez wp-config.php.
Odstráňte prvky, ktoré sa dlho načítavajú
Medzi obľúbené prvky na stránkach patria napríklad slidery. Síce sú pekné, ale úplne zbytočné pre väčšinu webov, zhoršujú konverzie, ľudia na ne nelikajú a ak áno, tak vo väčšine prípadov len na prvý slide.
A to najhoršie – dosť spomaľujú načítanie vašej stránky. Mnoho silderov sa načíta až za 2 sekundy.
Zdroj: https://soliloquywp.com/wordpress-slider-slow-to-load-heres-why-and-how-to-fix-it/
Keď si zoberiete, že ideálne by sa mala celá vaša stránka načítať do 2 sekúnd a vám sa za ten čas načíta iba slider, tak to je dosť mizerný výkon. Najlepšie preto urobíte, ak slider vymeníte za rýchlejší element, ktorý splní rovnaký účel. Alebo keď už na ňom trváte, nájdite si nejaký, ktorý sa načíta rýchlejšie.
Znížte počet požiadaviek na server
Vyhľadaním domény stránky do prehliadača alebo kliknutím na odkaz smerujúci na stránku pošlete požiadavku na server, kde je daná stránka umiestnená. Lenže táto požiadavka nie je v skutočnosti jedna. Je ich niekoľko – od súborov, ce po rôzne skripty.
Ako ste už uhádli, čím viac požiadaviek, tým pomalšie načítanie. Čo teda robiť, aby ste znížili ich počet?
- Ukážte pri preklikoch na články len prvých pár viet
- Rozdeľte článok na viac stránok (návod ako na to)
- Znížte počet zobrazených článkov na stránke, napríklad na 5
- Deaktivujte pluginy, ktoré nepotrebujete
- Znížte počet obrázkov/videí na stránke
- Využite tzv. lazy loading, to znamená že prvky ako obrázky či videá sa načítajú až keď sa užívateľ doscrolluje na stránke k danému prvku, pomocou tohto alebo tohto pluginu.
Optimalizujte (skomprimujte) obrázky
Oproti bežnému kódu, ktorý je v textovej podobe, zaberajú obrázky oveľa viac miesta. Preto je dôležité mať obrázky, ktoré zaberajú čo najmenej dát pri zachovaní ich kvality.
Znížiť ich veľkosť pred nahratím do WordPressu môžete cez stránku Tinypng.com. Ešte rýchlejším riešením je plugin WP Smush alebo EWWW Image Optimization, ktoré vedia automaticky zmenšiť obrázky pri ich nahratí do WordPressu.
Embedujte videá
WordPress bez problémov zvládne prehrať videá, ktoré doňho nahráte, ale oveľa lepšie je video nahrať napríklad na YouTube a cez funkciu embed ho vložiť na vašu stránku. Prečo? Pretože Video súbory bývajú spravidla väčšie a ich načítavanie zo servera by spomalilo aj načítanie stránky.
Využite caching
Cache je rýchla vyrovnávacia pamäť, ktorá slúži na dočasné uloženie súborov alebo dát, takže budúce požiadavky na tieto dáta sa zrealizujú rýchlejšie.
Aby sme komplikované urobili jednoduchým, stačí vám využiť cacheovacie pluginy ako WP Super Cache alebo W3 Total Cache (odporúčam).
S W3 Total Cache a komprimáciou 3 obrázkov sa mi na jednom svojom webe podarilo znížiť rýchlosť načítania z pôvodných 4 sekúnd na 1,6 sekundy.
Znemožnite hotlinkovanie
Multimediálny obsah ako obrázky či videá na vašej stránke môžete zobraziť dvoma základnými spôsobmi. Buď ich nahráte priamo do svojho WordPressu alebo na ne odkážete cez url adresu, čím odošlete požiadavku na načítanie z iného serveru.
Čiže ak nahráte obrázok priamo na váš WordPress hosting, váš html kód bude vyzerať asi takto:
<img src=“nazovobrazka.jpg“>
Ak by ste zobrazovali obrázok z iného webu, html kód by vyzeral nasledovne:
<img src=“https://domena.koncovka/nazovcudziehoobrazka.jpg“>
Ak by ste takto zobrazovali multimediálne súbory z iných stránok vy, až taký problém to nie je, pokiaľ nie sú autorsky chránené. Lenže ak by takto zobrazovali iné weby vaše súbory, už by to problém byť mohol, pretože by vám iné weby posielali požiadavky na váš server. Inak povedané, vyťažovali by ho a teda aj spomaľovali.
Na toto je dôležité myslieť pri väčších portáloch/weboch, ktoré pracujú s množstvom obrázkov alebo videí. Znemožniť hotlinkovanie môžete pridaním nasledovného kódu do súboru .htaccess:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)://(www\.)vasadomena.koncovka/.*$ [NC]
RewriteRule \.(gif|jpg|jpeg|bmp|zip|rar|mp3|flv|swf|xml|php|png|css|pdf)$ – [F]
V predposlednom riadku stačí zadať vašu doménu a v poslednom riadku si tiež môžete zvoliť typ súborov, pre ktoré chcete hotlinkovanie zakázať.
Minifikácia kódu, Gzip kompresia
Ak sa pozriete na zdrojový kód nejakého WordPress webu (stlačením tlačítka ctrl + u v prehliadači Chrome), uvidíte veľký zhluk kódov html, css či javascriptu.
Minifikácia/Gzip kompresia znamená, že to, čo vidíte, môže byť menšie a teda zaberať menej priestoru. Inými slovami, odzrkadlí sa to na rýchlejšom načítaní vašej stránky.
Funguje to na jednoduchom princípe. Predstavte si, že na stránke je kód v tvare AA BBB CCC DDDDD. Zjednodušene by to mohlo byť aj 2A 3B 3C 5D. Pôvodných štrnásť znakov sa takto dá minifikovať na osem.
Takto viete zobrať kód vašej stránky a na podobnom princípe ho zmenšiť o desiatky percent.
Ako to urobiť? Dá sa to pomocou vyššie spomenutých pluginov WP Super Cache, W3 Total Cache, ďalej pluginom Autooptimize alebo v najlepšom prípade je minifikácia kódu a Gzip kompresia súčasťou vašej WordPress šablóny.
Pri výbere programátora dbajte na to, aby poznal osvedčené postupy
Ak by ste si chceli dať naprogramovať WordPress šablónu podľa vašich konkrétnych požiadaviek, uistite sa, že vyššie spomenuté odporúčania nie sú pre programátora neznáme pojmy a dobre sa v nich orientuje. Mať pekný web so zlým kódom by pre vás nebola žiadna výhra.
Tiež by mal ovládať minifikovanie všetkých PHP požiadaviek a prístupov na databázu.
V praxi by zbytočné PHP požiadavky vyzerali takto:
<title><?php bloginfo(‚name‘); ?> <?php bloginfo(‚description‘);?></title>
<link rel=“shorcut icon“ type=“image/x-ico“ href=“<?php bloginfo(‚template_url‘); ?>/favicon.jpg“ />
<link rel=“stylesheet“ type=“text/css“ media=“screen“ href=“<?php bloginfo(‚stylesheet_url‘); ?>„/>
<link rel=“stylesheet“ type=“text/css“ media=“print“ href=“<?php bloginfo(‚template_url‘); ?>/print.css“ />
<link rel=“alternate“ type=“application/rss+xml“ title=“RSS .92″ href=“<?php bloginfo(‚rss_url‘); ?>“ />
Namiesto toho by mali byť zmenené na bežné textové html zápisy, čo by mohlo vyzerať nejako takto:
<title>Názov vašej WordPress stránky</title>
<link rel=“shorcut icon“ type=“image/x-ico“ href=“http://nazovvasejdomeny.sk/wp-content/themes/sablona/favicon.jpg“ />
<link rel=“stylesheet“ type=“text/css“ media=“screen“ href=“http://nazovvasejdomeny.sk/wp-content/themes/sablona/style.css“/>
<link rel=“stylesheet“ type=“text/css“ media=“print“ href=“http://nazovvasejdomeny.sk/wp-content/themes/sablona/print.css“ />
<link rel=“alternate“ type=“application/rss+xml“ title=“RSS .92″ href=“nazovvasejdomeny.sk/feed/rss/“ />
Slovo na záver
Ak ste dočítali až sem, gratulujem, pretože toho bolo fakt veľa. Ale zato ste teraz oveľa lepšie pripravený k zrýchleniu načítania stránky než väčšina ľudí, čo má WordPress web.
Samozrejme nemusíte využiť všetky postupy, ktoré tu boli spomenuté. Začnite hlavne s tým, čo je vo vašich silách. Určite neprehliadnite optimalizáciu obrázkov, keďže tam sa dá najčastejšie ušetriť veľa priestoru.
Prípadne, ak poznáte ešte ďalšie spôsoby, ako zrýchliť rýchlosť načítania stránky, podeľte sa o ne v komentároch.
Miroslav Beňo
Latest posts by Miroslav Beňo (see all)
- Ako maximálne zvýšiť rýchlosť načítania vašej WordPress stránky - 25. júla 2018
- Ako si založiť vlastný blog cez WordPress aj keď ste doteraz nikdy neprogramovali - 26. marca 2018
- Ako zvýšiť návštevnosť webstránky s optimalizáciou pre Google - 27. februára 2017
- 10 WordPress pluginov na jednoduché zdieľanie vášho obsahu - 21. augusta 2016