Ako zrýchliť web? 3 tipy pre každú webstránku v roku 2021
Z času na čas si každý, kto vlastní web stránku alebo e-shop uvedomí, že daný web sa pomaly načítava. Môže sa to stať pri prehliadaní na mobile, na wifi vo vlaku alebo napr. pri denno-dennom prehliadaní.
Tento problém je niekedy spôsobený pomalým web hostingom, čo sa však v roku 2021 stáva v minimálnych prípadoch. Vina je s väčšou pravdepodobnosťou niekde priamo v kóde stránky a nastala pri jej vytváraní.
V tomto článku Vám prinášam 3 jednoduché tipy, ktoré zaručene zrýchlia Vašu webstránku.
JS/CSS/IMG browser cache
Každá webstránka sa z niečoho skladá. S určitosťou sa dá povedať o HTML kóde, obrázkoch a externých zdrojoch (css súbory, javascripty). Pri navštívení webstránky cez prehliadač, prehliadač musí všetky tieto zdroje najskôr stiahnuť a následne Vám ich zobrazí ako web stránku.
Z dôvodu, že je dané zdroje potrebné stiahnuť, tak čas sťahovania bude najviac závisieť na rýchlosti Vášho internetového pripojenia.
Problém pomalej webstránky môze byť teda spôsobený:
- pomalým internetovým pripojením
- veľkým množstvom zdrojov, ktoré musí prehliadač stiahnuť.
Za predpokladu, ak už aj strpíte pomalé načítanie web stránky, po kliku na ďaľší odkaz Váš prehliadač musí všetky zdroje stiahnuť znova a tento proces sa opakuje, dokým prehliadate daný web.
Všetky dostupné prehliadače webu v súčasnosti však obsahujú funkcionalitu, ktorá zabezpečí, že pri prehliadaní webu sa všetky zdroje stiahnu len raz a pri ďalšom prehliadaní sa nebudú načítavať z internetu, ale z medzipamäte Vášho prehliadača, čím sa výrazne zrýchli načítavanie Vašej web stránky.
Pozrime sa na príklad nižšie. Na ľavej strane je zobrazená analýza načítania stránky pred optimalizáciou. Štatistiky sú až zarážajúce:
- počet zdrojov: 38 (obrázky, css subory, js súbory)
- veľkosť všetkých zdrojov na stránke: 18MB
- načítanie po: 48 sekúnd
Na pravej strane je však rovnaká stránka po riadne nastavenej optimalizácii, pozrime sa na čísla:
- počet zdrojov: 38 (obrázky, css subory, js súbory)
- veľkosť všetkých zdrojov na stránke: 1.1MB
- načítanie po: 2 sekundy

Ako nastaviť optimalizáciu
Nastavenie optimalizáce sa bude líšiť na základe toho, na akom webhostingu Vám beží webstránka a aj na základe toho, aký webserver webhosting používa.
Návod pre Apache2 webserver
Ak Vaša webstránka beží na webserveri s názvom Apache2, je potrebné nastaviť cache http hlavičku v súbore .htaccess
.
Ako príklad môžete použit nasledujúci kód, ktorý nastaví web cache zdrojov na 1 rok.
<IfModule mod_headers.c> <FilesMatch ".ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|woff|svg$"> Header set Cache-Control "public, max-age=31536000, immutable" </FilesMatch> </IfModule>
Viac o direktíve Cache-Control v špecializovanom článku Cache-Control – HTTP | MDN.
Návod pre nginx webserver
Webserver nginx sa líši od webservera Apache2 tým, že je potrebné nastaviť http hlavičky priamo v konfigurácii webservera.
Ako príklad môžete nastaviť nasledujúci kód, ktorý nastaví http cache pre zdroje webservera nginx:
server { location ~* \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|woff|svg)$ { add_header Cache-Control "public, max-age=31536000, immutable"; } }
Viac o direktíve add_header v špecializovanom článku Module ngx_http_headers_module.
Kompresia obrazkov
Lazy loading obrazkov
Bonusove tipy
- responzivne obrazky
- asynchronne nacitavanie skriptov
- minifikacia html, css, js kodu
- rychlejsi webhosting
- prisposobena mobilna verzia
- www + https presmerovanie
- Skripty nakoniec kodu
- odobratie nepouzivaneho kodu
Poďakovanie:
- prezentačný obrázok: mohamed Hassan from Pixabay