Ako píšu vývojári z Google: „The web should be fast.“ Rýchlosť webov a aplikácií je veľmi dôležitá pre používateľskú spokojnosť. Ak je aplikácia pomalá, dochádza nielen k strate návštevníkov, ale aj potenciálnych zákazníkov. Keď je stránka pomalá, používatelia na nej strávia menej času.
A odkedy Google zahrnul do algoritmu hodnotenia stránok aj rýchlosť načítania, je rýchlosť dôležitá aj z pohľadu SEO - optimalizácie pre vyhľadávače.
Optimalizácia na strane webového servera
Optimalizácia na webserveri sú zmeny v zdrojových kódoch, dôsledkom čoho má byť zníženie časovej náročnosti webu a optimalizácia databázy – jej normalizácia, správne nastavenie indexov a pod. Veľmi efektívnou technikou je použitie memcache, kedy obsah, ktorý sa často nemení, nemusíme generovať ani získavať z databázy.
V súčasnej dobe je dobre optimalizovaná aplikácia štandardom a spracovanie jednej postránky by malo trvať maximálne 1 sekundu. Základom tvorby rýchleho webu je dodržiavanie viacerých programátorských konvencií.
Optimalizácia na strane webového klienta
Zo štatistík vyplýva, že až 80% času potrebného na zobrazenie stránky je použitého na frontend. Ak sa jedná o rozsiahle komplexné webové aplikácie, najefektívnejšia cesta je optimalizovať rýchlosť načítania na strane prehliadača.
Nástroje na analýzu rýchlosti webových aplikácií
V ui42 sme pri tvorbe webov vyskúšali množstvo nástrojov, napr. Google page speed, Yslow, Pingdom tools, GTMetrics a pod. Zatiaľ najlepším nástrojom je Webpagetest.org. Umožňuje testovať prostredníctvom mnohých dedikovaných serverov z celého sveta, vybrať rýchlosť pripojenia, možnosť urobiť za sebou až 10 testov a vypočítať priemerný čas načítania celého webu ako aj jednotlivých komponentov.
Hlavné techniky optimalizácie rýchlosti
Nastavenie hlavičiek cacheovania
Moderné webové stránky obsahujú množstvo obsahu, ktorý si vie prehliadač uložiť do vyrovnávacej pamäte (cache). Ak máme správne nastavene hlavičky cacheovania pre jednotlivé komponenty, prehliadač tieto komponenty nemusí opäť sťahovať ale použije tie, ktoré má už stiahnuté a uložené v cache. Jedná sa najmä o obrázky, CSS súbory, Javascript súbory a iné. Musíme pritom dávať pozor na to, aby sme v prípade zmeny prehliadaču povedali, že si má zmenené zdroje stiahnuť znova. Napríklad ak robíme redesign webu a urobíme zmeny CSS súborov, pokiaľ to prehliadaču nepovieme, tak bude mať množstvo opakovaných návštevníkov rozbitú stránku, keďže budú mať nové HTML ale staré CSS.
Optimalizácia veľkosti obrázkov
Každý obrázok, ktorý je na webe, by mal byť sťahovaný v presne takej veľkosti, v akej je potrebný na webe. Veľké obrázky znamenajú prenášanie väčšieho množstva údajov, ako je potrebné. Niektoré weby stále prenášajú obrázok vo väčšom objeme, ako je potrebný. To znamená nielen pomalšie načítanie, ale aj zvýšený traffic a tým pádom vyššie prevádzkové náklady.
Redakčný systém Buxus má vlastný nástroj, ktorý každý obrázok vygeneruje presne vo veľkosti, ktorá je potrebná. Pozor na to, aby mal daný obrázok vždy rovnakú URL, keďže obrázky sa cacheujú a tým pádom sa nemusia pri opakovanom zobrazení sťahovať znova.
Minimalizácia počtu HTTP requestov
Najvyšší podiel na čase spracovania stránky má stiahnutie všetkých komponentov na stránke: obrázky, CSS súbory, javascript súbory, flash, atď. Redukovaním počtu komponentov na stránke môžeme znížiť počet HTTP požiadaviek nevyhnutných na zobrazenie stránky a zrýchliť web.
Jednou z možností sú CSS sprites – táto technika je kombinácia viacerých obrázkov do jedného a tým pádom zníženie počtu sťahovaných obrázkov a teda aj požiadaviek na server. Výsledný obrázok môže niekedy síce mať väčšiu veľkosť, ale rýchlosť načítania je v dôsledku zníženia requestov vyššia ako pri viacerých obrázkoch. Táto technika je ale použiteľná, iba keď sú obrázky na jednej stránke. To znamená, že ju môžeme použiť napríklad na pozadie navigácie, tlačidlá a pod, v žiadnom prípade nie na produktové obrázky.
Kombinovať môžeme aj iné zdroje ako napríklad JavaScript súbory. Musíme dať ale pozor na to, aby výsledný súbor nebol príliš veľký a neobsahoval veľké časti kódu, ktoré sa využívajú iba v niektorých špecifických častiach webu, ku ktorým sa zákazník často ani nedostane.
Rozloženie obrázkov na viac subdomén (domén)
Webové prehliadače limitujú počet paralelných spojení na jednu doménu (Firefox - 6 spojení, Chrome – 6 spojení, IE7 – 2 spojenia), pričom celkový počet paralelných spojení na všetky domény je až 30 – 60. Ak máme na jednej podstránke veľa obrázkov (prípadne aj iných súborov), môžeme ich rozložiť na viac subdomén (alebo domén) napr. img1.mojweb.sk, img2.mojweb.sk, img3.mojweb.sk. Veľkou výhodou je, že prehliadač berie do úvahy každú subdoménu ako samostatnú doménu a nemusíme mať kvôli obrázkom zaregistrované viaceré domény. Pri testovaní rôzneho počtu takýchto subdomén sme v ui42 zistili, že najvyššie zrýchlenie je pri použití 2 – 4 subdomén. Musíme ale byť opatrní, pretože pri vyšších počtoch nemusí dôjsť k zrýchleniu, dokonca môže dôjsť k spomaleniu.
Nevyhnutné je zachovanie konzistentnosti jednotlivých subdomén, aby sme nestratili iné benefity ako cacheovanie. To znamená, že ak máme obrázok na jednej subdoméne, prehliadač si ho uloží do cache, aby ho nemusel sťahovať opäť. Ak sa obrázok nachádza aj na inej stránke webu, musíme mu ho ponúknuť z rovnakej subdomény, inak sa bude zbytočne dvakrát sťahovať, dôsledkom čoho môže byť skôr spomalenie ako zrýchlenie webu.
Pokročilejšou metódou pri tejto technike je využitie služieb ako Flickr, Piccasa a pod. ktoré majú API a tiež vlastnú CDN.
CDN (Content delivery network)
Fyzická vzdialenosť jednotlivých serverov od používateľa má taktiež vplyv na rýchlosť načítania. Pri tvorbe najmä medzinárodných webov má veľký zmysel použitie CDN siete. Tá sa stará o to, aby sa používateľ dostal k obsahu z najbližšieho servera. Použitie CDN siete je niekedy náročné, najmä pri komplexných webových aplikáciách, no ak používame rôzne pluginy ako napr. jQuery, Google maps a pod. ktoré majú vlastnú CDN, je vhodné ich do stránky vložiť priamo z CDN. Tým tiež redukujeme traffic na svoj server a umožníme paralelné načítanie, keďže sa daný plugin bude sťahovať z inej domény.
Vaše skúsenosti s optimalizáciou rýchlosti webov?
Uviedli sme si niekoľko základných techník na optimalizáciu rýchlosti webov a webových aplikácii. Existuje veľké množstvo ďalších, ku ktorým sa možno dostaneme v ďalších pokračovaniach blogu.
Máte nejaké overené techniky, ktoré používate na zrýchlenie svojich webov?
