ProHoster > Блог > Gudanarwa > Preload, prefetch da sauran alamun

Preload, prefetch da sauran alamun

Akwai hanyoyi da yawa don inganta aikin gidan yanar gizo. Ɗayan su shine ƙaddamar da abun ciki wanda za a buƙaci daga baya. CSS kafin aiwatarwa, cikakken gabatarwar shafi ko ƙudurin sunan yanki. Muna yin komai a gaba, sannan mu nuna sakamakon nan take! Sauti mai kyau.

Abin da ya fi sanyaya shi ne cewa an aiwatar da shi sosai. Tags biyar ba mai binciken umarni don aiwatar da ayyukan farko:

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


Bari mu ɗan yi bayanin abin da suke yi da lokacin amfani da su.

Tsallaka zuwa: bugu da kari · prefetch · riga-kafi · dns-prefetch · gabatarwa

bugu da kari

<link rel= "preload"> yana gaya wa mai binciken don lodawa da adana kayan aiki (kamar rubutun ko salo) da wuri-wuri. Wannan yana da amfani lokacin da ake buƙatar albarkatun 'yan daƙiƙa kaɗan bayan ɗaukar shafin - kuma kuna son hanzarta aiwatarwa.

Mai binciken ba ya yin komai tare da albarkatun bayan lodawa. Ba a aiwatar da rubutun, ba a amfani da zanen gadon salo. Ana adana albarkatun kawai kuma an samar da su nan da nan akan buƙata.

ginin kalma

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

href nuni ga albarkatun da kake son saukewa.

as na iya zama duk wani abu da za a iya saukewa a cikin burauza:

  • style don zanen gado,
  • script don rubutun,
  • font don fonts,
  • fetch don albarkatun da aka ɗora amfani da su fetch() ko XMLHttpRequest,
  • duba cikakken jerin ku MDN.

Yana da mahimmanci a ƙayyade sifa as – wannan yana taimaka wa mai bincike don ba da fifiko da kuma tsara abubuwan zazzagewa.

Lokacin amfani

Yi amfani da preloading lokacin da ake buƙatar albarkatun nan gaba kaɗan. Misali:

  • Fayil ɗin da ba daidai ba daga fayil na waje: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    da default comic-sans.woff2 za a fara loading ne kawai bayan saukewa da parsing index.css. Don guje wa jira tsawon lokaci, zaku iya zazzage font ɗin a baya ta amfani da <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Idan kun raba salon ku bisa ga hanya Mahimmancin CSS zuwa sassa biyu, masu mahimmanci (don yin gaggawa) kuma maras mahimmanci: 
    <style>
/* Inlined critical styles */
</style>

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

    Tare da wannan hanyar, salo marasa mahimmanci za su fara farawa ne kawai lokacin da JavaScript ke gudana, wanda zai iya faruwa 'yan daƙiƙa kaɗan bayan ƙaddamarwa. Maimakon jira JS amfani <link rel= "preload">don fara saukewa a baya:

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

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

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

Kar a yi amfani da preloading fiye da kima. Idan ka loda duk wani abu a jere, shafin ba zai yi sauri da sihiri ba, akasin haka, zai hana mai bincike tsara aikinsa daidai.

Kada a ruɗe da prefetching. Kada ku yi amfani <link rel= "preload">, idan ba kwa buƙatar albarkatun nan da nan bayan an loda shafin. Idan kuna buƙatar shi daga baya, misali don shafi na gaba, to, yi amfani da shi <link rel= "prefetch">.

Duba cikakkun bayanai

Wannan alama ce da ake buƙata wanda za a kashe shi ta hanyar burauza (idan yana goyon bayansa), sabanin duk sauran tags mai alaka da preloading. Dole ne mai lilo ya sauke albarkatun da aka ƙayyade a ciki <link rel="preload">. A wasu lokuta yana iya yin watsi da ƙaddamarwa da farko, misali idan yana gudana akan jinkirin haɗi.

Abubuwan fifiko. Masu bincike yawanci suna ba da fifiko daban-daban ga albarkatu daban-daban (salo, rubutun rubutu, fonts, da sauransu) don fara loda mafi mahimmancin albarkatun. A wannan yanayin, mai bincike yana ƙayyade fifiko ta sifa as. Don Chrome browser za ka iya duba cikakken fifiko tebur.

Preload, prefetch da sauran alamun

prefetch

<link rel= "prefetch"> yana tambayar mai lilo don saukewa da adana bayanai (kamar rubutun ko takardar salo) a bango. Lodawa yana faruwa a ƙananan fifiko don haka baya tsoma baki tare da ƙarin mahimman albarkatu. Wannan yana da amfani idan ana buƙatar albarkatun a shafi na gaba kuma kuna son adana shi a gaba.

