Nové HTML 5 techniky na zrýchlenie načítania webu

Rýchlosť načítania webovej stránky rozhoduje o tom, či na nej návštevník zostane alebo odíde, či bude spokojný alebo frustrovaný, a zaujíma aj Google – rýchle stránky, ktoré sa návštevníkom páčia, dostávajú vo výsledkoch lepšie pozície. Zistite, ako za pár minút vášho času využiť HTML 5 techniku prebrowsing a spraviť web rýchlejším!

HTML 5 je aktuálna verzia jazyka na tvorbu webových stránok, ktorá prináša mnoho noviniek, ktoré dokážu web urobiť rýchlejším a zlepšiť zážitok používateľov pri prehliadaní. Hlavné prehliadače, ako Chrome či Firefox, postupne umožňujú využitie nových techník vrátane okamžitého zobrazenia stránok po kliknutí na odkaz na stránkach. Návštevníkom, obzvlášť ak si stránku prehliadajú z mobilného zariadenia, sa rýchlejší web, samozrejme, páči.

Pred rokmi sme problémy s rýchlosťou nemali, lebo HTML malo pár kilobajtov, štýly neexistovali, Javascript bol primitívny, obrázky boli v malých rozmeroch a videá boli výnimkou. Navyše dial-up pripojenie bolo také pomalé, že na úplné načítanie webov sme boli zvyknutí čakať niekoľko sekúnd až desiatok sekúnd.

Známe koncepty zrýchlenia

Už roky používame GZIP kompresiu, ktorá dokáže násobne zmenšiť najmä textový obsah vrátane CSS a skriptov. Známe sú tiež metódy minifikácie či spájania viacerých súborov do jedného, keďže limity na viacero spojení so serverom závisia od nastavenia prehliadača a operačného systému, a najmä na mobilných zariadeniach je veľa súčasných spojení nemožnosťou. Používateľom dokážeme uľahčiť opakované načítanie webu cez cacheovanie, t. j. lokálne ukladanie opakovane potrebných súborov. Local storage ako doplnok či rozšírenie možnosti cookies tiež umožňuje zrýchliť webové aplikácie a stránky.

Všetky tieto techniky nám prevažne umožňujú urýchliť načítanie už raz stiahnutých dát. Stále však narážame na problém v rýchlosti, keď používateľ klikne na odkaz a načítanie novej stránky trvá príliš dlho. Čo ak by sme mali nástroj, ktorý nám umožní prehliadaču povedať, ktoré podstránky z práve navštívenej stránky sú najpravdepodobnejšími kandidátmi na pokračovanie, a ponúknuť tak po kliknutí používateľom de facto instantné zobrazenie obsahu?

V ústrety vychádzajú formáty cielené na mobilných používateľov ako AMP (Accelerated Mobile Pages) od Googlu či Instant Articles od Facebooku. Tie však vôbec neriešia používateľský zážitok (UX) na desktope.

Prebrowsing

A práve tu nám môže pomôcť koncept zvaný prebrowsing. Ide o sériu metód, ktoré umožňujú prehliadaču povedať, aký obsah (prístupný cez odkaz) majú začať načítavať ešte predtým, ako k nemu príde používateľ a klikne naň. Prebrowsing je teda všeobecný popis techník umožňujúcich načítanie obsahu vopred bez interakcie používateľa.

Prefetching (prednatiahnutie)

Metóda prefetchingu sa snaží najmä vytvoriť spojenie na pravdepodobný budúci obsah, doplnkovo zabezpečí aj jeho stiahnutie do zariadenia používateľa.

Poskytuje viacero možností – každá je odlišná svojím vyťažením kapacity linky používateľa.

DNS prefetching (DNS prednatiahnutie)

Nadviaže DNS spojenie, t. j. zistí si, na akú IP adresu sa daná doména prekladá, čím ušetrí pár desatín až stotín sekundy (tzv. fázu vyhľadania DNS).

Ukážka kódu DNS prefetch – v článku máme odkaz na Google Fonts a chceme ušetriť čas DNS spojením, do hlavičky vložíme:

