ProHoster > Blog > Stjórnsýsla > Forhlaða, forsækja og önnur merki

Forhlaða, forsækja og önnur merki

Það er margar leiðir til að bæta árangur vefsins. Ein þeirra er að forhlaða efni sem þarf síðar. CSS forvinnsla, forútgáfa á heilsíðu eða upplausn lénsheita. Við gerum allt fyrirfram og birtum síðan niðurstöðuna samstundis! Hljómar flott.

Það sem er enn svalara er að það er mjög einfaldlega útfært. Fimm merki gefðu vafranum skipun til að framkvæma bráðabirgðaaðgerðir:

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


Við skulum útskýra stuttlega hvað þau gera og hvenær á að nota þau.

Hoppa á: Forhlaða · forsala · fortengja · dns-forsækja · prerender

Forhlaða

<link rel= "preload"> segir vafranum að hlaða og vista tilföng (svo sem skriftu eða stílblað) eins fljótt og auðið er. Þetta er gagnlegt þegar auðlind er þörf nokkrum sekúndum eftir að síðan hleðst - og þú vilt flýta fyrir ferlinu.

Vafrinn gerir ekkert við auðlindina eftir hleðslu. Forskriftir eru ekki keyrðar, stílblöð eru ekki notuð. Tilfangið er einfaldlega sett í skyndiminni og strax gert aðgengilegt sé þess óskað.

Setningafræði

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

href bendir á auðlindina sem þú vilt hlaða niður.

as getur verið hvað sem er sem hægt er að hlaða niður í vafranum:

  • style fyrir stílblöð,
  • script fyrir handrit,
  • font fyrir leturgerðir,
  • fetch fyrir auðlindir hlaðnar með því að nota fetch() eða XMLHttpRequest,
  • sjá allan lista á MDN.

Það er mikilvægt að tilgreina eiginleikann as - þetta hjálpar vafranum að forgangsraða rétt og skipuleggja niðurhal.

Hvenær á að nota

Notaðu forhleðslu þegar þörf er á auðlindinni í mjög náinni framtíð. Til dæmis:

  • Óstöðluð leturgerðir úr ytri skrá: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Sjálfgefið comic-sans.woff2 mun byrja að hlaða aðeins eftir niðurhal og þáttun index.css. Til að forðast að bíða svona lengi geturðu hlaðið niður letrinu fyrr með því að nota <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Ef þú aðskilur stíla þína í samræmi við nálgunina Gagnrýnin CSS í tvo hluta, mikilvæga (til að birta strax) og ekki mikilvæga: 
    <style>
/* Inlined critical styles */
</style>

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

    Með þessari nálgun byrja ekki mikilvægir stílar aðeins að hlaðast þegar JavaScript keyrir, sem getur gerst nokkrum sekúndum eftir flutning. Í stað þess að bíða JS nota <link rel= "preload">til að byrja að hlaða niður fyrr:

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

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

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

Ekki ofnota forhleðslu. Ef þú hleður öllu í röð mun vefsíðan ekki hraða töfrandi, þvert á móti mun það koma í veg fyrir að vafrinn skipuleggi vinnu sína rétt.

Ekki má rugla saman við forsækni. Ekki nota <link rel= "preload">, ef þú þarft ekki auðlindina strax eftir að síðan er hlaðið. Ef þú þarft það síðar, til dæmis fyrir næstu síðu, notaðu þá <link rel= "prefetch">.

Upplýsingar

Þetta er áskilið merki til að keyra af vafranum (ef hann styður það), ólíkt öllum öðrum merkjum sem tengist forhleðslu. Vafrinn verður að hlaða niður auðlindinni sem tilgreint er í <link rel="preload">. Í öðrum tilvikum getur það hunsað forhleðslu, til dæmis ef það er í gangi á hægfara tengingu.

Forgangsröðun. Vafrar setja venjulega mismunandi forgangsröðun á mismunandi auðlindir (stílar, forskriftir, leturgerðir osfrv.) til að hlaða mikilvægustu auðlindunum fyrst. Í þessu tilviki ákvarðar vafrinn forgang eftir eiginleikum as. Fyrir Chrome vafra sem þú getur skoðað fulla forgangstöflu.

Forhlaða, forsækja og önnur merki

forsala

<link rel= "prefetch"> biður vafrann um að hlaða niður og vista tilföng (svo sem skriftu eða stílblað) í bakgrunni. Hleðsla á sér stað með lágum forgangi svo það truflar ekki mikilvægari auðlindir. Þetta er gagnlegt ef tilföngsins er þörf á næstu síðu og þú vilt vista það fyrirfram.

