ProHoster > Blog > administrasie > Voorlaai, haal vooraf en ander etikette

Voorlaai, haal vooraf en ander etikette

Daar is baie maniere om webprestasie te verbeter. Een daarvan is om inhoud vooraf te laai wat later nodig sal wees. CSS-voorverwerking, volledige bladsy-vooraflewering of domeinnaam-resolusie. Ons doen alles vooraf, en vertoon dan onmiddellik die resultaat! Klink gaaf.

Wat nog cooler is, is dat dit baie eenvoudig geïmplementeer is. Vyf etikette gee die blaaier 'n opdrag om voorlopige aksies uit te voer:

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


Kom ons verduidelik kortliks wat hulle doen en wanneer om dit te gebruik.

Spring na: voorbelading · vooraf haal · voorafkoppel · dns-voorafhaal · voorgee

voorbelading

<link rel= "preload"> vertel die blaaier om 'n hulpbron (soos 'n skrif of stylblad) so gou as moontlik te laai en te kas. Dit is nuttig wanneer 'n hulpbron 'n paar sekondes nadat die bladsy gelaai is benodig word - en jy die proses wil bespoedig.

Die blaaier doen niks met die hulpbron nadat dit gelaai is nie. Skripte word nie uitgevoer nie, stylblaaie word nie toegepas nie. Die hulpbron word eenvoudig gekas en onmiddellik op versoek beskikbaar gestel.

sintaksis

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

href wys na die hulpbron wat jy wil aflaai.

as kan enigiets wees wat in die blaaier afgelaai kan word:

  • style vir stylblaaie,
  • script vir skrifte,
  • font vir lettertipes,
  • fetch vir hulpbronne gelaai met behulp van fetch() of XMLHttpRequest,
  • sien volledige lys op MDN.

Dit is belangrik om die eienskap te spesifiseer as – dit help die blaaier om aflaaie behoorlik te prioritiseer en te skeduleer.

Wanneer om te gebruik

Gebruik vooraflaai wanneer die hulpbron in die baie nabye toekoms benodig word. Byvoorbeeld:

  • Nie-standaard fonts vanaf 'n eksterne lêer: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    By verstek comic-sans.woff2 sal eers begin laai nadat dit afgelaai en ontleed is index.css. Om te verhoed dat u so lank wag, kan u die lettertipe vroeër aflaai met behulp van <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • As jy jou style volgens die benadering skei Kritiese CSS in twee dele, krities (vir onmiddellike weergawe) en nie-krities: 
    <style>
/* Inlined critical styles */
</style>

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

    Met hierdie benadering sal nie-kritiese style eers begin laai wanneer JavaScript loop, wat 'n paar sekondes na lewering kan gebeur. In plaas daarvan om te wag JS gebruik <link rel= "preload">om vroeër te begin aflaai:

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

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

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

Moenie vooraflaai te veel gebruik nie. As jy alles in 'n ry laai, sal die werf nie magies versnel nie; inteendeel, dit sal die blaaier verhoed om sy werk korrek te beplan.

Moet nie verwar word met voorafhaal nie. Moenie gebruik nie <link rel= "preload">, as jy nie die hulpbron nodig het onmiddellik nadat die bladsy gelaai is nie. As jy dit later nodig het, byvoorbeeld vir die volgende bladsy, gebruik dan <link rel= "prefetch">.

besonderhede

Dit is 'n vereiste merker om deur die blaaier uitgevoer te word (as dit dit ondersteun), anders as alle ander merkers verband hou met vooraflaai. Die blaaier moet die hulpbron aflaai wat in gespesifiseer is <link rel="preload">. In ander gevalle kan dit vooraflaai ignoreer, byvoorbeeld as dit op 'n stadige verbinding loop.

prioriteite. Blaaiers ken gewoonlik verskillende prioriteite toe aan verskillende hulpbronne (style, skrifte, lettertipes, ens.) om die belangrikste hulpbronne eerste te laai. In hierdie geval bepaal die blaaier prioriteit volgens kenmerk as. Vir Chrome-blaaier kan jy kyk na volle prioriteitstabel.

Voorlaai, haal vooraf en ander etikette

vooraf haal

<link rel= "prefetch"> vra die blaaier om 'n hulpbron (soos 'n skrif of stylblad) op die agtergrond af te laai en te kas. Laai vind plaas met lae prioriteit sodat dit nie inmeng met belangriker hulpbronne nie. Dit is nuttig as die hulpbron op die volgende bladsy benodig word en jy dit vooraf wil kas.

