K dispozícii je mnoho spôsobov, ako zlepšiť výkonnosť webu. Jedným z nich je predbežné načítanie obsahu, ktorý bude neskôr potrebný. Predspracovanie CSS, predbežné vykreslenie celej stránky alebo rozlíšenie názvu domény. Robíme všetko vopred a potom okamžite zobrazíme výsledok! To znie dobre.

Ešte úžasnejšie je, že je implementovaný veľmi jednoducho. Päť značiek dajte prehliadaču príkaz na vykonanie predbežných akcií:

<link rel="prefetch" href="/sk/style.css" as="style" />
<link rel="preload" href="/sk/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" />

Poďme si stručne vysvetliť, čo robia a kedy ich použiť.

Skoč do: predpätie · predbežné načítanie · predpripojiť · dns-prefetch · predbežné vykreslenie

predpätie

<link rel= "preload"> povie prehliadaču, aby načítal a ukladal do vyrovnávacej pamäte zdroj (napríklad skript alebo šablónu so štýlmi) čo najskôr. Je to užitočné, keď je zdroj potrebný niekoľko sekúnd po načítaní stránky – a chcete proces urýchliť.

Prehliadač po načítaní so zdrojom nič nerobí. Skripty sa nevykonajú, šablóny štýlov sa nepoužijú. Zdroj sa jednoducho uloží do vyrovnávacej pamäte a na požiadanie sa okamžite sprístupní.

syntax

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

href ukazuje na zdroj, ktorý chcete stiahnuť.

as môže byť čokoľvek, čo sa dá stiahnuť v prehliadači:

style pre predlohy štýlov,
script pre skripty,
font pre fonty,
fetch pre zdroje načítané pomocou fetch() alebo XMLHttpRequest,
pozri úplný zoznam na MDN.

Je dôležité špecifikovať atribút as – pomáha to prehliadaču správne uprednostniť a naplánovať sťahovanie.

Kedy použiť

Použite predbežné načítanie, keď bude zdroj potrebný vo veľmi blízkej budúcnosti. 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');
}
```
V predvolenom nastavení comic-sans.woff2 sa začne načítavať až po stiahnutí a analýze index.css. Aby ste sa vyhli dlhému čakaniu, môžete si písmo stiahnuť skôr pomocou <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```

Ak oddelíte svoje štýly podľa prístupu Kritické CSS na dve časti, kritickú (na okamžité vykreslenie) a nekritickú:

<style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

Pri tomto prístupe sa nekritické štýly začnú načítavať až po spustení JavaScriptu, čo sa môže stať niekoľko sekúnd po vykreslení. Namiesto čakania použite JS <link rel= "preload">ak chcete začať sťahovať skôr:

<style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/sk/app/non-critical.css" as="style" />

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

Nepoužívajte nadmerné načítanie. Ak načítate všetko za sebou, stránka sa zázračne nezrýchli, naopak zabráni prehliadaču v správnom plánovaní práce.

Nezamieňať s predbežným načítaním. Nepoužívať <link rel= "preload">, ak nepotrebujete zdroj ihneď po načítaní stránky. Ak to budete potrebovať neskôr, napríklad na ďalšiu stranu, tak použite <link rel= "prefetch">.

Podrobnosti

Toto je povinná značka byť spustené prehliadačom (ak to podporuje), na rozdiel od všetkých ostatných značiek súvisiace s predpätím. Prehliadač musí stiahnuť zdroj uvedený v <link rel="preload">. V iných prípadoch môže ignorovať predbežné načítanie, napríklad ak beží na pomalom pripojení.

priority. Prehliadače zvyčajne priraďujú rôzne priority rôznym zdrojom (štýly, skripty, fonty atď.), aby najskôr 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ť tabuľka s plnou prioritou.

predbežné načítanie

<link rel= "prefetch"> požiada prehliadač, aby stiahol a uložil do vyrovnávacej pamäte zdroj (napríklad skript alebo šablónu štýlov) na pozadí. Načítanie prebieha s nízkou prioritou, takže nezasahuje do dôležitejších zdrojov. Je to užitočné, ak je zdroj potrebný na ďalšej stránke a chcete ho vopred uložiť do vyrovnávacej pamäte.

Aj tu prehliadač po načítaní so zdrojom nič nerobí. Skripty sa nevykonajú, šablóny štýlov sa nepoužijú. Zdroj sa jednoducho uloží do vyrovnávacej pamäte a na požiadanie sa okamžite sprístupní.

syntax

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

href ukazuje na zdroj, ktorý chcete stiahnuť.

as môže byť čokoľvek, čo sa dá stiahnuť v prehliadači:

style pre predlohy štýlov,
script pre skripty,
font pre fonty,
fetch pre zdroje načítané pomocou fetch() alebo XMLHttpRequest,
pozri úplný zoznam na MDN.

Je dôležité špecifikovať atribút as - pomáha prehliadaču správne uprednostniť a naplánovať sťahovanie.

Kedy použiť

Na načítanie zdrojov z iných stránok, ak potrebujete zdroj z inej stránky a chcete ho vopred načítať, aby ste urýchlili vykresľovanie tejto stránky. Napríklad:

