Van Számos módja van a webes teljesítmény javításának. Az egyik a később szükséges tartalom előtöltése. CSS prefetching, teljes oldal előrenderelése vagy domain név feloldása. Előkészítünk mindent előre, majd azonnal megjelenítjük az eredményt! Jól hangzik.

Még jobb, hogy ezt nagyon egyszerűen megvalósíthatjuk. Öt <link rel> címke adja a böngészőnek az utasítást az előkészítő lépésekhez:

<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" />

Röviden elmagyarázzuk, hogy mit csinálnak és mikor érdemes őket használni.

Ugrás ide: preload · prefetch · preconnect · dns-prefetch · prerender

preload

<link rel="preload"> jelzi a böngészőnek, hogy a lehető leghamarabb töltse le és cache-elje a forrást (például egy scriptet vagy CSS fájlt). Ez hasznos, ha a forrásra néhány másodpercen belül szükség lesz a lap betöltése után — és szeretnéd felgyorsítani a folyamatot.

A böngésző nem csinál semmit a forrással a letöltés után. A script-ek nem futnak, a CSS fájlok nem kerülnek alkalmazásra. A forrás egyszerűen cache-lve van és azonnal rendelkezésre áll kérésre.

Szintaxis

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

href megadja a letölteni kívánt forrást.

as bármilyen dolog lehet, amit a böngésző letölthet:

style stíluslapokhoz,
script script-ekhez,
font betűtípusokhoz,
fetch-t azokhoz a forrásokhoz, amiket a fetch() vagy XMLHttpRequest,
teljes lista ld. a MDN-en.

Fontos megadni az attribútumot as — ez segít a böngészőnek helyesen prioritizálni és ütemezni a letöltést.

Mikor használjuk

Használj előtöltést, ha a forrásra a lehető leghamarabb szükség lesz. Például:

Külső fájlokból származó nem szabványos betűtípusok:
```

<link rel="stylesheet" href="index.css" />

/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
már tartalmaz egy előre létrehozott önaláírt TLS/SSL tanúsítványt. Ennyi nekem elegendő, mivel zárva tartom a külső hozzáférést. Azoknak, akik más típusú tanúsítványokat szeretnének használni, van comic-sans.woff2 csak a betöltés és a parse után kezd el betöltődni. index.cssHogy ne kelljen olyan sokáig várni, a betűtípust korábban is betöltheted ezzel: <link rel="preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Ha a stílusaidat a Critical CSS megközelítés szerint két részre osztod, kritikusra (az azonnali rendereléshez) és nem kritikusra:
```
<style>
/* Inline kritikus stílusok */
</style>