Ook hier doen die blaaier niks met die hulpbron nadat dit gelaai is nie. Skripte word nie uitgevoer nie, stylblaaie word nie toegepas nie. Die hulpbron word eenvoudig gekas en onmiddellik op versoek beskikbaar gestel.

sintaksis

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

href wys na die hulpbron wat jy wil aflaai.

as kan enigiets wees wat in die blaaier afgelaai kan word:

  • style vir stylblaaie,
  • script vir skrifte,
  • font vir lettertipes,
  • fetch vir hulpbronne gelaai met behulp van fetch() of XMLHttpRequest,
  • sien volledige lys op MDN.

Dit is belangrik om die eienskap te spesifiseer as - dit help die blaaier om aflaaie korrek te prioritiseer en te skeduleer.

Wanneer om te gebruik

Om hulpbronne van ander bladsye af te laai, as jy 'n hulpbron van 'n ander bladsy nodig het, en jy wil dit vooraf laai om dan die weergawe van daardie bladsy te bespoedig. Byvoorbeeld:

  • Jy het 'n aanlyn winkel, en 40% van gebruikers verlaat die tuisblad vir die produkbladsy. Gebruik <link rel= "prefetch">, laai CSS- en JS-lêers om produkbladsye weer te gee.
  • Jy het 'n enkele bladsy-toepassing, en verskillende bladsye laai verskillende pakkette. Wanneer 'n gebruiker 'n bladsy besoek, kan pakkette vir al die bladsye waarna dit skakel vooraf gelaai word.

Dit is waarskynlik dat hierdie merker in enige mate veilig gebruik kan word.. Blaaiers skeduleer gewoonlik voorafhaal met die laagste prioriteit, so dit pla niemand nie. Hou net in gedagte dat dit gebruikersverkeer verbruik, wat geld kan kos.

Nie vir dringende versoeke nie. Moenie gebruik nie <link rel= "prefetch">, wanneer die hulpbron binne 'n paar sekondes benodig word. In hierdie geval, gebruik <link rel= "preload">.

besonderhede

Opsionele etiket. Die blaaier hoef nie hierdie instruksie te volg nie; dit kan dit byvoorbeeld ignoreer op 'n stadige verbinding.

Prioriteit in Chrome. In Chrome <link rel= "prefetch"> word gewoonlik met minimum prioriteit uitgevoer (sien volle prioriteitstabel), dit wil sê nadat alles anders gelaai is.

voorafkoppel

<link rel= "preconnect"> vra die blaaier om vooraf aan die domein te koppel wanneer jy verbindingsopstelling in die toekoms wil bespoedig.

Die blaaier moet 'n verbinding vestig as dit enige hulpbronne van 'n nuwe derdeparty-domein af haal. Byvoorbeeld, as dit Google Fonts laai, React-fonts vanaf 'n CDN, of 'n JSON-reaksie van 'n API-bediener versoek.

Om 'n nuwe verbinding te vestig, neem gewoonlik 'n paar honderd millisekondes. Dit word een keer gedoen, maar neem steeds tyd. As jy vooraf 'n verbinding tot stand gebring het, sal jy tyd bespaar en hulpbronne vinniger van hierdie domein aflaai.

sintaksis

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

href dui die domeinnaam aan waarvoor u die IP-adres wil bepaal. Kan gespesifiseer word met 'n voorvoegsel (https://domain.com) of daarsonder (//domain.com).

Wanneer om te gebruik

Gebruik vir domeine wat binnekort benodig word om 'n belangrike styl, skrif of prent daarvandaan af te laai, maar jy ken nog nie die hulpbron-URL nie. Byvoorbeeld:

  • Jou aansoek word gehuisves op my-app.com en maak AJAX versoeke om api.my-app.com: Jy ken nie die spesifieke navrae vooraf nie, want dit word dinamies vanaf JS gemaak. Hier is dit heel gepas om 'n merker te gebruik om vooraf aan die domein te koppel.
  • Jou aansoek word gehuisves op my-app.com en gebruik Google Fonts. Hulle word in twee stappe afgelaai: eerstens word die CSS-lêer vanaf die domein afgelaai fonts.googleapis.com, dan versoek hierdie lêer lettertipes met fonts.gstatic.com. Jy kan nie weet watter spesifieke fontlêers vandaan kom nie fonts.gstatic.com jy sal nodig hê totdat jy die CSS-lêer laai, dus kan ons net vooraf 'n voorlopige verbinding maak.

