Na rýchlosti záleží | Onlima.sk
Čo ponúkame
Ako pracujeme
Naša tvorba
Objednajte si
Prečítajte si
Kontaktujte nás

Na rýchlosti záleží

Reč je o rýchlosti načítania Vašej web stránky. Podľa štatistík spoločnosti Google, každou sekundou načítavania navyše, strácate až 20% zákazníkov. Čo vypovedá o názve článku, že na rýchlosti skutočne záleží. Tak prečo nerobiť weby, ktoré budú rýchle? Väčšina ľudí očakáva, že sa webová stránka načíta do 2 sekúnd. Nemožné? V tomto článku si popíšeme optimalizačné techniky, ktoré Vám pomôžu urýchliť Váš web a získať tak viac zákazníkov.

10.07.2018

1. Obrázky. Hlavná príčina pomalého webu.

Najčastejšou príčinou pomalého načítavania webu sú práve obrázky. Obrázky zaberajú oveľa viac pamäte ako text a preto aj ich načítanie zaberie viac času. V jednom z extrémnych prípadov, s ktorým sme sa v praxi stretli, bola web stránka, ktorej hlavná stránka obsahovala až 70MB obrázkov. To znamenalo, že pri načítaní daného webu sa muselo stiahnuť viac ako 70MB dát. A teraz si predstavte, že máte mobilný paušál 1GB na mesiac. 14 kliknutí na tomto webe a je fuč. Nehovoriac o rýchlosti načítavania. Dobrou správou je, že optimalizácia obrázkov Vám môže skrátiť čas načítania až o 90% a celkovo tým znížiť množstvo prenesených dát. Ešte lepšou správou je, že tento krok je ten najjednoduchší.

Predstavte si, že potrebujete na web pridať svoju profilovú fotku. Každý chce dobre vyzerať a tak zvolí najkvalitnejšiu 4K fotku s rozlíšením 3840x2160 pixlov, ktorá zaberá 15MB. Poviete si hurá, mám to ale super fotku na webe. Lenže väčšina obrazoviek má rozlíšenie sotva 1920x1080. To znamená, že aj keby bola vaša fotka natiahnutá na celom pozadí, nebude možné ju zobraziť v plnej kvalite. V horšom prípade je vaša fotka na webe zobrazená niekde hore v rohu v malom štvorčeku alebo krúžku, ktorý je menší ako dvoj eurová minca.

Znížte rozlíšenie obrázkov. Nenahrávajte na web zbytočne veľké obrázky.  Rozlíšenie prispôsobte podľa potreby. Ak chcete na web stránke zobrazovať fotografie so šírkou 400 pixlov, použite fotky, ktoré budú široké 400 pixlov. Dobrým riešením je mať uložených viacero verzií obrázkov. Takzvané thumbnails, ktoré sa zobrazia ako náhľad napríklad pri fotogalérií a potom klasické veľké obrázky, ktoré sa zobrazia až keď si daný thumbnail zväčšíte. Na redukciu veľkosti môžete použiť napríklad JPEG optimizer.

Znížte kvalitu obrázkov. Inými slovami množstvo pamäte, ktoré zaberajú. Na túto takzvanú kompresiu odporúčam online nástroj Tinypng. Pri kompresii súborov .jpg sa zníži aj kvalita, ale tá je voľným okom takmer nepozorovateľná. Pri kompresii súborov .png k strate kvality nedochádza.

Nepoužívajte obrázky, keď nemusíte. Vždy zvážte, či je nutné používať obrázok a či by miesto neho nebola postačujúca nejaká ikona. Prípadne pri mobilnej verzii, môžete niektoré obrázky vynechať. Napríklad pozadie, ktoré aj tak nie je dobre vidno.

Odstráňte meta údaje. Sú to údaje, ktoré nie sú viditeľné a obsahujú informácie o tom, kde bola fotografia odfotená, typ fotoaparátu, čas odfotenia atď. Môžete použiť tento online nástroj Verexif. Odstránením meta údajov ušetrite možno 2-3 kb, ale stále je to ušetrenie. Navyše to pomáha pri bezpečnosti. Ak nahrávate na web fake fotku z pláže, nechce predsa ukázať, že bola nasnímaná na pieskovisku niekde na lokálnom sídlisku.


