ProHoster > Blog > Adminisztráció > Előtöltés, előhívás és egyéb címkék

Előtöltés, előhívás és egyéb címkék

Van számos módszer a webes teljesítmény javítására. Az egyik a tartalom előtöltése, amelyre később szükség lesz. CSS előfeldolgozás, teljes oldal előmegjelenítés vagy domain név feloldás. Mindent előre megteszünk, majd azonnal megjelenítjük az eredményt! Jól hangzik.

Ami még menőbb, hogy nagyon egyszerűen van megvalósítva. Öt címke parancsot ad a böngészőnek az előzetes műveletek végrehajtására:

<link rel="prefetch" href="/hu/style.css" as="style" />
<link rel="preload" href="/hu/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 magyarázzuk el, mit csinálnak, és mikor kell használni őket.

Ugorj: preload · előzetes letöltési · előcsatlakozás · dns-prefetch · előrenderelés

preload

<link rel= "preload"> utasítja a böngészőt, hogy a lehető leghamarabb töltsön be és gyorsítótárazzon egy erőforrást (például szkriptet vagy stíluslapot). Ez akkor hasznos, ha az oldal betöltése után néhány másodperccel szükség van egy erőforrásra – és fel szeretné gyorsítani a folyamatot.

A böngésző a betöltés után nem csinál semmit az erőforrással. A parancsfájlok nem hajtódnak végre, a stíluslapok nem kerülnek alkalmazásra. Az erőforrás egyszerűen gyorsítótárba kerül, és kérésre azonnal elérhetővé válik.

szintaxis

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

href a letölteni kívánt erőforrásra mutat.

as bármi lehet, ami letölthető a böngészőből:

  • style stíluslapokhoz,
  • script forgatókönyvekhez,
  • font betűtípusokhoz,
  • fetch használatával betöltött erőforrásokhoz fetch() vagy XMLHttpRequest,
  • lásd a teljes listát az MDN-en.

Fontos az attribútum megadása as – ez segít a böngészőnek a letöltések megfelelő rangsorolásában és ütemezésében.

Mikor kell használni?

Használja az előtöltést, ha az erőforrásra a közeljövőben szükség lesz. Például:

  • Nem szabványos betűtípusok külső fájlból: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Alapértelmezésben comic-sans.woff2 csak a letöltés és elemzés után indul el index.css. A hosszú várakozás elkerülése érdekében a betűtípust korábban letöltheti <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Ha a megközelítés szerint különválasztja stílusait Kritikus CSS két részre, kritikus (azonnali megjelenítéshez) és nem kritikus részre: 
    <style>
/* Inlined critical styles */
</style>

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

    Ezzel a megközelítéssel a nem kritikus stílusok csak akkor indulnak el, amikor a JavaScript fut, ami a megjelenítés után néhány másodperccel megtörténhet. Ahelyett, hogy várna a JS használatára <link rel= "preload">a letöltés korábbi megkezdéséhez:

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

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

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

Ne használja túl az előtöltést. Ha mindent sorban betölt, az oldal nem fog varázsütésre felgyorsulni, ellenkezőleg, megakadályozza, hogy a böngésző megfelelően megtervezze a munkáját.

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

Részletek

Ez egy kötelező címke a böngészőnek kell végrehajtania (ha támogatja), ellentétben az összes többi címkével előtöltéssel kapcsolatos. A böngészőnek le kell töltenie a pontban megadott erőforrást <link rel="preload">. Más esetekben figyelmen kívül hagyhatja az előtöltést, például ha lassú kapcsolaton fut.

Prioritások. A böngészők általában különböző prioritásokat rendelnek a különböző erőforrásokhoz (stílusok, szkriptek, betűtípusok stb.), hogy először a legfontosabb erőforrásokat töltsék be. Ebben az esetben a böngésző attribútum alapján határozza meg a prioritást as. Chrome böngésző esetén megnézheti teljes prioritási táblázat.

Előtöltés, előhívás és egyéb címkék

előzetes letöltési

<link rel= "prefetch"> megkéri a böngészőt, hogy töltsön le és gyorsítótárazzon egy erőforrást (például egy szkriptet vagy stíluslapot) a háttérben. A betöltés alacsony prioritás mellett történik, így nem zavarja a fontosabb erőforrásokat. Ez akkor hasznos, ha az erőforrásra a következő oldalon van szükség, és előre gyorsítótárba szeretné helyezni.

