Tipy a triky pre optimalizovanie webu

Nie je nič viac frustrujúcejšie ako mať pomalú webovú stránku, pričom pomalá rýchlosť je zlá nielen pre používateľa, ktorý sa na stránke aktuálne nachádza, ale aj pre samotné vyhľadávače z pohľadu SEO optimalizácie. Z pohľadu vyhľadávačov pomalá rýchlosť môže spôsobiť to, že webové stránky sa umiestnia vo výsledkoch vyhľadávania (SERP) nižšie ako rýchlejšia webová stránka. To znamená menej zobrazení stránky a nižšie príjmy z reklamy či konverzie na zákazníka (napríklad v prípade internetového obchodu). Pričom z pohľadu používateľa to zas môže znamenať to, že webovú stránku zavrie skôr ako sa vôbec načíta a už sa na ňu viac krát nevráti ak ho rýchlosť webovej stránky odradí. Spísal som pár rád na optimalizáciu webu, tak snáď niekomu pomôžu.

Tipy a triky pre optimalizovanie PHP  ·  Automatické premazávanie TEMPu

Optimalizácia rýchlosti webovej stránky môže byť hedonickým procesom, podobne ako beh na bežiacom páse. Stále bude priestor na zlepšovanie, takže kedy byť spokojný s rýchlosťou webovej stránky? Hodnoty nižšie sú založené na štúdiách, ktoré ukazujú, že 47% ľudí očakáva, že sa webová stránka načíta za menej ako dve sekundy, pričom 57% návštevníkov opustí stránku, ktorá sa načíta za 3 a viac sekúnd. Inde som našiel, že pokiaľ trvá načítanie webovej stránky štyri sekundy a viac, tak sa riskuje zvýšenie odchodu potenciálnych zákazníkov o 87% zo stránky. Podobne to platí aj v prípade firemných a osobných stránok, či blogov. Ak sa stránka bude pomaly načítať, tak návštevníci nebudú čakať a radšej pôjdu inam. Potenciálne tak môže dôjsť každý mesiac webová stránka o niekoľko stoviek až tisíc návštev, čo je celkom dosť v prípade menej navštevovanej stránky. Pokiaľ riešite aj SEO optimalizáciu, tak odporúčam nerobiť tieto časté chyby pri SEO optimalizácií, poprípade si prejsť túto peknú infografiku SEO optimalizácia - 200 vektorov a SEO optimalizácia - 200 faktorov.Ak sa stránka načíta pod jednu sekundu, tak sa to považuje za perfektnú rýchlosť a tak by to malo byť. Ak načítanie stránky trvá jednu až tri sekundy, tak je rýchlosť nadpriemerná. Priemerná rýchlosť je vraj tri až sedem sekúnd a nad sedem sekúnd je rýchlosť zobrazenia považovaná za veľmi zlú. Osobne už webovú stránku ktorá sa naťahuje dlhšie ako 5 sekúnd zatváram, predsa len je život veľmi krátky na to sledovať ako dlho treba čakať na zobrazenie nejakej stránky a je dosť vysoká šanca, že ak by som na danej webovej stránke klikol na inú podstránku, tak by som čakal opäť podobný čas. Čiže dvoma slovami: „strata času“...

V prvom rade je základ si zvoliť dobrý a rýchly webhosting. Tých pár korún v rozdielnych cenách webhostingových služieb nestojí za to podceniť rýchlosť a tým sa obrať skrz toho o možné konverzie. Vplyv webhostingu na rýchlosť načítania stránky patrí k faktorom, ktoré najviac ovplyvňujú rýchlosť načítania webovej stránky. V tomto prípade platí, že čím je server výkonnejší, tým sa rýchlejšie požadovaná stránka načíta. Samozrejme platí aj to, že cena takého webhostingu bude odlišná od takého, ktorý je vhodnejší skôr na osobnú prezentáciu ako na nejakú náročnejšiu aplikáciu akou je napríklad eshop, alebo firemná stránka napojená na nejaký systém. Pri najnáročnejších riešeniach už môže byť aj ten najvýkonnejší webhosting málo a proste treba presedlať na VPS alebo dedikovaný server, kde je zas rozhodujúcich viac faktorov na rýchlosť. Pri dedikovanom serveri sa o systémové prostriedky (RAM, CPU, ale aj HDD resp. SSD) nebude aplikácia deliť s nikým iným a všetko bude len jej. Pre menej náročnú aplikáciu môže stačiť aj VPS, kde sa o systémové prostriedky dedikovaného servera delí viac zákazníkov. Tu hrá úlohu aj trebárs samotný disk, z novších SSD diskov sa dáta načítavajú oveľa rýchlejšie ako z klasických mechanických HDD. Taktiež vplyv na rýchlosť bude mať aj umiestnenie nejakej databázy, ktorú webová stránka používa. Podstatné je či sa bude nachádzať na rovnakom stroji, alebo na inom. Ak budú rozdelené na viacerých serveroch, načítanie môže byť opäť pomalšie, ak nie sú nastavenia správne. Čiže aj tu sa môže spraviť veľa chýb pri načítaní webovej stránky v prípade zlých rozhodnutí.

