Existuje mnoho spôsobov zvyšovania výkonu webu. Jedným z nich je prednačítanie obsahu, ktorý bude potrebný neskôr. Prefetching CSS, predrendrovanie celej stránky alebo resolvovanie doménového mena. Robíme všetko dopredu a potom okamžite zobrazíme výsledok! Znie to skvele.

Ešte lepšie je, že je to veľmi jednoduché realizovať. Päť tagov <link rel> dáva prehliadaču príkaz na predbežné činnosti:

<link rel="prefetch" href="/style.css" as="style" />
<link rel="preload" href="/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />

V skratke vysvetlíme, čo robia a kedy ich používať.

Prejsť na: prednačítania · prefetch · preconnect · dns-prefetch · prerender

prednačítania

<link rel="preload"> hovorí prehliadaču, aby čo najskôr načítal a vyrovnal zdroj (napríklad skript alebo štýlovú tabuľku). Je to užitočné, keď bude zdroj potrebný za niekoľko sekúnd po načítaní stránky - a chcete urýchliť proces.

Prehliadač nerobí nič so zdrojom po načítaní. Skripty sa nevykonávajú, štýlové tabuľky sa neuplatňujú. Zdravotný zdroj je jednoducho vyrovnaný a okamžite k dispozícii na požiadanie.

Syntax

<link rel="preload" href="/style.css" as="style" />

href ukazuje na zdroj, ktorý chcete stiahnuť.

as môže byť čokoľvek, čo je možné stiahnuť v prehliadači:

style pre štýlové tabuľky,
script pre skripty,
font pre písma,
fetch pre zdroje načítané pomocou fetch() alebo XMLHttpRequest,
úplný zoznam viď. na MDN.

Dôležité je uviesť atribút as – pomáha to prehliadaču správne stanoviť priority a plánovať načítanie.

Kedy používať

Použite prednačítanie, keď bude zdroj potrebný v najbližšej dobe. Napríklad:

