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