Hér líka gerir vafrinn ekkert við auðlindina eftir hleðslu. Forskriftir eru ekki keyrðar, stílblöð eru ekki notuð. Tilfangið er einfaldlega sett í skyndiminni og strax gert aðgengilegt sé þess óskað.

Setningafræði

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

href bendir á auðlindina sem þú vilt hlaða niður.

as getur verið hvað sem er sem hægt er að hlaða niður í vafranum:

  • style fyrir stílblöð,
  • script fyrir handrit,
  • font fyrir leturgerðir,
  • fetch fyrir auðlindir hlaðnar með því að nota fetch() eða XMLHttpRequest,
  • sjá allan lista á MDN.

Það er mikilvægt að tilgreina eiginleikann as - þetta hjálpar vafranum að forgangsraða rétt og skipuleggja niðurhal.

Hvenær á að nota

Til að hlaða tilföngum frá öðrum síðum, ef þú þarft tilföng frá annarri síðu og þú vilt forhlaða því til að flýta fyrir flutningi þeirrar síðu. Til dæmis:

  • Þú ert með netverslun og 40% notenda yfirgefa heimasíðuna fyrir vörusíðuna. Notaðu <link rel= "prefetch">, hleður CSS og JS skrám til að birta vörusíður.
  • Þú ert með forrit á einni síðu og mismunandi síður hlaða mismunandi pakka. Þegar notandi heimsækir síðu er hægt að forhlaða pakka fyrir allar síðurnar sem hann tengist á.

Það er líklegt að hægt sé að nota þetta merki á öruggan hátt að einhverju marki.. Vafrar skipuleggja forsöfnun venjulega með lægsta forgang, svo það truflar engan. Hafðu bara í huga að það eyðir notendaumferð, sem getur kostað peninga.

Ekki fyrir brýnar beiðnir. Ekki nota <link rel= "prefetch">, þegar auðlindarinnar er þörf eftir nokkrar sekúndur. Í þessu tilfelli, notaðu <link rel= "preload">.

Upplýsingar

Valfrjálst merki. Vafrinn þarf ekki að fylgja þessum leiðbeiningum; hann gæti hunsað hana, til dæmis í hægri tengingu.

Forgangur í Chrome. Í Chrome <link rel= "prefetch"> venjulega framkvæmt með lágmarks forgangi (sjá fulla forgangstöflu), það er, eftir að hafa hlaðið öllu öðru.

fortengja

<link rel= "preconnect"> biður vafrann um að tengjast léninu fyrirfram þegar þú vilt flýta fyrir uppsetningu tengingar í framtíðinni.

Vafrinn verður að koma á tengingu ef hann sækir tilföng frá nýju léni þriðja aðila. Til dæmis, ef það hleður Google leturgerð, React leturgerð frá CDN, eða biður um JSON svar frá API netþjóni.

Að koma á nýrri tengingu tekur venjulega nokkur hundruð millisekúndur. Það er gert einu sinni, en tekur samt tíma. Ef þú hefur komið á tengingu fyrirfram muntu spara tíma og hlaða niður tilföngum frá þessu léni hraðar.

Setningafræði

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