A nan ma, mai binciken ba ya yin komai tare da albarkatun bayan lodawa. Ba a aiwatar da rubutun, ba a amfani da zanen gadon salo. Ana adana albarkatun kawai kuma an samar da su nan da nan akan buƙata.

ginin kalma

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

href nuni ga albarkatun da kake son saukewa.

as na iya zama duk wani abu da za a iya saukewa a cikin burauza:

  • style don zanen gado,
  • script don rubutun,
  • font don fonts,
  • fetch don albarkatun da aka ɗora amfani da su fetch() ko XMLHttpRequest,
  • duba cikakken jerin ku MDN.

Yana da mahimmanci a ƙayyade sifa as - wannan yana taimakawa mai bincike daidai gwargwado da tsara abubuwan zazzagewa.

Lokacin amfani

Don loda albarkatun daga wasu shafuka, idan kuna buƙatar albarkatun daga wani shafi, kuma kuna son yin lodawa da shi don hanzarta aiwatar da wannan shafin. Misali:

  • Kuna da kantin sayar da kan layi, kuma 40% na masu amfani suna barin shafin gida don shafin samfurin. Amfani <link rel= "prefetch">, loda fayilolin CSS da JS don yin shafukan samfur.
  • Kuna da aikace-aikacen shafi guda ɗaya, kuma shafuka daban-daban suna ɗaukar fakiti daban-daban. Lokacin da mai amfani ya ziyarci shafi, ana iya shigar da fakitin duk shafukan da yake danganta su.

Yana yiwuwa za a iya amfani da wannan tag ɗin cikin aminci ko da yaushe.. Masu bincike galibi suna tsara prefetch tare da mafi ƙarancin fifiko, don haka baya damun kowa. Kawai ka tuna cewa yana cinye zirga-zirgar masu amfani, wanda zai iya kashe kuɗi.

Ba don buƙatun gaggawa ba. Kada ku yi amfani <link rel= "prefetch">, lokacin da ake buƙatar albarkatun a cikin 'yan daƙiƙa kaɗan. A wannan yanayin, amfani <link rel= "preload">.

Duba cikakkun bayanai

Tambarin zaɓi. Ba a buƙatar mai lilo don bin wannan umarni; yana iya yin watsi da shi, alal misali, akan jinkirin haɗi.

fifiko a cikin Chrome. A cikin Chrome <link rel= "prefetch"> yawanci ana aiwatar da shi tare da mafi ƙarancin fifiko (duba cikakken fifiko tebur), wato bayan loda duk wani abu.

riga-kafi

<link rel= "preconnect"> yana tambayar mai lilo don haɗawa da yankin gabaɗaya lokacin da kake son hanzarta saitin haɗin kai a nan gaba.

Dole ne mai binciken ya kafa haɗin gwiwa idan ya dawo da kowane albarkatu daga sabon yanki na ɓangare na uku. Misali, idan ya loda Fonts na Google, React fonts daga CDN, ko kuma ya nemi amsa JSON daga sabar API.

Ƙirƙirar sabon haɗi yawanci yana ɗaukar ƴan millise seconds ɗari. Ana yin sau ɗaya, amma har yanzu yana ɗaukar lokaci. Idan kun kafa haɗin gwiwa a gaba, za ku adana lokaci da zazzage albarkatu daga wannan yanki cikin sauri.

ginin kalma

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