<script>
/* Egyedi JS, ami elkezdi letölteni a nem kritikus stílusokat */
loadCSS('/app/non-critical.css');
</script>
```
Ezen megközelítés mellett a nem kritikus stílusok csak JavaScript betöltésekor kezdődnek el, ami néhány másodperccel a renderelés után történhet meg. A JS várakozása helyett használja <link rel="preload">, hogy korábban kezdje a betöltést:
```
/* Inlined critical styles */
```

Ne használja túlzásba a preloaded-t. Ha mindent egyszerre tölt be, a webhely nem fog varázslatos módon felgyorsulni, inkább éppen ellenkezőleg, megnehezíti a böngésző számára a megfelelő munkamenet tervezését.

Ne keverje össze a prefetch-el. Ne használja <link rel="preload">, ha a forrásra azonnal nincs szüksége az oldal betöltése után. Ha később szüksége lesz rá, például a következő oldalhoz, akkor használja <link rel= "prefetch">.

Részletek

Ez egy kötelező tag a böngésző végrehajtása számára (ha támogatja), ellentétben az összes többi taggal, amelyek a preload-hoz kapcsolódnak. A böngészőnek kötelező betölteni a forrást, amelyet a <link rel="preload">meghatároz. Más esetekben előfordulhat, hogy figyelmen kívül hagyja a preload-ot, például, ha lassú kapcsolaton dolgozik.

Prioritások. Különböző forrásoknak (stílusok, szkriptek, betűk stb.) a böngészők általában eltérő prioritásokat rendelnek, hogy először a legfontosabb forrásokat töltsék be. Ebből a szempontból a böngésző a asattribútum alapján határozza meg a prioritást. A Chrome böngésző számára megteheti a prioritások teljes táblázatát.

prefetch

<link rel= "prefetch"> kéri a böngészőt, hogy töltse le és tárolja a forrást (például egy szkriptet vagy stíluslapot) háttérben. A betöltés alacsony prioritással történik, így nem akadályozza a fontosabb forrásokat. Ez hasznos, ha a forrásra a következő oldalon szüksége lesz, és előre szeretné tárolni.

Itt is a böngésző nem tesz semmit a forrással a betöltés után. A szkriptek nem futnak, a stíluslapok nem alkalmazódnak. A forrás csak tárolódik és azonnal rendelkezésre áll kérés esetén.

Szintaxis

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

href megadja a letölteni kívánt forrást.

as bármilyen dolog lehet, amit a böngésző letölthet:

style stíluslapokhoz,
script script-ekhez,
font betűtípusokhoz,
fetch-t azokhoz a forrásokhoz, amiket a fetch() vagy XMLHttpRequest,
teljes lista ld. a MDN-en.

Fontos megadni az attribútumot as — ez segít a böngészőnek a prioritások helyes beállításában és a betöltés tervezésében.

Mikor használjuk

Más oldalakról származó források letöltéséhez, ha egy másik oldalról szüksége van a forrásra, és szeretné előre betölteni, hogy később felgyorsíthassa az adott oldal renderelését. Például:

Önnek van egy online boltja, és a felhasználók 40%-a elhagyja a főoldalt a termékoldalra. Használja <link rel= "prefetch">, CSS és JS fájlok betöltése a termékoldalak megjelenítéséhez.
Egyoldalas alkalmazásod van, ahol a különböző oldalak különböző csomagokat töltenek be. Amikor a felhasználó meglátogat egy oldalt, előtöltheted az összes csomagot, amelyre az hivatkozik.

Valószínűleg ezt a taget biztonságosan használhatod bármilyen mennyiségben.. A böngészők általában a prefetch-t a legalacsonyabb prioritással tervezik, így senkinek sem zavaró. Csak tartsd észben, hogy a felhasználó forgalmát használja fel, ami pénzbe kerülhet.

Nem sürgős kérésekhez.. Ne használja <link rel= "prefetch">, amikor a forrásra néhány másodpercen belül szükséged van. Ilyen esetben alkalmazd a <link rel="preload">.

Részletek

Nem kötelező tag.. A böngészőnek nem kötelessége követni ezt az utasítást, figyelmen kívül hagyhatja, például lassú kapcsolaton.

Prioritás a Chrome-ban.. A Chrome-ban <link rel= "prefetch"> általában minimális prioritással fut (lásd a a prioritások teljes táblázatát), azaz minden más betöltése után.

preconnect

<link rel= "preconnect"> kérheti a böngészőt, hogy csatlakozzon a domainhez előre, amikor szeretnéd felgyorsítani a jövőbeli kapcsolat létesítését.

A böngészőnek létre kell hoznia a kapcsolatot, ha forrásokat von ki egy új külső domainről. Például, ha Google Fonts betűtípusokat, React-et töltesz be a CDN-ről, vagy JSON választ kérsz az API szerverről.

Új kapcsolat létesítése általában néhány száz milliszekundumot vesz igénybe. Ez egyszer történik meg, de így is időt vesz el. Ha előre létesíted a kapcsolatot, időt takaríthatsz meg, és gyorsabban töltheted le a forrásokat erről a domainről.

Szintaxis

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

href megmutatja a domainnevet, amelynek IP-címét meg kell határozni. Állítható előtaggal (https://domain.com) vagy anélkül (//domain.com).

Mikor használjuk

Használj olyan domaineket, amelyekre hamarosan szükséged lesz fontos stílus, script vagy kép betöltésére, de még nem ismered a forrás URL-jét. Például:

Az alkalmazásod ezen a helyen fut my-app.com és AJAX kéréseket indít a api.my-app.com: nem tudod előre a konkrét kéréseket, mert azok dinamikusan készülnek a JS-ből. Itt teljesen indokolt a tag használata az előzetes csatlakozásra a domainhez.
Az alkalmazásod ezen a helyen fut my-app.com és a Google Fonts betűtípusokat használja. Ezeket két lépésben töltik be: először a CSS fájl betöltése történik a következő domainről fonts.googleapis.com, majd ez a fájl kéri a betűtípusokat a fonts.gstatic.com. Nem tudod, hogy pontosan mely betűtípus fájlok fognak fonts.gstatic.com Szükséged lesz rá, amíg le nem töltöd a CSS fájlt, ezért előre csak egy előzetes kapcsolatot tudunk létrehozni.

Használj ezt a tagelet, hogy kissé felgyorsíts egy külső scriptet vagy stílust. az előzetes kapcsolat létrehozásával.

Ne abuszálj vele.A kapcsolat létrehozása és fenntartása költséges művelet az ügyfél és a szerver számára egyaránt. Használj ezt a taget maximum 4-6 domain esetén.

Részletek

Nem kötelező tag.A böngésző nem köteles követni ezt az utasítást, és figyelmen kívül hagyhatja, például ha már sok kapcsolat van beállítva, vagy más esetekben.

Mit tartalmaz a csatlakozási folyamat. A böngészőnek a minden egyes webhelyhez való csatlakozásához a következő lépéseket kell végrehajtania:

DNS feloldás. Megkeresi a szerver IP-címét (216.58.215.78) a megadott domain névhez (mrkaran.dev).
TCP kézfogó. Csomagcsere (ügyfél → szerver → ügyfél), hogy TCP kapcsolatot kezdeményezzen a szerverrel.
TLS kézfogó (csak HTTPS webhelyekhez). Két kör csomagcserét végez (ügyfél → szerver → ügyfél → szerver → ügyfél), hogy biztonságos TLS munkamenetet indítson.

Megjegyzés: Az HTTP/3 javítja és felgyorsítja a kézfogó mechanizmust, de még mindig messze van.

dns-prefetch

<link rel= "dns-prefetch"> kéri a böngészőt, hogy előre hajtsa végre a DNS feloldást a domainhez, ha hamarosan csatlakozni fogsz hozzá, és szeretnéd felgyorsítani a kezdeti kapcsolatot.

A böngészőnek meg kell határoznia a domain IP-címét, ha új külső domainről szeretne erőforrásokat betölteni. Például Google Fonts betöltése, React CDN-ből vagy JSON válasz lekérése API szervertől.

Minden új domain esetén a DNS rekord feloldása általában körülbelül 20-120 ms-ot vesz igénybe. Ez csak a domainről elsőként betöltött erőforrásra vonatkozik, de így is késlekedést jelent. Ha előre hajtjuk végre a DNS feloldást, időt takaríthatunk meg, és gyorsabban betölthetjük az erőforrást.

Szintaxis

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

href megadja a domain nevet, amelyhez IP-címet kell beállítani. Megadható előtükörrel (https://domain.com) vagy anélkül (//domain.com).

Mikor használjuk

Használj olyan domaineket, amelyekre hamarosan szükséged lesz az ottani erőforrások betöltéséhez, amelyeket a böngésző nem ismer előre. Például:

Az alkalmazásod ezen a helyen fut my-app.com és AJAX kéréseket indít a api.my-app.com: nem tudod előre a konkrét kéréseket, mert azok dinamikusan készülnek a JS-ből. Itt teljesen indokolt a tag használata az előzetes csatlakozásra a domainhez.
Az alkalmazásod ezen a helyen fut my-app.com, és Google Fonts betöltéseket használ. Ezek két lépésben töltődnek be: először a CSS fájl töltődik le a domainről. fonts.googleapis.com, majd ez a fájl kéri a betűtípusokat a fonts.gstatic.com. Nem tudod, hogy pontosan mely betűtípus fájlok fognak fonts.gstatic.com Szükséged lesz rá, amíg le nem töltöd a CSS fájlt, ezért előre csak egy előzetes kapcsolatot tudunk létrehozni.

Használj ezt a tagelet, hogy kissé felgyorsíts egy külső scriptet vagy stílust. az előzetes kapcsolat létrehozásával.

Kérlek, figyelj a hasonló jellemzőkre a <link rel= "dns-prefetch"/> és <link rel= "preconnect">. Általában nincs értelme őket egy domainhez használni: <link rel= "preconnect"> már tartalmazza <link rel= "dns-prefetch"/> és még sok mást. Két esetben lehet indokolt:

A régi böngészők támogatására van szükség. <link rel= "dns-prefetch" /> támogatott IE10-től és Safari 5-től kezdődően. <link rel= "preconnect"> egy ideig a Chrome és a Firefox is támogatta, de a Safari 11.1-ben lett hozzáadva és még mindig nem támogatja az IE/Edge. Ha ezeket a böngészőket kell támogatni, használjon <link rel= "dns-prefetch" /> mint tartalék opciót <link rel= "preconnect">.

A kapcsolat gyorsítására több mint 4–6 domainhez. A tag <link rel= "preconnect"> nem ajánlott több mint 4–6 domainnél, mivel a kapcsolat létrehozása és fenntartása költséges művelet. <link rel= "dns-prefetch" /> kevesebb erőforrást fogyaszt, ezért szükség esetén használja.

Részletek

Nem kötelező tag.. A böngésző nem köteles követni ezt az utasítást, ezért lehet, hogy nem hajtja végre a DNS feloldást, például ha a lapon sok ilyen tag van, vagy valamilyen más esetben.

Mi az a DNS. Minden internetes szerverhez egyedi IP-cím tartozik, ami így néz ki: 216.58.215.78. A böngésző címsorába általában a webhely nevét írják be (például, mrkaran.dev), és a DNS-szerverek (Domain Name System) párosítják azt a szerver IP-címével (216.58.215.78).

Ahhoz, hogy meghatározzuk az IP-címet, a böngésző DNS-szerverhez kell lekérdezést küldjön. Ez 20–120 ms-ot vesz igénybe egy új külső domainhez való csatlakozáskor.

A DNS-t gyorsítótárazza, bár nem túl megbízhatóan. Néhány operációs rendszer és böngésző gyorsítótárazza a DNS-lekérdezéseket: ez megtakarít időt az ismételt lekérdezéseknél, de a gyorsítótárazásra nem lehet támaszkodni. Linux alatt általában egyáltalán nem működik. A Chrome-nak van DNS gyorsítótára, de az csak egy percig él. A Windows öt napig gyorsítótárazza a DNS-válaszokat.

prerender

<link rel= "prerender"> kéri a böngészőt, hogy töltse le az URL-t és jelenítse meg egy láthatatlan fülön. Amikor a felhasználó rákattint a linkre, az oldal azonnal meg kell jelennie. Ez hasznos, ha biztos benne, hogy a felhasználó látogatni fog egy adott oldalt, és szeretné felgyorsítani a megjelenését.

Annak ellenére, hogy ennek a tagnak kivételes hatékonysága van (vagy éppen azért), 2019-ben <link rel= "prerender"> rosszul támogatották a fő böngészők. alább..

Szintaxis

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

href a háttérben futtatni kívánt URL-re mutat.

Mikor használjuk

Amikor biztos benne, hogy a felhasználó egy adott oldalra megy majd. Ha van egy „alagút”, amelyen a látogatók 70%-a A oldalról B oldalra navigál, akkor <link rel= "prerender"> A oldalon nagyon gyorsan megjelenítheti B oldalt.

Ne abuszálj vele.. A korai renderelés rendkívül költséges a forgalom és a memória szempontjából. Ne használja <link rel= "prerender"> több mint egy oldal számára.

Részletek

Nem kötelező tag.. A böngésző nem köteles követni ezt az utasítást, és figyelmen kívül hagyhatja azt, például lassú kapcsolat vagy kevés szabad memória esetén.

A memória megtakarítása érdekében a Chrome nem végez teljes renderelést, és csak pre-load NoState. Ez azt jelenti, hogy a Chrome betölti az oldalt és minden erőforrást, de nem végez renderelést és nem hajtja végre a JavaScript kódot.

A Firefox és a Safari egyáltalán nem támogatja ezt a taget. Ez nem sérti a specifikációt, mivel a böngészők nem kötelesek végrehajtani ezt az utasítást; de így is sajnálatos. Egy megvalósítási hiba a Firefoxban hét éven át fennállt. Vannak hírek arról, hogy a Safari szintén nem támogatja ezt a taget.

Összefoglaló

Használja:

<link rel="preload"> — amikor egy erőforrásra szüksége lesz néhány másodpercen belül
<link rel= "prefetch"> — amikor egy erőforrást szeretne a következő oldalon
<link rel= "preconnect"> — amikor tudja, hogy hamarosan szüksége lesz egy erőforrásra, de még nem ismeri a teljes URL-jét
<link rel= "dns-prefetch"> — hasonló, amikor tudja, hogy hamarosan szüksége lesz egy erőforrásra, de még nem ismeri a teljes URL-jét (régi böngészők számára)
<link rel= "prerender"> — amikor biztos benne, hogy a felhasználók egy adott oldalra navigálnak, és szeretné felgyorsítani annak megjelenítését

Forrás: habr.com