Nekonečné načítavanie webstránky: Čo s tým?
Website

Nekonečné načítavanie webstránky: Čo s tým?

Patrik Furmánek
08. 02. 2019
4097 pozretí
Website
Patrik Furmánek
4097 pozretí
08. 02. 2019

Nekonečné načítavanie webstránky: Čo s tým?

Rýchlosť môže váš web pozdvihnúť, ale takisto položiť „na kolená”. Ovplyvňuje návštevnosť, konverzie, predaj aj celkovú reputáciu, a to obzvlášť v dnešnej dobe, v ktorej rozhodujú doslova sekundy. Preto ak máte pocit, že rýchlosť načítania vašej webstránky nie je úplne ideálna, určite čítajte ďalej.
 

pomale nacitavanie webu

Prečo záleží na rýchlosti stránky?

Štúdie hovoria jasne:
 

  • Až 47 % ľudí očakáva, že sa web načíta za menej ako dve sekundy

  • a 40 % ľudí opustí stránku, ak sa nenačíta za menej ako tri sekundy.

Ak teda chcete mať úspešný web, rýchlosť by mala byť jednou z vašich hlavných priorít.

Navyše, rýchlosť webu je mimoriadne dôležitá aj pre účely SEO. Ak sa totiž web načíta rýchlejšie, aj jeho hodnotenie vo vyhľadávačoch bude vyššie. Spoločnosť Google totiž uprednostňuje rýchle weby a odmeňuje ich takýmto spôsobom.

Ďalším faktorom v algoritme hodnotenia Google je UX, čiže používateľský zážitok. Prirodzene, zvýšením rýchlosti výrazne zlepšíte aj UX a s ním priamo úmerne aj SEO ranking.

Takže toľko stručné argumenty na začiatok.

Čo však robiť, ak je vaša webstránka pomalá? Priblížim vám pár jednoduchých, no dôležitých spôsobov, pomocou ktorých dokážete web zefektívniť.

Spôsoby, ako zrýchliť webstránku


Minimalizovanie HTTP requestov

Keď používateľ navštívi webovú stránku, požaduje určité súbory. Webový prehliadač si teda vyžiada tieto súbory zo servera pomocou HTTP protokolu. Medzi najčastejšie paria HTML, CSS a JavaScript súbory.

Ak ich máte príliš veľa, prehliadač bude posielať také isté množstvo požiadaviek na server, čo v konečnom dôsledku vedie k výraznému spomaleniu stránky.

Preto je dobré snažiť sa dosiahnuť čo najmenší počet HTTP requestov. Existuje niekoľko vynikajúcich spôsobov, ako to urobiť:
 

  • Skombinovať súbory toho istého typu do jedného, či už ide o CSS alebo JS

  • Zakaždým (pokiaľ je to možné) používať CSS namiesto obrázkov

  • Zredukovať elementy na webstránke

  • Zredukovať počet presmerovaní, ktoré vytvárajú vždy len ďalšie a ďalšie HTTP requesty

minimalizovanie HTTP requestov


Aktivovanie Gzip kompresie

Ak ste niekedy komprimovali súbory na vašom počítači, musíte vedieť, ako veľmi táto metóda dokáže zredukovať veľkosť súboru. Gzip kompresia funguje úplne rovnako.

Je to najefektívnejšia metóda kompresie, ktorá môže výrazne minimalizovať HTTP requesty a skrátiť čas odozvy, niekedy až o 70 %.

Ak povolíte kompresiu, súbory vašej webstránky sa budú automaticky komprimovať do formátu ZIP. To výrazne zníži ich veľkosť a zvýši rýchlosť stránky.
 

aktivovanie Gzip kompresie


Minifikovanie JavaScript a CSS súborov

Minifikovaním JS a CSS súborov taktiež docielime zrýchlenie webstránky. Nehovoríme tu teraz síce o tom, že orežeme loading speed na polovicu, ale určite to trochu pomôže.

Termín „minify“ je programovací výraz pre proces odstraňovania nepotrebných znakov v zdrojovom kóde. Tieto znaky zahŕňajú medzery, línie, komentáre a oddeľovače blokov, ktoré sú pre nás veľmi podstatné, ale pre počítač nehrajú žiadnu rolu.
 

minifikovanie Javascript a CSS suborov


Optimalizácia obrázkov

Príliš veľké obrázky dokážu výrazne spomaliť web, niekedy sa bavíme rádovo v sekundách. Preto zakaždým zvážte, aký obrázok použijete na váš web a či nie je potrebná jeho optimalizácia.

V dnešnej dobe existuje mnoho online alebo offline programov na komprimáciu obrázkov. Z najznámejších napríklad JPEGmini.

Obdobne to platí aj pre SVG obrázky. SVG obrázky sú super a určite ich treba používať na stránkach, pretože dokážu uľahčiť a vylepšiť mnoho vecí. Na druhú stranu vedia spraviť poriadnu šarapatu pri načítavaní. Obzvlášť, ak sa použijú nesprávne alebo ich je jednoducho príliš veľa.

SVG formát je v podstate iba zoskupenie kriviek so súradnicami začiatku, konca a ich farieb. Prehliadač postupne číta tieto súradnice a snaží sa krivku za krivkou postupne vykresliť. Preto ak je SVG príliš zložitý, prehliadaču zožerie veľa času, pokým prečíta každú jednu krivku a vykreslí ju.

Za spomenutie určite stoja takzvané „CSS sprites“. Sprite je jeden súbor, ktorý obsahuje všetky obrázky. Po vytvorení takéhoto spritu vieme pomocou CSS a cez súradnice získať presnú oblasť, ktorá sa má práve použiť. Preto môžu byť všetky obrázky uložené na jednom mieste.

Tým výrazne ovplyvníme načítanie webu, keďže takto vzniká len jeden HTTP request namiesto XY ďalších.
 

optimalizacia obrazkov


Zredukovanie externých skriptov

Externé skripty, ktoré ste pridali na stránku, vytvárajú HTTP request zakaždým, keď sa stránka načítava. A ako už viete, takéto niečo spomaľuje stránku.

Nevravím, že by ste sa mali úplne vyhnúť používaniu takýchto skriptov. Je však potrebné ich používať s rozumom.
 

zredukovanie externych skriptov

Ak vložíte externý skript zo stránky, ktorá je pomalá, bude tým negatívne ovplyvnená aj vaša rýchlosť.

Preto keď chcete zlepšiť čas načítania vašej stránky, uistite sa, že máte externé zdroje iba z rýchlych a spoľahlivých stránok.

Viac krokov, rýchlejší web

Určite existuje viacero možností zrýchlenia webstránok, no vyššie uvedené považujem za tie najefektívnejšie. A hoci vám každý zo spomenutých krokov pomôže zrýchliť web iba čiastočne, ak ich skombinujete všetky, rýchlosť vašej webstránky sa zvýši výrazným spôsobom. :)

Patrik Furmánek Popri štúdiu aplikovanej informatiky pracujem v Marketingeri ako front-end developer. Vo voľnom čase sa venujem aj odvrátenej strane webových aplikácií, ktorou je back-end. Rád cestujem s cieľom získavania nových skúseností, či už v osobnej alebo profesijnej oblasti, a počas dlhých večerov nepohrdnem dobrým seriálom alebo filmom.

Mohlo by vás zaujímať