Neštandardné písma z externého súboru:
```

<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
Predvolene comic-sans.woff2 začne sa načítavať iba po načítaní a analýze index.css. Aby ste nečakali tak dlho, môžete načítať písmo skôr pomocou <link rel="preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Ak rozdeľujete svoje štýly podľa prístupu Critical CSS na dve časti, kritickú (pre okamžité rendrovanie) a nekritickú:
```
<style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>
```
Pri takom prístupe sa nekritické štýly začnú načítavať iba po spustení JavaScriptu, k čomu môže dôjsť niekoľko sekúnd po vykreslení. Namiesto čakania na JS použite <link rel="preload">, aby ste začali načítanie skôr:
```
/* Inline kritické štýly */
```

Nezneužívajte prednačítanie. Ak načítate všetko, stránka sa automaticky neurychlí; skôr naopak, môže to prekážať prehliadaču v správnom plánovaní práce.

Nezamieňajte so pre-fetchingom. Nepoužívajte <link rel="preload">, ak nepotrebujete zdroj hneď po načítaní stránky. Ak ho budete potrebovať neskôr, napríklad na nasledujúcej stránke, použite <link rel= "prefetch">.

Podrobnosti

Toto je povinný tag na vykonanie prehliadačom (ak ho podporuje), na rozdiel od všetkých ostatných tagov , ktoré sa týkajú predbežného načítania. Prehliadač je povinný načítať zdroj uvedený v <link rel="preload">. V iných prípadoch môže ignorovať predbežné načítanie, napríklad ak pracuje na pomalom pripojení.

Priority. Rôznym zdrojom (štýly, skripty, písma atď.) prehliadače zvyčajne priraďujú rôzne priority, aby sa najprv načítali najdôležitejšie zdroje. V tomto prípade prehliadač určuje prioritu podľa atribútu as. Pre prehliadač Chrome si môžete pozrieť úplnú tabuľku priorít.

prefetch

<link rel= "prefetch"> žiada prehliadač, aby načítal a uložil zdroj (napríklad skript alebo štýlovú tabuľku) na pozadí. Načítanie prebieha s nízkou prioritou, takže nebrzdí dôležitejšie zdroje. Je to užitočné, ak bude zdroj potrebný na nasledujúcej stránke a chcete ho vopred uložiť do cache.

Tu tiež prehliadač s hladom nič nerobí so zdrojom po načítaní. Skripty sa nevykonávajú, štýlové tabuľky sa neuplatňujú. Zdroje sa jednoducho ukladajú do cache a okamžite sa poskytujú na požiadanie.

Syntax

<link rel="prefetch" href="/style.css" as="style" />

href ukazuje na zdroj, ktorý chcete stiahnuť.

as môže byť čokoľvek, čo je možné stiahnuť v prehliadači:

style pre štýlové tabuľky,
script pre skripty,
font pre písma,
fetch pre zdroje načítané pomocou fetch() alebo XMLHttpRequest,
úplný zoznam viď. na MDN.

Dôležité je uviesť atribút as — pomáha prehliadaču správne prideľovať priority a plánovať načítanie.

Kedy používať

Na načítanie zdrojov z iných stránok, ak potrebujete zdroj z inej stránky a chcete ho prednačítavať, aby ste neskôr urýchlili vykreslenie tejto stránky. Napríklad:

Máte internetový obchod a 40% používateľov odchádza z hlavnej stránky na stránku s produktom. Použite <link rel= "prefetch">, nahrávaním súborov CSS a JS pre renderovanie stránok s produktom.
Máte jednoc stránkovú aplikáciu, kde rôzne stránky načítavajú rôzne balíky. Keď používateľ navštívi nejakú stránku, môžete vopred načítať balíky pre všetky stránky, na ktoré odkazuje.

Pravdepodobne je táto značka bezpečne použiteľná v akomkoľvek objeme. Prehliadače zvyčajne plánujú prefetch s najnižšou prioritou, takže to nikomu neprekáža. Iba majte na pamäti, že sa spotrebováva používateľský dátový prenos, ktorý môže stáť peniaze.

Nie pre urgentné požiadavky. Nepoužívajte <link rel= "prefetch">, keď bude zdroj potrebný za pár sekúnd. V takom prípade použite <link rel="preload">.

Podrobnosti

Voliteľná značka. Prehliadač nie je povinný dodržiavať tento pokyn, môže ho ignorovať, napríklad na pomalom pripojení.

Priorita v Chrome. V Chrome <link rel= "prefetch"> sa zvyčajne vykonáva s minimálnou prioritou (pozri úplnú tabuľku priorít), to znamená po načítaní všetkých ostatných.

preconnect

<link rel= "preconnect"> požaduje od prehliadača, aby sa vopred pripojil k doméne, keď chcete zrýchliť ustanovenie spojenia v budúcnosti.

Prehliadač by mal nadviazať spojenie, ak načítava nejaké zdroje z novej externé domény. Napríklad, ak načítava písma z Google Fonts, React z CDN alebo požaduje odpoveď JSON zo servera API.

Ustanovenie nového spojenia zvyčajne trvá niekoľko stoviek milisekúnd. Vykonáva sa iba raz, ale aj tak zaberá čas. Ak ste už vopred nadviazali spojenie, ušetríte čas a rýchlejšie načítate zdroje z tejto domény.

Syntax

<link rel= "preconnect" href="https://api.my-app.com" />

href označuje názov domény, pre ktorý je potrebné určiť IP adresu. Môže byť uvedený s prefiksom (https://domain.com) alebo bez neho (//domain.com).

Kedy používať

Použite pre domény, ktoré čoskoro potrebujete na načítanie dôležitého štýlu, skriptu alebo obrázku, ale zatiaľ neviete URL zdroja. Napríklad:

Vaša aplikácia je umiestnená na my-app.com a robí AJAX požiadavky na api.my-app.com: neviete vopred konkrétne požiadavky, pretože sa robia dynamicky z JS. Tu je celkom vhodné použiť značku na predbežné pripojenie k doméne.
Vaša aplikácia je umiestnená na my-app.com a používa písma Google Fonts. Tieto sa načítavajú v dvoch fázach: najprv sa načíta súbor CSS z domény fonts.googleapis.com, potom tento súbor požaduje písma z fonts.gstatic.com. Ne môžete vedieť, ktoré konkrétne súbory písiem z fonts.gstatic.com Budete ich potrebovať, kým nenahrajete súbor CSS, takže vopred môžeme iba nastaviť predbežné pripojenie.

Použite tento tag na mierne zrýchlenie niektorého externého skriptu alebo štýlu vďaka predbežnému nastaveniu pripojenia.

Nepoužívajte to nadmerne. Nastavenie a udržiavanie pripojenia je nákladná operácia pre klienta aj server. Použite tento tag maximálne pre 4-6 domén.

Podrobnosti

Voliteľná značka. Prehliadač nie je povinný dodržiavať tento pokyn a môže ho ignorovať, napríklad ak je už nastavených veľa pripojení alebo v inej situácii.

Čo zahrňuje proces pripojenia. Na pripojenie k každej stránke musí prehliadač vykonať nasledujúce kroky:

Riešenie DNS. Nájsť IP adresu servera (216.58.215.78) pre uvedené doménové meno (google.com).
Rukovanie TCP. Výmena paketov (klient → server → klient), aby inicioval TCP pripojenie so serverom.
Rukovanie TLS (iba pre HTTPS stránky). Dve kolá výmeny paketov (klient → server → klient → server → klient), aby inicioval zabezpečenú reláciu TLS.

Poznámka: HTTP/3 zlepší a urýchli mechanizmus rukovania, ale je ešte ďaleko.

dns-prefetch

<link rel= "dns-prefetch"> žiada prehliadač, aby vopred vykonal riešenie DNS pre doménu, ak sa k nej čoskoro pripojíte a chcete urýchliť počiatočné pripojenie.

Prehliadač musí určiť IP adresu domény, ak bude sťahovať nejaké zdroje z novej externé domény. Napríklad sťahovať písma z Google Fonts, React z CDN alebo žiadať odpoveď JSON zo servera API.

Pre každú novú doménu zvyčajne trvá riešenie DNS okolo 20−120 ms. Toto ovplyvňuje iba načítanie prvého zdroja z tejto domény, ale aj tak predstavuje oneskorenie. Ak vykonáte riešenie DNS vopred, ušetríme čas a načítame zdroj rýchlejšie.

Syntax

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href naznačuje doménové meno, pre ktoré sa má nastaviť IP adresa. Môžete uviesť s prefixom (https://domain.com) alebo bez neho (//domain.com).

Kedy používať

Použite pre domény, ktoré čoskoro potrebujete na načítanie zdrojov odtiaľ, o ktorých prehliadač nevie vopred. Napríklad:

Vaša aplikácia je umiestnená na my-app.com a robí AJAX požiadavky na api.my-app.com: neviete vopred konkrétne požiadavky, pretože sa robia dynamicky z JS. Tu je celkom vhodné použiť značku na predbežné pripojenie k doméne.
Vaša aplikácia je umiestnená na my-app.com, a používa písma Google Fonts. Tieto sa načítavajú v dvoch fázach: najprv sa načíta súbor CSS z domény fonts.googleapis.com, potom tento súbor požaduje písma z fonts.gstatic.com. Ne môžete vedieť, ktoré konkrétne súbory písiem z fonts.gstatic.com budete ich potrebovať, kým nenahrajete súbor CSS, takže vopred môžeme iba nastaviť predbežné pripojenie.

Použite tento tag na mierne zrýchlenie niektorého externého skriptu alebo štýlu vďaka predbežnému nastaveniu pripojenia.

Pozrite si podobné charakteristiky na <link rel= "dns-prefetch"/> a <link rel= "preconnect">. Používanie ich spolu pre jednu doménu obvykle nedáva zmysel: <link rel= "preconnect"> už zahŕňa <link rel= "dns-prefetch"/> a mnoho ďalšieho. Je to ospravedlniteľné v dvoch prípadoch:

Chcete podporovať staré prehliadače. <link rel= "dns-prefetch" /> podporované začínajúc od IE10 a Safari 5. <link rel= "preconnect"> nejaký čas bolo podporované v Chrome a Firefox, ale bolo pridané do Safari až vo verzii 11.1 a stále nie je podporované v IE/Edge. Ak potrebujete podporovať tieto prehliadače, použite <link rel= "dns-prefetch" /> ako záložnú možnosť pre <link rel= "preconnect">.

Chcete urýchliť pripojenie k viac ako 4-6 doménam. Tag <link rel= "preconnect"> sa neodporúča používať s viac ako 4-6 doménami, pretože nastavenie a udržiavanie pripojenia je nákladná operácia. <link rel= "dns-prefetch" /> spotrebováva menej zdrojov, takže ho v prípade potreby použite.

Podrobnosti

Voliteľná značka. Prehliadač nie je povinný dodržiavať tento pokyn, takže nemusí vykonať DNS resolvovanie, napríklad ak je na stránke veľa takýchto tagov alebo v nejakej inej situácii.

Čo je DNS. Každému serveru na internete zodpovedá jedinečná IP adresa, ktorá vyzerá ako 216.58.215.78. Do adresného riadka prehliadača sa zvyčajne zadáva názov webovej stránky (napríklad google.com), a servery DNS (Domain Name System) ho priraďujú k IP adrese servera (216.58.215.78).

Aby ste určili IP adresu, musí prehliadač vykonať dopyt na DNS server. Tento proces trvá 20-120 ms pri pripojení k novej externé doméne.

DNS sa ukladajú do cache, aj keď nie veľmi spoľahlivo. Niektoré operačné systémy a prehliadače ukladajú DNS dotazy do cache: to ušetrí čas pri opakovaných dopytoch, ale na cache sa nedá úplne spolíhať. V Linuxe to zvyčajne vôbec nefunguje. Chrome má DNS cache, ale tá žije iba minútu. Windows uchováva odpovede DNS po dobu piatich dní.

prerender

<link rel= "prerender"> žiadam prehliadač, aby načítal URL adresu a zobrazil ju na neviditeľnej karte. Keď používateľ klikne na odkaz, stránka by sa mala okamžite zobraziť. Je to užitočné, ak si ste istí, že používateľ navštívi konkrétnu stránku a chcete urýchliť jej zobrazenie.

Napriek výnimočnej efektívnosti tohto tagu (alebo kvôli nej) je v roku 2019 <link rel= "prerender"> zle podporované hlavnými prehliadačmi. Viac informácií nájdete na nižšie.

Syntax

<link rel="prerender" href="https://my-app.com/pricing" />

href označuje URL, pre ktorý chcete spustiť renderovanie na pozadí.

Kedy používať

Keď ste si skutočne istí, že používateľ prejde na konkrétnu stránku. Ak máte „tunel“, cez ktorý prechádza 70% návštevníkov stránky A na stránku B, tak <link rel= "prerender"> na stránke A veľmi rýchlo zobrazíte stránku B.

Nepoužívajte to nadmerne. Predbežné renderovanie je mimoriadne nákladné z hľadiska prevádzky a pamäte. Nepoužívajte <link rel= "prerender"> viac ako pre jednu stránku.

Podrobnosti

Voliteľná značka. Prehliadač nie je povinný dodržiavať tento pokyn a môže ho ignorovať, napríklad pri pomalom pripojení alebo nedostatočnom voľnom mieste v pamäti.

Kvôli úspore pamäte Chrome nevykonáva úplné renderovanie, a iba prednačítanie NoState. To znamená, že Chrome načíta stránku a všetky jej zdroje, ale nevykonáva renderovanie a neexecutuje JavaScript.

Firefox a Safari vôbec tento tag nepodporujú. To neporušuje špecifikáciu, pretože prehliadače nie sú povinné tento pokyn vykonať; ale stále je to smutné. Chyba implementácie vo Firefoxe bola otvorená sedem rokov. Existujú správy, že Safari taktiež tento tag nepodporuje..

Zhrnutie

Použite:

<link rel="preload"> — keď potrebujete zdroj za pár sekúnd
<link rel= "prefetch"> — keď potrebujete zdroj na nasledujúcej stránke
<link rel= "preconnect"> — keď viete, že čoskoro budete potrebovať zdroj, ale ešte neviete jeho úplné URL
<link rel= "dns-prefetch"> — podobne, keď viete, že čoskoro budete potrebovať zdroj, ale ešte neviete jeho úplné URL (pre staré prehliadače)
<link rel= "prerender"> — keď si ste istí, že používatelia prejdú na určitú stránku a chcete urýchliť jej zobrazenie.

Zdroj: habr.com