Predsa len každý robí webovú stránku pre ľudí s nejakým úmyslom a žiadneho používateľa či budúceho zákazníka nenadchne tráviť čas na webe kým sa uráči samotná stránka vykresliť. Dnes sa už pomaly každý cíti byť tvorcom webových stránok, lebo ovláda trochu Photoshop, spraví čo to v HTML či CSS, siahne po „geniálnom“ Wordpresse a vuala chrlí stránku za stránkou. Ja sa ako používateľ na takú stránku dostanem a len plačem nad tým aká je pomalá, pričom na taký web by nebolo ani nutné použiť nejaký CMS (Wordpress, Joomla, Drupal a pod.), no je tam lebo je to v dnešnej dobe IN.

Optimalizácia webu nie je len o radách, ale aj o rôznych nástrojoch. Tu je pár nástrojov na zisťovanie a analýzu rýchlosti načítania webovej stránky, ktoré osobne odporúčam. Každý test ma svoje za a proti, ale asi nič lepšie na internete nie je:

Google PageSpeed Insights - Stačí zadať webovú stránku a potvrdiť. Google PageSpeed Insights po spracovaní vygeneruje skóre rýchlosti, ako aj diagnostiku a rady, ktorými zrýchliť načítanie webovej stránky.
Pingdom Website Speed Test - Pri zadávaní stránky je potrebné si vybrať oblasť, odkiaľ sa má test vykonať. Výsledky sa dajú ukladať do histórie, porovnávať novšie a staršie testy. Ak je meraná webová stránka na Slovensku, tak pri použití tohto nástroja je dobré v položke „test from“ zvoliť jednu z lokalít: Europe - United Kingdom - London alebo Europe - Germany - Frankfurt. S nimi budú najpresnejšie merania pre oblasť Slovenska.
WebPageTest - Ponúka dve odlišnosti oproti ostatným nástrojom. V prvom rade sa dá vybrať zo širokej škály miest odkiaľ sa má test vykonať a taktiež aj na rôznych prehliadačoch.
GTmetrix - Dokáže odmerať rýchlosť načítania webovej stránky, ale zároveň poskytne aj 30 konkrétnych spôsobov, ktorými je možné zlepšiť rýchlosť a výkon webovej stránky.

Kompresia webovej stránky pomocou GZIP
Použitím kompresie súborov dôjde k rýchlejšiemu načítaniu webovej stránky a taktiež k zníženiu šírky pásma. Toto by mala byť samozrejmosť na každej webovej stránke. Kompresia sa dá nastaviť cez .htaccess takto:

SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Kompresia, optimalizácia a rozmery obrázkov
Obrázky sú prvkom, ktoré výrazne spomaľujú načítanie akejkoľvek webovej stránky. Pokiaľ ich je príliš veľa a obrázky zaberajú niekoľko megabajtov, tak to môže byť celkom problém. Dobrým riešením je obrázky komprimovať a optimalizovať, čiže zmenšiť ich veľkosť. Osobne na to používam program FileOptimizer, ktorý je určený pre systém Windows. Samozrejme sú na internete aj rôzne online služby, ktoré obrázky dokážu optimalizovať a zároveň zmenšiť ich veľkosť, mne ale tento program celkom vyhovuje. Predtým, ako prehliadač dokáže zobraziť webovú stránku, tak musí zistiť ako rozložiť obsah okolo obrázkov. Bez toho, aby prehliadač vedel už dopredu z HTML kódu veľkosť obrázkov spôsobí to, že bude pracovať dlhšie a tým pádom sa aj webová stránka bude dlhšie vykresľovať. Zadanie rozmerov obrázka šetrí zdroje prehliadača a už zadané rozmery by tento krok preskočili. Čiže, pokiaľ sa ma zvýšiť rýchlosť načítania webovej stránky na ktorej je zároveň veľké množstvo obrázkov, tak je potrebné sa popasovať s ich rozmermi, pretože prehliadač musí zistiť ako je text okolo nich rozložený pred tým, ako sa webová stránka vôbec zobrazí. Je jasné, že sa tu bavím o milisekundách v prípade menšieho počtu obrázkov, ale korunka ku korunke a hneď je v peňaženke milión ako sa hovorí.