Máte internetový obchod a 40 % používateľov opustí domovskú stránku na stránku produktu. Použite <link rel= "prefetch">, načítavanie súborov CSS a JS na vykreslenie stránok produktov.
Máte jednostránkovú aplikáciu a rôzne stránky načítavajú rôzne balíčky. Keď používateľ navštívi stránku, môžu sa vopred načítať balíčky pre všetky stránky, na ktoré odkazuje.

Je pravdepodobné, že túto značku možno bezpečne použiť v akomkoľvek rozsahu.. Prehliadače zvyčajne plánujú predbežné načítanie s najnižšou prioritou, takže to nikomu neprekáža. Len majte na pamäti, že spotrebúva návštevnosť používateľov, čo môže stáť peniaze.

Nie pre naliehavé žiadosti. Nepoužívať <link rel= "prefetch">, keď je zdroj potrebný za pár sekúnd. V tomto prípade použite <link rel= "preload">.

Podrobnosti

Voliteľný štítok. Prehliadač nemusí postupovať podľa tohto pokynu, môže ho ignorovať napríklad pri pomalom pripojení.

Priorita v prehliadači Chrome. V prehliadači Chrome <link rel= "prefetch"> zvyčajne vykonávané s minimálnou prioritou (pozri tabuľka s plnou prioritou), teda po načítaní všetkého ostatného.

predpripojiť

<link rel= "preconnect"> požiada prehliadač, aby sa vopred pripojil k doméne, keď chcete v budúcnosti urýchliť nastavenie pripojenia.

Prehliadač musí nadviazať spojenie, ak získava akékoľvek zdroje z novej domény tretej strany. Napríklad, ak načíta písma Google, písma React z CDN alebo požaduje odpoveď JSON zo servera API.

Nadviazanie nového spojenia zvyčajne trvá niekoľko stoviek milisekúnd. Robí sa to raz, ale stále to chce čas. Ak ste pripojenie vytvorili vopred, ušetríte čas a stiahnete zdroje z tejto domény rýchlejšie.

syntax

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

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

Kedy použiť

Použite pre domény, ktoré budú čoskoro potrebné stiahnuť odtiaľ dôležitý štýl, skript alebo obrázok, ale ešte nepoznáte adresu URL zdroja. Napríklad:

Vaša aplikácia je hosťovaná na my-app.com a vytvára požiadavky AJAX api.my-app.com: Konkrétne dopyty nepoznáte vopred, pretože sú vytvárané dynamicky z JS. Tu je celkom vhodné použiť tag na predpripojenie k doméne.
Vaša aplikácia je hosťovaná na my-app.com a používa Google Fonts. Sťahujú sa v dvoch krokoch: najprv sa stiahne súbor CSS z domény fonts.googleapis.com, potom tento súbor požaduje písma s fonts.gstatic.com. Nemôžete vedieť, z ktorých konkrétnych súborov písiem sú fonts.gstatic.com budete potrebovať, kým nenačítate súbor CSS, takže vopred môžeme vytvoriť iba predbežné pripojenie.

Pomocou tejto značky môžete trochu urýchliť skript alebo štýl tretej strany z dôvodu vopred vytvoreného spojenia.

Nepoužívajte nadmerne. Vytvorenie a udržiavanie pripojenia je nákladná operácia pre klienta aj server. Túto značku použite maximálne pre 4-6 domén.

Podrobnosti

Voliteľný štítok. Prehliadač nemusí postupovať podľa tohto pokynu a môže ho ignorovať, napríklad ak už bolo vytvorených veľa spojení alebo v inom prípade.

Čo zahŕňa proces pripojenia?. Ak sa chcete pripojiť ku každej lokalite, prehliadač musí vykonať nasledujúce kroky:

Rozlíšenie DNS. Nájsť IP adresu servera (216.58.215.78) pre zadaný názov domény (google.com).
TCP handshake. Vymeňte pakety (klient → server → klient) na inicializáciu TCP spojenia so serverom.
TLS handshake (iba stránky HTTPS). Dve kolá výmeny paketov (klient → server → klient → server → klient) na spustenie bezpečnej relácie TLS.

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

dns-prefetch

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

Prehliadač musí určiť IP adresu domény, ak bude získavať nejaké zdroje z novej domény tretej strany. Napríklad načítanie písiem Google, písma React z CDN alebo vyžiadanie odpovede JSON zo servera API.