2. CSS a JS súbory

Tieto dva typy súborov sú neodmysliteľnou súčasťou každého webu. Problém však je, že väčšina webov používa veľké množstvo knižníc, ktoré ani nie sú potrebné. Ich stiahnutie vyžaduje viac času a nesie so sebou aj zvýšený prenos dát.


Zvážte potrebu danej knižnice. Ak napríklad nutne nepotrebujete jQuery alebo Bootstrap, nepoužívajte ho. Na väčšinu vecí sa dá použiť CSS GRID prípadne JS selectory.

Minifikujte súbory. Inými slovami znížte veľkosť súborov. Môžete použiť napríklad cssminifier.com alebo javascript-minifier.com. Jednoducho skopírujete celý svoj kód do daného nástroja a ako výstup dostanete kód, ktorý je minifikovaný. Pri minifikácii sa odstránia zbytočné medzery, odsadenia a prázdne riadky. Kód nebude čitateľný, ale to je prehliadačom jedno. Odporúčame vždy si nechať štandardný súbor, ktorý bude pre vás čitateľný a v ktorom môžete robiť zmeny. Napríklad style.css, ktorý môžete vždy pred nasadení na ostrú verziu minifikovať. Pri ostrej, produkčnej verzii webu potom použijete style.min.css.

Znížte počet requestov vášho webu. Súbory máte už malé a rýchlo na načítavajú. Teraz je na rade znížiť počet prenosov. Každý súbor sa totiž odosiela samostatne. Pred poslaním musí prehliadač vždy poslať request na server a ten mu ako odpoveď pošle daný súbor. A samotný request trvá určitý čas. Čiže ak znížite počet requestov, urýchli sa načítavanie vášho webu. Môžete to urobiť tak, že všetky CSS súbory zjednotíte do jedného. Rovnako ako aj JS súbory.


3. Zrýchlite back end

Toto je jedna z posledných vecí, ktorú si popíšeme a ktorá môže ovplyvňovať rýchlosť vášho webu. Na väčšine malých webov sa tento problém nevyskytuje. Nastáva skôr na veľkých weboch, ktoré majú obrovské databázy a veľkú škálu funkcií. Príkladom je napríklad wordpress. Je to veľmi silné CMS, ktoré disponuje obrovskou škálou funkcií. V administrácií si môžete upraviť takmer všetko. Problém však je, že všetky tieto zmeny sa ukladajú do databázy. Čo znamená, že pri načítaní webu sa musia všetky tieto dáta načítať a spracovať. To si samozrejme vyžaduje viac času. S tým pravdepodobne nebudete schopný urobiť nič. Ak však máte web postavený na riešení na mieru, môžete sa pokúsiť optimalizovať tieto veci.

Optimalizujte databázu. To môžete docieliť znížením dopytov na databázu. Pridaním indexu na daný stĺpec, aby bolo vyhľadávanie rýchlejšie. Prípadne zmenou dátových typov, aby zaberali menej pamäte.

Optimalizujte funkcie. Ak na webe používate zložité funkcie typu hypotekárna kalkulačka, ktorej výpočet nie je úplne jednoduchý, môžete sa pokúsiť optimalizovať množstvo operácií, ktoré sa musia vykonať pre dosiahnutie rovnakého výsledku. Napríklad zmeniť iteratívny for cyklus na jednoduchý vzorec. Prípadne pri zložitejších algoritmoch využiť istú heuristiku, aby ste ušetrili strojový čas. Spôsobov je naozaj veľa a ak by ste potrebovali poradiť, pokoje nás kontaktujte.

Autor článku

Mgr. Michal Sejč

Project Manager & Backend Developer

Michal sa v našej spoločnosti venuje Backendu. Práve on sa stará o to, aby Vaša web stránka alebo aplikácia fungovala rýchlo a bezchybne. Vyštudoval UK MATFYZ v Bratislave. Zúčastnil sa stáže v spoločnosti Huawei v Pekingu a Honkongu. Následne pracoval na chode aplikácie medzinárodnej banky.

Odoberať newsletter

Táto stránka používa súbory cookies, ktoré nám umožňujú identifikovať zlepšenia našich služieb. Viac informácií