href yana nuna sunan yankin da kake son tantance adireshin IP ɗinsa. Ana iya ƙayyadewa tare da prefix (https://domain.com) ko kuma ba tare da shi (//domain.com).

Lokacin amfani

Yi amfani don yankunan da za a buƙaci ba da daɗewa ba don zazzage wani muhimmin salo, rubutun ko hoto daga can, amma ba ku san URL ɗin albarkatun ba tukuna. Misali:

  • An shirya aikace-aikacen ku akan my-app.com kuma yana yin buƙatun AJAX zuwa api.my-app.com: Ba ku san takamaiman tambayoyin ba a gaba saboda an yi su da ƙarfi daga JS. Anan ya dace sosai don amfani da alamar don haɗawa da yankin gabaɗaya.
  • An shirya aikace-aikacen ku akan my-app.com kuma yana amfani da Google Fonts. Ana sauke su ta matakai biyu: na farko, ana sauke fayil ɗin CSS daga yankin fonts.googleapis.com, to wannan fayil yana buƙatar fonts tare da fonts.gstatic.com. Ba za ku iya sanin takamaiman fayilolin rubutu daga ba fonts.gstatic.com za ku buƙaci har sai kun loda fayil ɗin CSS, don haka kawai za mu iya yin haɗin farko a gaba.

Yi amfani da wannan alamar don haɓaka wasu rubutun ko salo kaɗan kaɗan saboda haɗin da aka riga aka kafa.

Kada ku wuce gona da iri. Ƙirƙira da kiyaye haɗin haɗi aiki ne mai tsada ga abokin ciniki da uwar garken. Yi amfani da wannan alamar don iyakar yanki 4-6.

Duba cikakkun bayanai

Tambarin zaɓi. Ba a buƙatar mai bincike don bin wannan umarni kuma yana iya yin watsi da shi, misali, idan an riga an kafa haɗin gwiwa da yawa ko a wani yanayi daban.

Menene tsarin haɗin gwiwa ya haɗa?. Don haɗawa zuwa kowane rukunin yanar gizon, mai binciken dole ne ya yi waɗannan abubuwan:

  • Ƙaddamarwar DNS. Nemo adireshin IP na uwar garken (216.58.215.78) don ƙayyadadden sunan yankin (google.com).
  • musafaha TCP. Fakitin musayar (abokin ciniki → uwar garken → abokin ciniki) don fara haɗin TCP tare da uwar garken.
  • musafaha TLS (shafukan HTTPS kawai). Zagaye biyu na musayar fakiti (abokin ciniki → uwar garken → abokin ciniki → uwar garken → abokin ciniki) don fara amintaccen zaman TLS.

Lura: HTTP/3 zai inganta da kuma hanzarta tsarin musafaha, amma har yanzu yana da nisa.

dns-prefetch

<link rel= "dns-prefetch"> yana tambayar mai binciken don aiwatar da ƙudurin DNS don yankin a gaba idan za ku haɗa shi da sauri kuma kuna son haɓaka haɗin farko.

Dole ne mai bincike ya ƙayyade adireshin IP na yankin idan zai dawo da kowane albarkatu daga sabon yanki na ɓangare na uku. Misali, loda Google Fonts, React fonts daga CDN, ko neman amsa JSON daga sabar API.

Ga kowane sabon yanki, ƙudurin rikodin DNS yawanci yana ɗaukar kusan 20-120 ms. Wannan kawai yana rinjayar lodin albarkatun farko daga wani yanki da aka bayar, amma har yanzu yana gabatar da jinkiri. Idan muka yi ƙudurin DNS a gaba, za mu adana lokaci kuma mu loda albarkatun cikin sauri.

ginin kalma

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

href yana nuna sunan yankin da kake son saita adireshin IP don shi. Ana iya ƙayyadewa tare da prefix (https://domain.com) ko kuma ba tare da shi (//domain.com).

Lokacin amfani

Yi amfani don yankunan da za a buƙaci ba da daɗewa ba don zazzage albarkatun daga can waɗanda mai binciken bai sani ba a gaba. Misali:

  • An shirya aikace-aikacen ku akan my-app.com kuma yana yin buƙatun AJAX zuwa api.my-app.com: Ba ku san takamaiman tambayoyin ba a gaba saboda an yi su da ƙarfi daga JS. Anan ya dace sosai don amfani da alamar don haɗawa da yankin gabaɗaya.
  • An shirya aikace-aikacen ku akan my-app.com, kuma yana amfani da Fonts na Google. Ana sauke su ta matakai biyu: na farko, ana sauke fayil ɗin CSS daga yankin fonts.googleapis.com, to wannan fayil yana buƙatar fonts tare da fonts.gstatic.com. Ba za ku iya sanin takamaiman fayilolin rubutu daga ba fonts.gstatic.com za ku buƙaci shi har sai kun loda fayil ɗin CSS, don haka kawai za mu iya yin haɗin farko a gaba.

Yi amfani da wannan alamar don haɓaka wasu rubutun ko salo kaɗan kaɗan saboda haɗin da aka riga aka kafa.

Da fatan za a lura da halaye iri ɗaya zuwa <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Yawancin lokaci ba shi da ma'ana don amfani da su tare don yanki ɗaya: <link rel= "preconnect"> riga ya haɗa da <link rel= "dns-prefetch"/> da dai sauransu. Ana iya tabbatar da hakan a cikin abubuwa biyu:

  • Shin kuna son tallafawa tsofaffin mazugi?. <link rel= "dns-prefetch" /> goyan bayan daga IE10 da Safari 5. <link rel= "preconnect"> an goyi bayan ɗan lokaci a cikin Chrome da Firefox, amma an ƙara shi kawai zuwa Safari a cikin 11.1 da har yanzu ba a tallafawa a cikin IE/Edge. Idan kana buƙatar tallafawa waɗannan masu binciken, yi amfani da su <link rel= "dns-prefetch" /> azaman madadin zaɓi don <link rel= "preconnect">.
  • Kuna so ku hanzarta haɗi zuwa fiye da yanki 4-6. Tag <link rel= "preconnect"> Ba a ba da shawarar yin amfani da fiye da yankuna 4-6 ba, tun da kafawa da kiyaye haɗin kai aiki ne mai tsada. <link rel= "dns-prefetch" /> yana cinye ƙasa da albarkatun, don haka amfani da shi idan ya cancanta.

Duba cikakkun bayanai

Tambarin zaɓi. Ba a buƙatar mai bincike don bin wannan umarnin, don haka maiyuwa bazai yi ƙudurin DNS ba, misali, idan akwai irin waɗannan alamun da yawa akan shafin ko a wani yanayin.

Menene DNS. Kowane uwar garken da ke Intanet yana da adireshin IP na musamman, wanda yayi kama da haka 216.58.215.78. Galibi ana shigar da sunan rukunin cikin mashigin adireshin mai binciken (misali, google.com), da kuma DNS (Tsarin Sunan Yankin) sabobin sun dace da shi tare da adireshin IP na uwar garken (216.58.215.78).

Don ƙayyade adireshin IP, mai bincike dole ne ya nemi uwar garken DNS. Yana ɗaukar 20-120 ms lokacin haɗi zuwa sabon yanki na ɓangare na uku.

An adana DNS, kodayake ba a dogara sosai ba. Wasu OSes da browsers suna adana tambayoyin DNS: wannan zai adana lokaci akan maimaita tambayoyin, amma caching ba za a iya dogaro da su ba. A Linux yawanci baya aiki kwata-kwata. Chrome yana da cache na DNS, amma yana ɗaukar minti ɗaya kawai. Windows yana adana martanin DNS na kwanaki biyar.

gabatarwa

<link rel= "prerender"> yana tambayar mai binciken don sauke URL ɗin kuma ya nuna shi a cikin shafin da ba a iya gani. Lokacin da mai amfani ya danna mahaɗin, ya kamata a nuna shafin nan da nan. Wannan yana da amfani idan kun tabbata cewa mai amfani zai ziyarci wani shafi kuma yana so ya hanzarta nuni.

Duk da (ko saboda) ingantaccen tasirin wannan alamar, a cikin 2019 <link rel= "prerender"> ba a samun tallafi sosai a cikin manyan masu bincike. Duba ƙarin bayani. kasa.

ginin kalma

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

href yana nuna URL ɗin da kake son fara nunawa a bango.

Lokacin amfani

Lokacin da ka tabbata cewa mai amfani zai je wani shafi. Idan kana da “ramin rami” wanda kashi 70% na masu ziyara zuwa shafi na A ke zuwa shafi na B, to <link rel= "prerender"> a shafi na A zai taimaka wajen nuna shafi B da sauri.

Kada ku wuce gona da iri. Pre-ma'ana yana da tsada sosai dangane da bandwidth da ƙwaƙwalwar ajiya. Kada ku yi amfani <link rel= "prerender"> don fiye da shafi ɗaya.

Duba cikakkun bayanai

Tambarin zaɓi. Ba a buƙatar mai lilo don bin wannan umarni kuma yana iya yin watsi da shi, misali, akan haɗin kai a hankali ko lokacin da rashin isassun ƙwaƙwalwar ajiya kyauta.

Don ajiye ƙwaƙwalwar ajiya Chrome baya yin cikakken ma'anada kuma kawai shigar da NoSstate. Wannan yana nufin Chrome yana loda shafin da duk albarkatunsa, amma baya yin ko aiwatar da JavaScript.

Firefox da Safari ba sa goyan bayan wannan alamar kwata-kwata. Wannan baya keta ƙayyadaddun bayanai, tunda ba a buƙatar masu bincike su bi wannan umarnin; amma har yanzu bakin ciki. Bug na aiwatarwa Firefox ta bude tsawon shekaru bakwai. Akwai rahotanni cewa Safari baya goyan bayan wannan tag shima.

Takaitaccen

Amfani:

  • <link rel= "preload"> - lokacin da kuke buƙatar albarkatu a cikin 'yan daƙiƙa kaɗan
  • <link rel= "prefetch"> - lokacin da kuke buƙatar albarkatun a shafi na gaba
  • <link rel= "preconnect"> - lokacin da kuka san cewa zaku buƙaci albarkatun nan ba da jimawa ba, amma har yanzu ba ku san cikakken URL ɗin ba
  • <link rel= "dns-prefetch"> - Hakazalika, lokacin da kuka san cewa za ku buƙaci albarkatun nan ba da jimawa ba, amma ba ku san cikakken URL ɗin sa ba (don tsofaffin masu bincike)
  • <link rel= "prerender"> - lokacin da ka tabbata cewa masu amfani za su je wani shafi, kuma kana so ka hanzarta nuni

source: www.habr.com

Add a comment