<link rel="dns-prefetch" href="//fonts.google.com">

Preconnect (predspojenie)

Zrealizuje DNS prefetching a navyše k nemu vytvorí TCP spojenie s doplnkovou možnosťou dohody TLS (bezpečného spojenia).

Ukážka kódu metódy pred-pripojenia (preconnect), napr. potrebujeme embedovať Tweety cez tag <script>:

<link rel="preconnect" href="//twitter.com">

Prefetching (prednatiahnutie)

Ak vieme, že budeme niektorý zo zdrojov (napr. obrázok) potrebovať v budúcnosti, vieme cez prefetching vynútiť jeho stiahnutie a uloženie do cache.

Prefetching obsahu, napr. potrebujeme okamžite zobraziť obrázok v animácii pri prejdení myšou:

<link rel="prefetch" href="animation2.png">

Rovnako je táto metóda použiteľná pre web fonty, ktoré dnes čakajú na stiahnutie HTML a CSS. Týmto spôsobom ich prehliadač môže sťahovať paralelne s iným obsahom a nedôjde tak k efektu prekreslenia textu.

Subresources (podzdroje)

Umožňuje definovať prioritu pre niektoré súčasné časti stránky (ako štýly CSS alebo Javascript), ktoré budú vyžadované ešte pred samotným prefetchingom.

Podzdroje (subresources), ktoré chceme prioritizovať, označíme takto – napr. kritické CSS, t. j. CSS definujúce základný layout a vzhľad:

<link rel="subresource" href="main.css">

Priorita metódy subresource ju robí vhodnou na sťahovanie zdrojov, ako sú štýly alebo Javascript v rámci aktuálnej stránky.

Prerendering stránok (predvykreslenie)

Najpokročilejšia metóda, ktorá na pozadí nielen vykoná DNS spojenie, TCP pripojenie a posťahuje všetky žiadané zdroje, ale navyše vytvorí tzv. DOM model stránky pre okamžitú možnosť jej zobrazenia (môžete si pod tým predstaviť skrytý tab, ktorý si neskôr zobrazíte v prehliadači – prepnutie je okamžité). Tu je dôležité, aby ste naozaj sťahovali iba zdroje, ktoré sú v budúcnosti potrebné, inak zaťažujete linku používateľa downloadom množstva obsahu na pozadí.

Predvykreslenie stránky vyťažuje linku používateľa, ale umožňuje okamžité zobrazenie cieľovej stránky po kliku, napr. pri prechode z produktu do košíka alebo z košíka do pokladne:

<link rel="prerender" href="http://example.com/basket">

Vzhľadom na jej náročnosť vychádzajte napr. zo štatistík Analytics, aby ste ju použili iba na stránku, kam používatelia zvyčajne kliknú ďalej.

Preloading (prednahratie)

Jedna z budúcich možností, ktorá v prehliadači vynúti stiahnutie obsahu a nemožno ju na rozdiel od prefetchingu ignorovať (napr. ak používateľ má zrušený prefetching v nastaveniach, preload nebude môcť obmedziť).

Preloading (prednahratie) ako budúca možnosť umožňuje vynútiť stiahnutie niektorého zo zdrojov, napr. banneru na titulke:

<link rel="preload" href="banner.png">

Prečo všetko toto potrebujete?

Rýchlosť webových stránok je s rozšírením rýchleho internetu, ako aj mobilných zariadení stále dôležitejším faktorom celkovej použiteľnosti webov. Optimalizáciou zdrojov spomínanou v úvode vieme dosiahnuť skrátenie času načítania. Ďalšia úspora však stojí a padá na pripojeniach na pozadí, ktoré sme dosiaľ nevedeli ovplyvniť. Prebrowsing, ktorý nám umožňuje v extrémnych prípadoch (prerender) čakanie kompletne odbúrať, sa stane čoraz používanejším spôsobom zlepšenia používateľského zážitku. Odporúčame ho začať používať už teraz, predpokladáme aj pozitívny efekt na pozície vo výsledkoch vyhľadávania a konverznú mieru.