Pre každú novú doménu trvá rozlíšenie DNS záznamu zvyčajne 20-120 ms. Ovplyvní to iba načítanie prvého zdroja z danej domény, ale stále to spôsobuje oneskorenie. Ak vykonáme rozlíš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 označuje názov domény, pre ktorú chcete nastaviť IP adresu. Môže byť špecifikovaný s predponou (https://domain.com) alebo bez neho (//domain.com).

Kedy použiť

Použite pre domény, ktoré budú čoskoro potrebné stiahnuť si odtiaľ zdroje, o ktorých prehliadač vopred nevie. Napríklad:

Vaša aplikácia je hosťovaná na my-app.com a vytvára požiadavky AJAX api.my-app.com: Konkrétne dopyty nepoznáte vopred, pretože sú vytvárané dynamicky z JS. Tu je celkom vhodné použiť tag na predpripojenie k doméne.
Vaša aplikácia je hosťovaná na my-app.coma používa Google Fonts. Sťahujú sa v dvoch krokoch: najprv sa stiahne súbor CSS z domény fonts.googleapis.com, potom tento súbor požaduje písma s fonts.gstatic.com. Nemôžete vedieť, z ktorých konkrétnych súborov písiem sú fonts.gstatic.com budete ho potrebovať, kým nenačítate súbor CSS, takže vopred môžeme urobiť len predbežné pripojenie.

Pomocou tejto značky môžete trochu urýchliť skript alebo štýl tretej strany z dôvodu vopred vytvoreného spojenia.

Všimnite si podobné vlastnosti ako <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Zvyčajne nemá zmysel používať ich spolu pre jednu doménu: <link rel= "preconnect"> už zahŕňa <link rel= "dns-prefetch"/> a oveľa viac. To možno odôvodniť v dvoch prípadoch:

Chcete podporovať staršie prehliadače?. <link rel= "dns-prefetch" /> podporovaný od IE10 a Safari 5. <link rel= "preconnect"> bol chvíľu podporovaný v prehliadačoch Chrome a Firefox, ale bol 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 zrýchliť pripojenia na viac ako 4-6 domén. Tag <link rel= "preconnect"> Neodporúča sa používať s viac ako 4-6 doménami, pretože vytvorenie a udržiavanie spojenia je nákladná operácia. <link rel= "dns-prefetch" /> spotrebuje menej zdrojov, preto ho v prípade potreby použite.

Podrobnosti

Voliteľný štítok. Prehliadač nemusí postupovať podľa tohto pokynu, takže nemusí vykonať rozlíšenie DNS, napríklad ak je na stránke veľa takýchto značiek alebo v inom prípade.

Čo je DNS. Každý server na internete má jedinečnú IP adresu, ktorá vyzerá 216.58.215.78. Názov stránky sa zvyčajne zadáva do panela s adresou prehliadača (napr. google.com) a servery DNS (Domain Name System) ho priraďujú k IP adrese servera (216.58.215.78).

Ak chcete zistiť adresu IP, prehliadač sa musí dotazovať na server DNS. Pri pripájaní k novej doméne tretej strany to trvá 20–120 ms.

DNS je cache, aj keď nie veľmi spoľahlivoNiektoré operačné systémy a prehliadače ukladajú požiadavky DNS do vyrovnávacej pamäte: ušetrí sa tým čas pri opakovaní požiadaviek, ale na ukladanie do vyrovnávacej pamäte sa nemožno spoľahnúť. Linux Zvyčajne to vôbec nefunguje. Chrome má vyrovnávaciu pamäť DNS, ale tá trvá iba minútu. Windows Ukladá odpovede DNS do vyrovnávacej pamäte päť dní.

predbežné vykreslenie

<link rel= "prerender"> požiada prehliadač, aby stiahol adresu URL a zobrazil ju na neviditeľnej karte. Keď používateľ klikne na odkaz, stránka by sa mala okamžite zobraziť. To je užitočné, ak ste si istí, že používateľ navštívi určitú stránku a chce urýchliť jej zobrazenie.

Napriek (alebo kvôli) výnimočnej účinnosti tejto značky v roku 2019 <link rel= "prerender"> slabo podporované v hlavných prehliadačoch. Pozrite si ďalšie podrobnosti. nižšie.

syntax

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

href ukazuje na adresu URL, ktorú chcete začať vykresľovať na pozadí.

Kedy použiť

Keď ste si naozaj istí, že používateľ prejde na určitú stránku. Ak máte „tunel“, cez ktorý sa 70 % návštevníkov stránky A dostane na stránku B, potom <link rel= "prerender"> na strane A pomôže veľmi rýchlo zobraziť stránku B.

Nepoužívajte nadmerne. Predbežné vykresľovanie je extrémne drahé z hľadiska šírky pásma a pamäte. Nepoužívať <link rel= "prerender"> pre viac ako jednu stranu.

Podrobnosti

Voliteľný štítok. Prehliadač nemusí postupovať podľa tohto pokynu a môže ho ignorovať, napríklad pri pomalom pripojení alebo pri nedostatku voľnej pamäte.

Na šetrenie pamäte Chrome nevytvára úplné vykreslenieA iba predbežné načítanie NoState. To znamená, že Chrome načíta stránku a všetky jej zdroje, ale nevykreslí ani nespustí JavaScript.

Firefox a Safari túto značku vôbec nepodporujú. Toto neporušuje špecifikáciu, pretože prehliadače nie sú povinné dodržiavať tieto pokyny; ale aj tak smutne. Chyba implementácie Firefox je otvorený už sedem rokov. Existujú správy, že Safari nepodporuje ani túto značku.

Zhrnutie

Použitie:

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

Zdroj: hab.com