href gefur til kynna lénið sem þú vilt ákvarða IP tölu fyrir. Hægt að tilgreina með forskeyti (https://domain.com) eða án þess (//domain.com).

Hvenær á að nota

Notaðu fyrir lén sem þarf fljótlega til að hlaða niður mikilvægum stíl, handriti eða mynd þaðan, en þú veist ekki slóð auðlindarinnar ennþá. Til dæmis:

  • Forritið þitt er hýst á my-app.com og gerir AJAX beiðnir til api.my-app.com: Þú þekkir ekki sérstakar fyrirspurnir fyrirfram vegna þess að þær eru gerðar á kraftmikinn hátt frá JS. Hér er alveg viðeigandi að nota merki til að fortengja við lénið.
  • Forritið þitt er hýst á my-app.com og notar Google leturgerðir. Þeim er hlaðið niður í tveimur skrefum: Í fyrsta lagi er CSS skránni hlaðið niður af léninu fonts.googleapis.com, þá biður þessi skrá um leturgerðir með fonts.gstatic.com. Þú getur ekki vitað hvaða tilteknar leturskrár eru frá fonts.gstatic.com þú þarft þangað til þú hleður CSS skránni, svo við getum aðeins gert bráðabirgðatengingu fyrirfram.

Notaðu þetta merki til að flýta fyrir einhverju þriðja aðila handriti eða stíla aðeins vegna fyrirfram staðfestrar tengingar.

Ekki ofnota. Að koma á og viðhalda tengingu er dýr aðgerð fyrir bæði viðskiptavininn og netþjóninn. Notaðu þetta merki fyrir að hámarki 4-6 lén.

Upplýsingar

Valfrjálst merki. Vafrinn þarf ekki að fylgja þessum leiðbeiningum og gæti hunsað hana, til dæmis ef margar tengingar hafa þegar verið komnar á eða í einhverju öðru tilviki.

Hvað felur tengingarferlið í sér?. Til að tengjast hverri síðu verður vafrinn að gera eftirfarandi:

  • DNS upplausn. Finndu IP tölu netþjóns (216.58.215.78) fyrir tilgreint lén (google.com).
  • TCP handabandi. Skiptu um pakka (viðskiptavinur → miðlari → viðskiptavinur) til að hefja TCP tengingu við netþjóninn.
  • TLS handabandi (aðeins HTTPS síður). Tvær umferðir af pakkaskiptum (viðskiptavinur → þjónn → viðskiptavinur → þjónn → viðskiptavinur) til að hefja örugga TLS lotu.

Athugið: HTTP/3 mun bæta og flýta fyrir handabandi vélbúnaðinum, en það er enn langt í land.

dns-forsækja

<link rel= "dns-prefetch"> biður vafrann um að framkvæma DNS-upplausn fyrir lénið fyrirfram ef þú verður að tengjast því fljótlega og vilt flýta fyrir fyrstu tengingu.

Vafrinn verður að ákvarða IP-tölu lénsins ef hann mun sækja tilföng frá nýju þriðja léni. Til dæmis að hlaða Google leturgerðum, React leturgerðum frá CDN eða biðja um JSON svar frá API netþjóni.

Fyrir hvert nýtt lén tekur DNS-upplausn venjulega um 20-120 ms. Þetta hefur aðeins áhrif á hleðslu fyrstu auðlindarinnar frá tilteknu léni, en leiðir samt til töf. Ef við framkvæmum DNS upplausn fyrirfram munum við spara tíma og hlaða auðlindina hraðar.

Setningafræði

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

href gefur til kynna lénið sem þú vilt stilla IP töluna fyrir. Hægt að tilgreina með forskeyti (https://domain.com) eða án þess (//domain.com).

Hvenær á að nota

Notaðu fyrir lén sem þarf fljótlega að hlaða niður auðlindum þaðan sem vafrinn veit ekki um fyrirfram. Til dæmis:

  • Forritið þitt er hýst á my-app.com og gerir AJAX beiðnir til api.my-app.com: Þú þekkir ekki sérstakar fyrirspurnir fyrirfram vegna þess að þær eru gerðar á kraftmikinn hátt frá JS. Hér er alveg viðeigandi að nota merki til að fortengja við lénið.
  • Forritið þitt er hýst á my-app.com, og notar Google leturgerðir. Þeim er hlaðið niður í tveimur skrefum: Í fyrsta lagi er CSS skránni hlaðið niður af léninu fonts.googleapis.com, þá biður þessi skrá um leturgerðir með fonts.gstatic.com. Þú getur ekki vitað hvaða tilteknar leturskrár eru frá fonts.gstatic.com þú þarft það þar til þú hleður CSS skránni, þannig að við getum aðeins gert bráðabirgðatengingu fyrirfram.

Notaðu þetta merki til að flýta fyrir einhverju þriðja aðila handriti eða stíla aðeins vegna fyrirfram staðfestrar tengingar.

Vinsamlegast athugaðu svipaða eiginleika og <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Það er venjulega ekki skynsamlegt að nota þau saman fyrir eitt lén: <link rel= "preconnect"> felur nú þegar í sér <link rel= "dns-prefetch"/> Og mikið meira. Þetta má réttlæta í tveimur tilvikum:

  • Viltu styðja eldri vafra?. <link rel= "dns-prefetch" /> stutt af síðan IE10 og Safari 5. <link rel= "preconnect"> var stutt um tíma í Chrome og Firefox, en var aðeins bætt við Safari í 11.1 og enn ekki stutt í IE/Edge. Ef þú þarft að styðja þessa vafra skaltu nota <link rel= "dns-prefetch" /> sem varavalkostur fyrir <link rel= "preconnect">.
  • Þú vilt flýta fyrir tengingum við fleiri en 4-6 lén. Merkja <link rel= "preconnect"> Ekki er mælt með því að nota fleiri en 4-6 lén þar sem að koma á og viðhalda tengingu er dýr aðgerð. <link rel= "dns-prefetch" /> eyðir minna fjármagni, svo notaðu það ef þörf krefur.

Upplýsingar

Valfrjálst merki. Vafrinn þarf ekki að fylgja þessum leiðbeiningum, svo hann gæti ekki framkvæmt DNS-upplausn, til dæmis ef það eru mörg slík merki á síðunni eða í einhverju öðru tilviki.

Hvað er DNS. Hver netþjónn á internetinu hefur einstakt IP-tölu, sem lítur út eins og 216.58.215.78. Nafn síðunnar er venjulega slegið inn í veffangastikuna í vafranum (td. google.com), og DNS (Domain Name System) netþjónar passa við IP tölu netþjónsins (216.58.215.78).

Til að ákvarða IP tölu verður vafrinn að spyrjast fyrir um DNS netþjóninn. Það tekur 20–120 ms þegar tengst er við nýtt lén frá þriðja aðila.

DNS er í skyndiminni, þó það sé ekki mjög áreiðanlegt. Sum stýrikerfi og vafrar geyma DNS fyrirspurnir í skyndiminni: þetta mun spara tíma við endurteknar fyrirspurnir, en ekki er hægt að treysta á skyndiminni. Á Linux virkar það yfirleitt alls ekki. Chrome er með DNS skyndiminni en það endist aðeins í eina mínútu. Windows geymir DNS svör í skyndiminni í fimm daga.

prerender

<link rel= "prerender"> biður vafrann um að hlaða niður slóðinni og birta hana á ósýnilegum flipa. Þegar notandi smellir á hlekkinn ætti síðan að birtast strax. Þetta er gagnlegt ef þú ert viss um að notandinn muni heimsækja ákveðna síðu og vilja flýta fyrir birtingu hennar.

Þrátt fyrir (eða vegna) óvenjulegrar virkni þessa merkis, árið 2019 <link rel= "prerender"> illa stutt í helstu vöfrum. Sjá nánari upplýsingar. neðan.

Setningafræði

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

href bendir á slóðina sem þú vilt byrja að birta í bakgrunni.

Hvenær á að nota

Þegar þú ert virkilega viss um að notandinn fari á ákveðna síðu. Ef þú ert með „göng“ þar sem 70% gesta á síðu A fara á síðu B, þá <link rel= "prerender"> á síðu A mun hjálpa til við að birta síðu B mjög fljótt.

Ekki ofnota. Forútgáfa er mjög dýr hvað varðar bandbreidd og minni. Ekki nota <link rel= "prerender"> fyrir fleiri en eina síðu.

Upplýsingar

Valfrjálst merki. Vafrinn þarf ekki að fylgja þessum leiðbeiningum og gæti hunsað hana, til dæmis í hægfara tengingu eða þegar ekki er nægjanlegt laust minni.

Til að spara minni Chrome gerir ekki fulla endurgerðOg aðeins forhlaða NoState. Þetta þýðir að Chrome hleður síðuna og öll tilföng hennar, en gerir ekki eða keyrir JavaScript.

Firefox og Safari styðja alls ekki þetta merki. Þetta brýtur ekki í bága við forskriftina, þar sem vafrar þurfa ekki að fylgja þessum leiðbeiningum; en samt sorglegt. Útfærsluvilla Firefox hefur verið opið í sjö ár. Það eru fregnir af því að Safari styður ekki þetta tag heldur.

Yfirlit

Notaðu:

  • <link rel= "preload"> - þegar þú þarft auðlind á nokkrum sekúndum
  • <link rel= "prefetch"> - þegar þú þarft auðlindina á næstu síðu
  • <link rel= "preconnect"> - þegar þú veist að þú þarft tilföng fljótlega, en þú veist ekki enn fulla vefslóð þess
  • <link rel= "dns-prefetch"> - á sama hátt, þegar þú veist að þú þarft tilföng fljótlega, en þú veist ekki enn fulla vefslóð þess (fyrir eldri vafra)
  • <link rel= "prerender"> — þegar þú ert viss um að notendur fari á ákveðna síðu og þú vilt flýta fyrir birtingu hennar

Heimild: www.habr.com

Bæta við athugasemd