Eliminácia nefungujúcich odkazov
Prítomnosť nefungujúcich odkazov dokáže poriadne uškodiť. Takéto odkazy je nutné opraviť a neriskovať tak odchod svojich návštevníkov ku konkurencii. Nefunkčné odkazy sú jedným z najbezpečnejších spôsobov, ako prinútiť používateľa opustiť webovú stránku. Na identifikáciu nefunkčných odkazov odporúčam použiť nasledujúce nástroje na identifikáciu nie len nefungujúcich odkazov:

Google Webmaster Tools (crawl errors tab)
Screaming Frog SEO Spider

Pomocou týchto nástrojov získate kompletnú identifikáciu problémov pre správnu optimalizáciu webu. Pokiaľ dosiahnete nefunkčnosť odkazov v hodnote 0, tak ste postupovali správne a problém je vyriešený. Sám som nedávno opravoval dynamicky vytvárané odkazy podľa obsahu. Opravil som takto niekoľko desiatok tisíc nefunkčných odkazov, aj to malo určite vplyv na aktuálnu návštevnosť webu na ktorom som robil a nižšieho odchodu používateľov z webovej stránky. Tiež som pomocou Screaming Frog SEO Spider znížil aj počet rôznych presmerovaní o ktorých som ani nevedel, že sa nechcete vytvárajú. Aj keď trvalé presmerovania s hlavičkou 301 sú uprednostňované pred stránkami s chybou 404, tak nie sú ideálne. Spomaľujú čas potrebný na to aby prehliadač dosiahol správnu verziu stránky a čím viac presmerovaní, tým sa prehliadač dlhšie trápi a tým zároveň aj samotný server kde webová stránka beží. Screaming Frog SEO Spider je skvelý nástroj aj na zisťovanie trvalých presmerovaní s hlavičkou 301, ale je platený.

Embed kód pre videá
Namiesto toho, aby ste video súbor nahrali k sebe na web, tak ho radšej vložte napríklad na YouTube a následne video vložte na webovú stránku prostredníctvom „embed kódu“. Tým sa ušetrí veľa starostí a je lepšie prenechať zobrazovanie videa niekomu kto je na to určený ako skúšať stovky rôznych prehrávačov videa aby to bolo čo najdokonalejšie a aj tak nikdy nebude, ak s tým človek nepracuje denne.

Vhodne naprogramovaná webová stránka
Kód webovej stránky vie tiež načítanie zrýchliť, ale aj výrazne spomaliť. Ak si dáte webovú stránku vytvoriť na mieru, tak sa dopredu uistite, že sa programátor vyzná v „best practices“ ako stránku nakódovať tak, aby sa rýchlo načítala. Tu nemá moc zmysel čo opisovať, ale treba mať na pamäti, že čím viac kódu sa na webovej stránke nachádza, tak o to dlhšie sa bude načítavať. Ja sa osobne riadim pravidlom: „čím menšie, tým lepšie“ a to sa dá uplatniť na veľa vecí. Nevidím dôvod na to aby sa mi na webovej stránke načítalo 5 rôznych frameworkov a z každého som použil len niečo, lepšie je si to niečo radšej sám napísať, alebo z tých frameworkov vyextrahovať, ako naťahovať kopu rôznych riadkov kódu, ktoré sa na webe ani nepoužijú. Žiaľ tým sa pomaly už nikto nezaoberá, lebo každý ma požiadavky aby to bolo čo najrýchlejšie spravené a samozrejme čo najlacnejšie. Potom tak tie weby aj vyzerajú. Niektoré webové stránky síce fungujú aj bez databázy, no väčšina webových stránok je už programovaná tak, že určité dáta sú uchované aj v databáze. Pri webových stránkach šitých na mieru sa databáza až tak zbytočnosťami neplní, ale môže sa stať, že sa v nej časom vyskytne zbytočný zápis. V tom prípade je potrebné, aby ich programátor manuálne, alebo cez nejaký skript odstránil. Pri rôznych CMS (Wordpress, Joomla, Drupal a pod.) je to ale horšie. Tam môžu zlé nastavenia zapríčiniť ukladanie kadejakého odpadu do databázy, ktorý nie je nutné v databáze uchovávať, takže aj toto môže byť dôvodom spomalenia webovej stránky po čase.

