Máte pomalý web a eshop? Tu sú dôvody + Návod, ako to napraviť

Kladiete si otázku, prečo má vaša webstránka (eshop) pomalú rýchlosť? Pravdepodobne budú za tým tieto 3 najčastejšie dôvody pomalého načítavania stránky.

Ak máte iba pocit, že vaše stránky sú pomalé, môžete si to overiť aj pomocou online nástrojov. Ktoré sú to? Odpoveď nájdete v článku: Ako odmerať rýchlosť webstránky a eshopu? Zoznam nástrojov + vysvetlenie metrík

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ť.

Poďme si ich rozobrať krok po kroku.

1. dôvod: Obrázky

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í.

Ako príklad z praxe uvediem stránku, ktorá obsahovala stovky obrázkov a zákazník vyžadoval, aby všetko bolo na jednej stránke. Vytvorením skriptu, alebo použitím už vytvorených skriptov (hľadajte pod kľúčovým slovom lazy load), som načítal všetky obrázky z jedného obrázka animácie nahrávania pre pocit, že sa niečo deje. Skript si po spustení zistí, ktoré obrázky sú viditeľné na obrazovke návštevníka a načíta len tie. Ako návštevník skroluje po stránke, načítavajú sa ďalšie a ďalšie obrázky. Táto technika sa dá ešte vylepšiť pre pocit, že obrázky sú už načítané a je pravdepodobnosť, že návštevník sa k nim doskroluje v blízkej budúcnosti a to tým, že budete dopredu načítavať aj obrázky, ktoré nie sú viditeľné (ale nie všetky).

• 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. dôvod: Načítavanie súborov zo servera

Ďalším častým problémom je nesprávne alebo vôbec nenakonfigurované časy, po ktoré sa jednotlivé typy súborov nebudú znova načítavať zo servera, ale načítajú sa zo zariadenia návštevníka, ak už na stránke bol v minulosti. 

Týmto nastavením poviete prehliadaču, po aký čas od prvého načítania súboru si tento súbor nemá vyžiadať opätovne zo servera. Tu však treba dávať pozor na zmeny vašich súborov. Ak napríklad nastavíte tento čas na 1 rok a návštevník má už daný súbor u seba v prehliadači, tak po dobu 1 roka bude využívať súbor uložený v prehliadači. Ak vy medzitým vykonáte zmeny v súbore so zachovaním mena súboru, zmeny sa u návštevníka neprejavia do doby kým neuplynie 1 rok, alebo pokiaľ si návštevník nevyčistí cache vo svojom prehliadači. 

Ď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úštajú 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.

Návštevníci nechodia na vaše stránky pre to, že sú vaše stránky pekné, chodia tam pre to, aby sa dozvedeli informácie. Samozrejme vizuál je vaša prezentácia, niečo čo upúta návštevníka, niečo čo hovorí o vašej dôveryhodnosti, a preto treba hľadať balans medzi rýchlosťou a vizuálom. Aj vizuálne krásne stránky môžu byť rýchle stránky, ale ak vám knižnica, ktorá len zrobí nejaký nepodstatný efekt spomalí prvé vykreslenie obsahu na stránke o sekundu či polsekundu, spýtajte sa sami seba, či je vám ten efekt potrebný.

3 dôvod: 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. Samozrejme využívanie šablón má svoju veľkú výhodu, a tou je cena. Ak si necháte vytvoriť stránku na mieru, programátor naštýluje len elementy, ktoré sa použijú. Vytvorí skripty, len ktoré potrebujete. Tento proces je však drahší, ale výsledný efekt o to lepší. 

Ak chcete zistiť, aké percento načítaných štýlov vlastne na niektorej stránke využívate, môžete použiť zdarma nástroje ako napríklad https://purifycss.online/, alebo použite vbudované nástroje v prehliadačoch ako Chrome, Firefox či iné. 

Tieto nástroje však nie sú 100 percentné, ale dajú vám obraz o tom, čo načítavate a čo vlastne nepotrebujete. Myslite aj na nastavenia doby, po ktorú sa po prvom načítaní súbor uloží v prehliadači a už sa nenačítava opäť, pretože nie vždy je výhodné načítať pre každú stránku súbory štýlov zvlášť.  Miniete viac peňazí a času na rozdeľovanie súborov a efekt nie je až taký viditeľný.

Neviete sa rozhodnúť, či použiť šablónu, alebo si dať vytvoriť webstránku na mieru? Možno vám pri rozhodovaní pomôže tento článok: Ako ovplyvňuje šablóna rýchlosť webu a eshopu?

Ď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.

Ako príklad môžem uviesť používanie Bootstrap knižnice štýlov. Ak máte z tejto knižnice využiť len malú, zanedbateľnú časť, nepoužívajte ju. 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í.

• Ak používate CMS ako WordPress, Typo3, Prestashop či OctoberCMS vysoké TTFB (Time To First Byte – čas do načítania prvého bajtu) môžete zredukovať použitím cache (pri WordPress je potrebné nainštalovať plugin). Táto cache pri prvej návšteve stránky a jej poskladaní systémom, si danú stránku už spojenú uloží a pri ďalšej návšteve (aj iného návštevníka) už danú stránku neskladá, ale použije už vyskladanú stránku, čím sa uštrí čas potrebný na spustenia skriptov a komunikáciu s databázou. Skontrolujte si, či máte zapnutú a správne nakonfigurovanú cache. Tu však treba dať pozor na stránkach, kde sa obsah často mení, aby sa aktuálny stav odoslal návštevníkovi a nie stav z cache pamäte.

Akú rýchlosť by mal mať váš web a eshop?

K akým číslam načítavania stránky by ste sa mali dopracovať? No asi k tým najnižším 🙂 Samozrejme myslite na to, že znižovať rýchlosť má svoje limity.

Čo vyžaduje Google a aká je reálna rýchlosť webstránok nielen na Slovensku, ale aj vo svete? Na to sa pozrieme v ďalšom pripravovanom článku.

Sledujte nás preto na sociálnych sieťach: Facebook | Instagram, alebo prihláste sa na odber noviniek.