Itt sem csinál semmit a böngésző az erőforrással a betöltés után. A parancsfájlok nem hajtódnak végre, a stíluslapok nem kerülnek alkalmazásra. Az erőforrás egyszerűen gyorsítótárba kerül, és kérésre azonnal elérhetővé válik.

szintaxis

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

href a letölteni kívánt erőforrásra mutat.

as bármi lehet, ami letölthető a böngészőből:

  • style stíluslapokhoz,
  • script forgatókönyvekhez,
  • font betűtípusokhoz,
  • fetch használatával betöltött erőforrásokhoz fetch() vagy XMLHttpRequest,
  • lásd a teljes listát az MDN-en.

Fontos az attribútum megadása as - ez segít a böngészőnek a letöltések helyes sorrendjében és ütemezésében.

Mikor kell használni?

Erőforrások betöltése más oldalakról, ha egy másik oldalról származó erőforrásra van szüksége, és előre szeretné betölteni azt, hogy felgyorsítsa az oldal megjelenítését. Például:

  • Van egy online áruháza, és a felhasználók 40%-a elhagyja a főoldalt a termékoldalért. Használat <link rel= "prefetch">, CSS- és JS-fájlok betöltése a termékoldalak megjelenítéséhez.
  • Egyoldalas alkalmazásod van, és a különböző oldalak különböző csomagokat töltenek be. Amikor egy felhasználó meglátogat egy oldalt, az összes olyan oldal csomagja, amelyre hivatkozik, előre betölthető.

Valószínű, hogy ez a címke bármilyen mértékben biztonságosan használható.. A böngészők általában a legalacsonyabb prioritással ütemezik az előzetes letöltést, így ez senkit sem zavar. Ne feledje, hogy felemészti a felhasználói forgalmat, ami pénzbe kerülhet.

Nem sürgős kérésekre. Ne használja <link rel= "prefetch">, amikor néhány másodpercen belül szükség van az erőforrásra. Ebben az esetben használja <link rel= "preload">.

Részletek

Opcionális címke. A böngészőnek nem kell követnie ezt az utasítást, figyelmen kívül hagyhatja azt például lassú kapcsolat esetén.

Prioritás a Chrome-ban. Chrome-ban <link rel= "prefetch"> általában minimális prioritással hajtják végre (lásd teljes prioritási táblázat), vagyis minden más betöltése után.

előcsatlakozás

<link rel= "preconnect"> felkéri a böngészőt, hogy előre csatlakozzon a tartományhoz, ha a jövőben fel akarja gyorsítani a kapcsolat beállítását.

A böngészőnek kapcsolatot kell létesítenie, ha új, harmadik féltől származó tartományból kér le erőforrásokat. Például, ha betölti a Google Fonts-t, React betűtípusokat egy CDN-ről, vagy JSON-választ kér egy API-szervertől.

Az új kapcsolat létrehozása általában néhány száz milliszekundumot vesz igénybe. Egyszer megtörténik, de még időbe telik. Ha előre létrehozta a kapcsolatot, időt takarít meg, és gyorsabban tölti le az erőforrásokat erről a tartományról.

szintaxis

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