Gebruik hierdie merker om 'n derdeparty-skrif of styl 'n bietjie te bespoedig as gevolg van voorafbepaalde verbinding.

Moenie te veel gebruik nie. Die vestiging en instandhouding van 'n verbinding is 'n duur operasie vir beide die kliënt en die bediener. Gebruik hierdie merker vir 'n maksimum van 4-6 domeine.

besonderhede

Opsionele etiket. Die blaaier hoef nie hierdie instruksie te volg nie en kan dit ignoreer, byvoorbeeld as baie verbindings reeds tot stand gebring is of in 'n ander geval.

Wat sluit die verbindingsproses in?. Om aan elke webwerf te koppel, moet die blaaier die volgende doen:

  • DNS-resolusie. Vind bediener IP-adres (216.58.215.78) vir die gespesifiseerde domeinnaam (google.com).
  • TCP-handdruk. Ruil pakkies uit (kliënt → bediener → kliënt) om 'n TCP-verbinding met die bediener te begin.
  • TLS-handdruk (slegs HTTPS-werwe). Twee rondes van pakkie-uitruiling (kliënt → bediener → kliënt → bediener → kliënt) om 'n veilige TLS-sessie te begin.

Let wel: HTTP/3 sal die handdrukmeganisme verbeter en versnel, maar dit is nog ver weg.

dns-voorafhaal

<link rel= "dns-prefetch"> vra die blaaier om vooraf DNS-resolusie vir die domein uit te voer as jy binnekort daaraan sal koppel en die aanvanklike verbinding wil bespoedig.

Die blaaier moet die domein se IP-adres bepaal as dit enige hulpbronne van 'n nuwe derdeparty-domein sal haal. Byvoorbeeld, laai Google Fonts, React-fonts vanaf 'n CDN, of versoek 'n JSON-reaksie vanaf 'n API-bediener.

Vir elke nuwe domein neem DNS-rekordresolusie gewoonlik ongeveer 20-120 ms. Dit beïnvloed slegs die laai van die eerste hulpbron vanaf 'n gegewe domein, maar stel steeds 'n vertraging in. As ons vooraf DNS-resolusie uitvoer, sal ons tyd bespaar en die hulpbron vinniger laai.

sintaksis

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

href dui die domeinnaam aan waarvoor u die IP-adres wil stel. Kan gespesifiseer word met 'n voorvoegsel (https://domain.com) of daarsonder (//domain.com).

Wanneer om te gebruik

Gebruik vir domeine wat binnekort benodig word om hulpbronne daarvandaan af te laai waarvan die blaaier nie vooraf weet nie. Byvoorbeeld:

  • Jou aansoek word gehuisves op my-app.com en maak AJAX versoeke om api.my-app.com: Jy ken nie die spesifieke navrae vooraf nie, want dit word dinamies vanaf JS gemaak. Hier is dit heel gepas om 'n merker te gebruik om vooraf aan die domein te koppel.
  • Jou aansoek word gehuisves op my-app.com, en gebruik Google Fonts. Hulle word in twee stappe afgelaai: eerstens word die CSS-lêer vanaf die domein afgelaai fonts.googleapis.com, dan versoek hierdie lêer lettertipes met fonts.gstatic.com. Jy kan nie weet watter spesifieke fontlêers vandaan kom nie fonts.gstatic.com jy sal dit nodig hê totdat jy die CSS-lêer laai, so ons kan net vooraf 'n voorlopige verbinding maak.

Gebruik hierdie merker om 'n derdeparty-skrif of styl 'n bietjie te bespoedig as gevolg van voorafbepaalde verbinding.

Let asseblief op soortgelyke eienskappe as <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Dit maak gewoonlik nie sin om hulle saam vir een domein te gebruik nie: <link rel= "preconnect"> reeds insluit <link rel= "dns-prefetch"/> en baie meer. Dit kan in twee gevalle geregverdig word:

  • Wil jy ouer blaaiers ondersteun?. <link rel= "dns-prefetch" /> ondersteun deur sedert IE10 en Safari 5. <link rel= "preconnect"> is vir 'n rukkie in Chrome en Firefox ondersteun, maar is eers by Safari gevoeg in 11.1 en steeds nie in IE/Edge ondersteun nie. As jy hierdie blaaiers moet ondersteun, gebruik <link rel= "dns-prefetch" /> as 'n rugsteunopsie vir <link rel= "preconnect">.
  • U wil verbindings met meer as 4-6 domeine bespoedig. Merk <link rel= "preconnect"> Dit word nie aanbeveel om met meer as 4-6 domeine te gebruik nie, aangesien die vestiging en instandhouding van 'n verbinding 'n duur operasie is. <link rel= "dns-prefetch" /> verbruik minder hulpbronne, so gebruik dit indien nodig.