Odstránenie objektov, ktoré sa dlho načítavajú
Ak potrebujete na webových stránkach rôzne vychytávky ako slider, náročná a veľká galéria tak by som pouvažoval nad tým, či naozaj tieto rôzne vychytávky stoja za to a nebolo by lepšie ich nahradiť niečím menším a rýchlejším. Vizuálne môžu byť zaujímavé, avšak môžu znižovať celkovú rýchlosť načítania webovej stránky. Ľudia si obvykle ani také veci moc nevšimnú, čiže by som pouvažoval o vhodnejšej a rýchlejšej náhrade možno iným elementom, ktorý splní rovnakú úlohu ako by malo načítavanie webovej stránky trpieť čo sa rýchlosti týka vďaka takým vychytávkam. Ako dlho sa načítavajú rôzne objekty na webovej stránke sa dá zistiť cez vyššie spomenutý nástroj webpagetest.org. Okrem dĺžky načítania celej webovej stránky odmeria čas načítania aj na jednotlivých objektoch.

Na začiatok patrí CSS a na koniec JavaScript
Odporúčam umiestniť CSS súbor/y čo najbližšie k hornej časti webovej stránky, pretože prehliadače webovú stránku pred načítaním CSS nevykreslia. Na konci webovej stránky by mali byť JavaScript súbory, pretože ak sa nachádzajú v kóde hore, tak bránia prehliadačom vo vykreslení kým sa nespracujú. Na CSS nepoužívajte @import, spotrebuje totiž viac zdrojov ako je priame odkazovanie na CSS aj napriek tomu, že sa dosiahne presne ten istý výsledok. Ďalším dôvodom, prečo nepoužiť @import je aj to, že niektoré staršie prehliadače ho ani nepodporujú, takže je najlepšie sa tomu vyhnúť, ak je to možné.

Zmenšenie alias minifikácia CSS, JavaScript a HTML kódu
Existuje niekoľko rôznych spôsobov ako zrýchliť CSS a JS súbory. Prvý spôsob spočíva vo vložení všetkých súborov do jedného, takže namiesto toho, aby sa sťahovalo desať samostatných súborov pre JavaScript sa stiahne len jeden a to iste platí aj pre CSS súbory. Keď sa pozrieme na to, čo spôsobuje, že sa webové stránky načítavajú pomaly, tak je pravdepodobné, že to má niečo spoločné s neefektívnym načítavaním mnohých malých súborov s CSS alebo JS. Výhodnejšie bude mať jeden pár kB súbor ako desiatky menších. Druhým tiež podstatný spôsobom je minifikácia a optimalizácia kódu vrátane odstránenia formátovania, medzier, komentárov a ďalších nepotrebných znakov či nepoužitého kódu. Tým sa môže taktiež dramaticky zvýšiť rýchlosť webovej stránky, lebo sa rapídne zníži veľkosť CSS a JS súborov.

Povolenie funkcie Keep-Alive
Funkcia Keep-Alive odkazuje na správu, ktorá sa odosiela medzi klientskym počítačom a webovým serverom a žiada o povolenie na stiahnutie súborov. Povolenie funkcie Keep-Alive umožňuje klientskemu počítaču sťahovať viac súborov bez opakovaného požiadania o povolenie, čo pomáha ušetriť šírku pásma. Ak chcete povoliť funkciu Keep-Alive, jednoducho skopírujte a vložte nižšie uvedený kód do svojho súboru .htaccess:

Header set Connection keep-alive

Používajte vyrovnávaciu pamäť prehliadača
Pri používaní prehliadačov, sa niektoré informácie z webových stránok ukladajú do vyrovnávacej pamäte, aby sa k nim nabudúce urýchlil prístup. Do vyrovnávacej pamäte sa ukladajú časti stránok, napríklad obrázky, aby sa stránky pri ďalšej návšteve otvorili rýchlejšie. To je ale nutné tiež ošetriť na strane webovej stránky a nastaviť hlavičky rôznym typom súborov, ktoré chceme aby prehliadač uchoval v tejto pamäti pre rýchlejšie zobrazovanie webovej stránky pri ďalšej návšteve. Je tam potrebné nastaviť aj čas expirácie a toto si treba premyslieť, že ako dlho sa má vo vyrovnávacej pamäti každý typ súboru nachádzať.

Rýchlosť webovej stránky je dôležitejšia ako kedykoľvek predtým, keďže používanie mobilného internetu postupne preberá používanie stolných počítačov a nikdy nebolo také dôležité ako teraz opraviť rýchlosť načítania webovej stránky. Používatelia tolerujú menej pomalé webové stránky ako kedykoľvek predtým a posun smerom k mobilným zariadeniam s pripojením na internet znamená, že ak nie je webová stránka rýchla, tak o ňu nikto ani nezakopne.