href azt a tartománynevet jelzi, amelynek az IP-címét meg szeretné határozni. Előtaggal adható meg (https://domain.com) vagy anélkül (//domain.com).

Mikor kell használni?

Használja azokat a domaineket, amelyekre hamarosan szükség lesz egy fontos stílus, szkript vagy kép letöltéséhez onnan, de még nem ismeri az erőforrás URL-jét. Például:

  • Az alkalmazás a következő helyen található: my-app.com és AJAX kéréseket küld a api.my-app.com: A konkrét lekérdezéseket nem tudod előre, mert dinamikusan készülnek JS-ből. Itt teljesen helyénvaló egy címkét használni a domainhez való előzetes csatlakozáshoz.
  • Az alkalmazás a következő helyen található: my-app.com és a Google Fonts-ot használja. A letöltés két lépésben történik: először a CSS-fájl letöltése a tartományból fonts.googleapis.com, akkor ez a fájl betűtípusokat kér a következővel: fonts.gstatic.com. Nem tudhatja, hogy melyik betűtípus fájlok származnak fonts.gstatic.com a CSS-fájl betöltéséig lesz szüksége, így csak előzetes kapcsolatot tudunk létrehozni.

Használja ezt a címkét harmadik féltől származó szkriptek vagy stílusok felgyorsításához előre kialakított kapcsolat miatt.

Ne használja túl. A kapcsolat létrehozása és fenntartása költséges művelet mind a kliens, mind a szerver számára. Ezt a címkét legfeljebb 4-6 domainhez használja.

Részletek

Opcionális címke. A böngészőnek nem kell követnie ezt az utasítást, és figyelmen kívül hagyhatja azt például, ha már sok kapcsolat jött létre, vagy más esetekben.

Mit tartalmaz a csatlakozási folyamat?. Az egyes webhelyekhez való csatlakozáshoz a böngészőnek a következőket kell tennie:

  • DNS felbontás. Keresse meg a szerver IP-címét (216.58.215.78) a megadott domain névhez (google.com).
  • TCP kézfogás. Csomagok cseréje (kliens → szerver → kliens), hogy TCP-kapcsolatot kezdeményezzen a szerverrel.
  • TLS kézfogás (csak HTTPS-webhelyek). Két fordulós csomagcsere (kliens → szerver → kliens → szerver → kliens) a biztonságos TLS munkamenet kezdeményezéséhez.

Megjegyzés: A HTTP/3 javítja és felgyorsítja a kézfogási mechanizmust, de ez még messze van.

dns-prefetch

<link rel= "dns-prefetch"> felkéri a böngészőt, hogy előzetesen hajtsa végre a DNS-feloldást a tartományhoz, ha hamarosan csatlakozik hozzá, és fel szeretné gyorsítani a kezdeti kapcsolatot.

A böngészőnek meg kell határoznia a tartomány IP-címét, ha új, harmadik féltől származó tartományból szeretne lekérni bármilyen erőforrást. Például Google Fonts betöltése, React betűtípusok CDN-ről vagy JSON-válasz kérése egy API-szervertől.

Minden új tartomány esetében a DNS-rekord feloldása általában 20-120 ms-ot vesz igénybe. Ez csak az első erőforrás betöltését érinti egy adott tartományból, de továbbra is késleltetést okoz. Ha előre elvégezzük a DNS-feloldást, időt takarítunk meg, és gyorsabban töltjük be az erőforrást.

szintaxis

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

href azt a tartománynevet jelzi, amelynek az IP-címét be szeretné állítani. Előtaggal adható meg (https://domain.com) vagy anélkül (//domain.com).

Mikor kell használni?

Használja azokat a domaineket, amelyekre hamarosan szükség lesz hogy onnan olyan forrásokat töltsön le, amelyekről a böngésző nem tud előre. Például:

  • Az alkalmazás a következő helyen található: my-app.com és AJAX kéréseket küld a api.my-app.com: A konkrét lekérdezéseket nem tudod előre, mert dinamikusan készülnek JS-ből. Itt teljesen helyénvaló egy címkét használni a domainhez való előzetes csatlakozáshoz.
  • Az alkalmazás a következő helyen található: my-app.com, és a Google Fonts szolgáltatást használja. A letöltés két lépésben történik: először a CSS-fájl letöltése a tartományból fonts.googleapis.com, akkor ez a fájl betűtípusokat kér a következővel: fonts.gstatic.com. Nem tudhatja, hogy melyik betűtípus fájlok származnak fonts.gstatic.com a CSS fájl betöltéséig lesz rá szüksége, így csak előzetes kapcsolatot tudunk létrehozni.

Használja ezt a címkét harmadik féltől származó szkriptek vagy stílusok felgyorsításához előre kialakított kapcsolat miatt.

Kérjük, vegye figyelembe a hasonló jellemzőket <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Általában nincs értelme együtt használni őket egy domainhez: <link rel= "preconnect"> már tartalmazza <link rel= "dns-prefetch"/> és még sok más. Ez két esetben indokolható:

  • Támogatni szeretné a régebbi böngészőket?. <link rel= "dns-prefetch" /> támogatta IE10 és Safari 5 óta. <link rel= "preconnect"> egy ideig támogatott volt a Chrome-ban és a Firefoxban, de csak a 11.1-ben és a Safariban adták hozzá még mindig nem támogatja az IE/Edge. Ha támogatnia kell ezeket a böngészőket, használja <link rel= "dns-prefetch" /> tartalék opcióként <link rel= "preconnect">.
  • Több mint 4-6 domainhez szeretné felgyorsítani a kapcsolatot. Címke <link rel= "preconnect"> 4-6 tartománynál nem ajánlott használni, 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

Opcionális címke. A böngészőnek nem kell követnie ezt az utasítást, így előfordulhat, hogy nem hajt végre DNS-feloldást, például ha sok ilyen címke van az oldalon, vagy más esetben.

Mi az a DNS. Az interneten minden szervernek egyedi IP-címe van, ami így néz ki 216.58.215.78. A webhely nevét általában a böngésző címsorába írják be (pl. google.com), és a DNS (Domain Name System) szerverek egyeztetik a szerver IP-címével (216.58.215.78).

Az IP-cím meghatározásához a böngészőnek le kell kérdeznie a DNS-kiszolgálót. 20–120 ms-ot vesz igénybe, ha új, harmadik féltől származó tartományhoz csatlakozik.

A DNS gyorsítótárban van, bár nem túl megbízhatóan. Egyes operációs rendszerek és böngészők gyorsítótárazzák a DNS-lekérdezéseket: ezzel időt takaríthat meg az ismételt lekérdezéseknél, de a gyorsítótárazásban nem lehet megbízni. Linuxon általában egyáltalán nem működik. A Chrome rendelkezik DNS-gyorsítótárral, de csak egy percig tart. A Windows öt napig gyorsítótárazza a DNS-válaszokat.

előrenderelés

<link rel= "prerender"> kéri a böngészőt, hogy töltse le az URL-t, és jelenítse meg egy láthatatlan lapon. Amikor a felhasználó rákattint a hivatkozásra, az oldalnak azonnal meg kell jelennie. Ez akkor hasznos, ha biztos abban, hogy a felhasználó felkeres egy bizonyos oldalt, és fel akarja gyorsítani annak megjelenítését.

A címke kivételes hatékonysága ellenére (vagy éppen ezért) 2019-ben <link rel= "prerender"> rosszul támogatott a főbb böngészőkben. További részletek megtekintése. alatt.

szintaxis

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

href arra az URL-re mutat, amelynek megjelenítését a háttérben el szeretné kezdeni.

Mikor kell használni?

Amikor valóban biztos abban, hogy a felhasználó egy bizonyos oldalra fog felmenni. Ha van egy „alagútja”, amelyen keresztül az A oldal látogatóinak 70%-a a B oldalra jut, akkor <link rel= "prerender"> oldalon található B oldal nagyon gyorsan megjeleníthető.

Ne használja túl. Az előmegjelenítés rendkívül drága a sávszélesség és a memória tekintetében. Ne használja <link rel= "prerender"> egynél több oldalra.

Részletek

Opcionális címke. A böngészőnek nem kell követnie ezt az utasítást, és figyelmen kívül hagyhatja azt például lassú kapcsolat esetén vagy ha nincs elég szabad memória.

A memória megtakarítása érdekében A Chrome nem végez teljes megjelenítéstÉs csak a NoState előtöltése. Ez azt jelenti, hogy a Chrome betölti az oldalt és annak összes erőforrását, de nem jeleníti meg és nem hajtja végre a JavaScriptet.

A Firefox és a Safari egyáltalán nem támogatja ezt a címkét. Ez nem sérti a specifikációt, mivel a böngészőknek nem kell követniük ezt az utasítást; de mégis szomorú. Megvalósítási hiba A Firefox hét éve működik. A jelentések szerint a Safari sem támogatja ezt a címkét.

Összegzés

Használat:

  • <link rel= "preload"> - amikor néhány másodpercen belül erőforrásra van szüksége
  • <link rel= "prefetch"> - amikor szüksége van a következő oldalon található forrásra
  • <link rel= "preconnect"> - ha tudja, hogy hamarosan szüksége lesz egy erőforrásra, de még nem ismeri a teljes URL-címét
  • <link rel= "dns-prefetch"> - hasonlóan, ha tudja, hogy hamarosan szüksége lesz egy erőforrásra, de még nem ismeri a teljes URL-t (régebbi böngészők esetén)
  • <link rel= "prerender"> — ha biztos abban, hogy a felhasználók fel fognak lépni egy bizonyos oldalra, és fel akarja gyorsítani annak megjelenítését

Forrás: will.com

Hozzászólás