besonderhede

Opsionele etiket. Daar word nie van die blaaier vereis om hierdie instruksie te volg nie, so dit sal moontlik nie DNS-resolusie uitvoer nie, byvoorbeeld as daar baie sulke merkers op die bladsy is of in 'n ander geval.

Wat is DNS. Elke bediener op die internet het 'n unieke IP-adres, wat lyk 216.58.215.78. Die naam van die webwerf word gewoonlik in die adresbalk van die blaaier ingevoer (byvoorbeeld, google.com), en DNS (Domain Name System)-bedieners pas dit by die bediener se IP-adres (216.58.215.78).

Om 'n IP-adres te bepaal, moet die blaaier die DNS-bediener navraag doen. Dit neem 20−120 ms wanneer u aan 'n nuwe derdeparty-domein koppel.

DNS is gekas, hoewel nie baie betroubaar nie. Sommige bedryfstelsels en blaaiers kas DNS-navrae: dit sal tyd bespaar op herhaalde navrae, maar daar kan nie op cache staatgemaak word nie. Op Linux werk dit gewoonlik glad nie. Chrome het 'n DNS-kas, maar dit duur net 'n minuut. Windows kas DNS-antwoorde vir vyf dae.

voorgee

<link rel= "prerender"> vra die blaaier om die URL af te laai en dit in 'n onsigbare oortjie te vertoon. Wanneer die gebruiker op die skakel klik, moet die bladsy onmiddellik vertoon word. Dit is nuttig as jy seker is dat die gebruiker 'n sekere bladsy sal besoek en die vertoning daarvan wil bespoedig.

Ten spyte van (of as gevolg van) die uitsonderlike doeltreffendheid van hierdie merker, in 2019 <link rel= "prerender"> swak ondersteun in groot blaaiers. Sien meer besonderhede. onder.

sintaksis

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

href wys na die URL wat jy in die agtergrond wil begin weergee.

Wanneer om te gebruik

Wanneer jy regtig seker is dat die gebruiker na 'n sekere bladsy sal gaan. As jy 'n "tonnel" het waardeur 70% van besoekers aan bladsy A na bladsy B gaan, dan <link rel= "prerender"> op bladsy A sal help om bladsy B baie vinnig te vertoon.

Moenie te veel gebruik nie. Vooraflewering is uiters duur in terme van bandwydte en geheue. Moenie gebruik nie <link rel= "prerender"> vir meer as een bladsy.

besonderhede

Opsionele etiket. Die blaaier hoef nie hierdie instruksie te volg nie en kan dit ignoreer, byvoorbeeld, op 'n stadige verbinding of wanneer daar onvoldoende vrye geheue is.

Om geheue te bespaar Chrome doen nie volledige weergawe nieEn vooraflaai slegs NoState. Dit beteken dat Chrome die bladsy en al sy hulpbronne laai, maar nie JavaScript weergee of uitvoer nie.

Firefox en Safari ondersteun glad nie hierdie merker nie. Dit skend nie die spesifikasie nie, aangesien blaaiers nie verplig word om hierdie instruksie te volg nie; maar steeds hartseer. Implementeringsfout Firefox is al sewe jaar oop. Daar is berigte dat Safari ondersteun ook nie hierdie merker nie.

Opsomming

Gebruik:

  • <link rel= "preload"> - wanneer u 'n hulpbron binne 'n paar sekondes benodig
  • <link rel= "prefetch"> - wanneer jy die hulpbron op die volgende bladsy nodig het
  • <link rel= "preconnect"> - wanneer jy weet dat jy binnekort 'n hulpbron sal benodig, maar jy ken nog nie die volledige URL daarvan nie
  • <link rel= "dns-prefetch"> - net so, wanneer jy weet dat jy binnekort 'n hulpbron sal benodig, maar jy ken nog nie die volledige URL daarvan nie (vir ouer blaaiers)
  • <link rel= "prerender"> - wanneer jy seker is dat gebruikers na 'n sekere bladsy sal gaan, en jy wil die vertoning daarvan versnel

Bron: will.com

Voeg 'n opmerking