ProHoster > Π‘Π»ΠΎΠ³ > Maamulka > Horay u soo deji, prefetch iyo calaamado kale

Horay u soo deji, prefetch iyo calaamado kale

Waxaa jira siyaabo badan oo lagu horumariyo waxqabadka shabakadda. Mid iyaga ka mid ah ayaa hore u soo shubaya nuxurka loo baahan doono hadhow. CSS horudhac u samaynta, samaynta bog buuxa ama xallinta magaca domain. Wax walba horey ayaan u sameynaa, ka dibna isla markiiba soo bandhig natiijada! Dhawaaq fiican

Waxa xitaa qabow waa in si fudud loo hirgeliyay. Shan tag sii browserka amar si uu u sameeyo ficilada hordhaca ah:

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


Aynu si kooban u sharaxno waxay qabtaan iyo goorta la isticmaalayo.

U bood: soo rar Β· hordhac Β· horudhac Β· DNS-prefetch Β· hordhigid

soo rar

<link rel= "preload"> u sheega browser-ka inuu soo shubo oo kaydiyo agab (sida qoraal ama xaashi qaabeed) sida ugu dhakhsaha badan. Tani waxay faa'iido leedahay marka kheyraad loo baahan yahay dhowr ilbiriqsi ka dib marka bogga la buuxiyo - oo aad rabto inaad dedejiso habka.

browser-ku waxba kuma sameeyo kheyraadka ka dib marka la soo geliyo. Qoraallada lama fulin, qaabka xaashida lama dabaqo. Ilaha si fudud ayaa loo kaydiyaa oo isla markiiba waa la heli karaa haddii la codsado.

Saan

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

href tilmaame kheyraadka aad rabto inaad soo dejiso.

as waxay noqon kartaa wax kasta oo lagu soo dejisan karo browserka:

  • style loogu talagalay xaashida qaabka,
  • script qoraalada,
  • font fardaha,
  • fetch agabka lagu shubay iyadoo la isticmaalayo fetch() ama XMLHttpRequest,
  • eeg liiska buuxa ee MDN.

Waa muhiim in la qeexo sifada as - tani waxay ka caawisaa browserka inuu si habboon u kala hormariyo oo u jadwaleeyo soo dejinta.

Goorta la isticmaalo

Isticmaal horudhac marka kheyraadka loo baahdo mustaqbalka dhow. Tusaale ahaan:

  • Farta aan caadiga ahayn ee ka timid faylka dibadda: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    by default comic-sans.woff2 waxay bilaabi doontaa soo dejinta kaliya ka dib soo dejinta iyo falanqaynta index.css. Si aad uga fogaato sugitaanka waqti dheer, waxaad hore u soo dejisan kartaa farta adoo isticmaalaya <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Haddii aad u kala saarto qaababkaaga sida waafaqsan habka CSS Halis ah oo loo qaybiyo laba qaybood, muhiim ah (si dhakhso ah u bixin) iyo mid aan muhiim ahayn: 
    <style>
/* Inlined critical styles */
</style>

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

    Habkan, qaababka aan muhiimka ahayn ayaa kaliya bilaabi doona soo dejinta marka JavaScript uu socdo, taas oo dhici karta dhowr ilbiriqsi ka dib bixinta. Halkii laga sugi lahaa isticmaalka JS <link rel= "preload">si aad hore u bilawdo soo dejinta:

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

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

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

Si xad dhaaf ah ha u isticmaalin horudhac. Haddii aad wax kasta oo isku xigta ku shubto, goobtu si sixir ah uma xawaareyn doonto, taa lidkeeda, waxay ka ilaalin doontaa browserka inuu si sax ah u qorsheeyo shaqadiisa.

Yaan lagu khaldin prefetching. Ha isticmaalin <link rel= "preload">, haddii aadan u baahnayn kheyraadka isla markiiba ka dib marka bogga la buuxiyo. Haddii aad u baahato mar dambe, tusaale ahaan bogga xiga, ka dibna isticmaal <link rel= "prefetch">.

Faahfaahinta eeg

Tani waa calaamad loo baahan yahay in lagu fuliyo browserka (haddii uu taageero), si ka duwan dhammaan calaamadaha kale la xidhiidha hor-u-qaadista. browserku waa inuu soo dejiyaa kheyraadka lagu sheegay <link rel="preload">. Xaaladaha kale waxa laga yaabaa inay iska indho tirto soo dejinta hore, tusaale ahaan haddii ay ku socoto xidhiidh gaabis ah.

Mudnaanta. Browser-yadu waxay badiyaa u qoondeeyaan mudnaano kala duwan agabyo kala duwan (qaabab, qoraallo, xarfo, iwm.) si ay marka hore ugu shubaan agabka ugu muhiimsan. Xaaladdan oo kale, browserku wuxuu go'aamiyaa mudnaanta sifo as. browserka Chrome waxaad ka eegi kartaa miiska mudnaanta buuxda.

Horay u soo deji, prefetch iyo calaamado kale

hordhac

<link rel= "prefetch"> wuxuu ka codsadaa browserka inuu soo dejiyo oo kaydiyo agab (sida qoraalka ama xaashida qaabka) ee gadaasha. Soo dejintu waxay ku dhacdaa mudnaanta hoose si aanay faragelin agabka muhiimka ah. Tani waa faa'iido haddii agabka looga baahan yahay bogga xiga oo aad rabto inaad horay u kaydiso.

Halkan, sidoo kale, browserku waxba kuma sameeyo kheyraadka ka dib marka la soo dejiyo. Qoraallada lama fulin, qaabka xaashida lama dabaqo. Ilaha si fudud ayaa loo kaydiyaa oo isla markiiba waa la heli karaa haddii la codsado.

Saan

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

href tilmaame kheyraadka aad rabto inaad soo dejiso.

as waxay noqon kartaa wax kasta oo lagu soo dejisan karo browserka:

  • style loogu talagalay xaashida qaabka,
  • script qoraalada,
  • font fardaha,
  • fetch agabka lagu shubay iyadoo la isticmaalayo fetch() ama XMLHttpRequest,
  • eeg liiska buuxa ee MDN.

Waa muhiim in la qeexo sifada as - tani waxay ka caawisaa browser-ku inuu si sax ah u kala horeeyo una jadwaleeyo soo dejinta.

Goorta la isticmaalo

Si aad agab uga soo dejiso bogag kale, haddii aad u baahan tahay kheyraad bog kale, oo aad rabto in aad horay u soo dejiso si aad u dedejiso samaynta boggaas. Tusaale ahaan:

  • Waxaad leedahay dukaan khadka ah, iyo 40% isticmaalayaashu waxay ka tagaan bogga guriga ee bogga alaabta. Isticmaal <link rel= "prefetch">, rarista faylasha CSS iyo JS si loo sameeyo boggaga alaabta.
  • Waxaad haysataa hal bog oo codsi ah, bogag kala duwanna waxay ku raran yihiin baakado kala duwan. Marka isticmaaluhu booqdo bog, xidhmooyinka dhammaan bogagga uu ku xidho waa la sii rari karaa.

Waxay u badan tahay in summadan si badbaado leh loo isticmaali karo ilaa xad.. Browser-yadu inta badan waxay jadwaleeyaan hor-gale iyaga oo leh mudnaanta ugu hooseeya, si aanay cidna u dhibin. Kaliya maskaxda ku hay in ay isticmaasho taraafikada isticmaalaha, taas oo ku kici karta lacag.

Maaha codsiyo degdeg ah. Ha isticmaalin <link rel= "prefetch">, marka kheyraadka loo baahan yahay dhowr ilbiriqsi gudahood. Xaaladdan oo kale, isticmaal <link rel= "preload">.

Faahfaahinta eeg

sumad ikhtiyaari ah. browserka loogama baahna inuu raaco tilmaantan; waxaa laga yaabaa inuu iska indhatiro, tusaale ahaan, xiriir gaabis ah.

Mudnaanta Chrome. Gudaha Chrome <link rel= "prefetch"> inta badan waxaa lagu fuliyaa mudnaanta ugu yar (eeg miiska mudnaanta buuxda), taas oo ah, ka dib marka la raro wax kasta oo kale.

horudhac

<link rel= "preconnect"> wuxuu ka codsadaa browserka inuu hore ugu xidho xayndaabka marka aad rabto inaad dadajiso habaynta xidhiidhka mustaqbalka.

Barowsarku waa inuu sameeyaa xidhiidh haddii uu ka soo saaro wax kheyraad ah bog cusub oo dhinac saddexaad ah. Tusaale ahaan, haddii ay ku shubto Google Fonts, React fonts ka CDN, ama ka codsato JSON server ka API ah.

Samaynta xiriir cusub waxay caadi ahaan qaadataa dhowr boqol oo millise seconds. Waxa la sameeyaa hal mar, laakiin wali wakhti ayay qaadataa. Haddii aad hore u samaysatay xidhiidh, waxaad kaydin doontaa wakhti oo aad si dhakhso leh uga soo dejisan doontaa agabka boggan.

Saan

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

href wuxuu muujinayaa magaca domainka oo aad rabto inaad go'aamiso ciwaanka IP-ga. Waxaa lagu qeexi karaa horgale (https://domain.com) ama la'aanteed (//domain.com).

Goorta la isticmaalo

U isticmaal domains loo baahan doono dhawaan si aad halkaas uga soo dejiso qaab muhiim ah, qoraal ama sawir, laakiin weli ma garanaysid URL-ka kheyraadka. Tusaale ahaan:

  • Codsigaaga waa lagu marti galiyay my-app.com oo codsiyo AJAX u sameeya api.my-app.comHoray uma garanaysid su'aalaha gaarka ah sababtoo ah si firfircoon ayaa looga sameeyay JS. Halkan aad ayey ugu habboon tahay in la isticmaalo summada si hore loogu xidho domainka.
  • Codsigaaga waa lagu marti galiyay my-app.com oo isticmaala Google Fonts. Waxaa lagu soo dejiyaa laba tallaabo: marka hore, faylka CSS waxaa laga soo dejiyey domainka fonts.googleapis.com, ka dibna faylkani wuxuu ku codsanaya xarfaha fonts.gstatic.com. Ma garan kartid faylalka farta gaarka ah ee ka yimi fonts.gstatic.com waxaad u baahan doontaa ilaa aad ka shubto faylka CSS, si aanu u samayn karno xidhiidh hordhac ah ka hor.

Isticmaal summadan si aad u dedejiso qaar ka mid ah qoraalka qolo saddexaad ama qaab yar iyadoo ay ugu wacan tahay xiriir hore loo aasaasay.

Si xad dhaaf ah ha u isticmaalin. Samaynta iyo ilaalinta xidhiidhka waa hawl qaali u ah macmiilka iyo adeegaha labadaba. Isticmaal summadan ugu badnaan 4-6 goobood.

Faahfaahinta eeg

sumad ikhtiyaari ah. browserka loogama baahna inuu raaco tilmaantan waxaana laga yaabaa inuu iska indho tiro, tusaale ahaan, haddii xidhiidho badan oo hore loo sameeyay ama xaalad kale.

Maxaa ka mid ah habka isku xirka?. Si loogu xidho goob kasta, browserku waa inuu sameeyaa waxa soo socda:

  • xallinta DNS. Soo hel cinwaanka IP-ga ee serverka (216.58.215.78Magaca domain ee la cayimay (google.com).
  • gacan qaad TCP. Xirmooyinka beddelka (macmiilka β†’ server β†’ macmiilka) si loo bilaabo xidhiidhka TCP ee serferka.
  • Gacan qaad TLS (goobaha HTTPS oo keliya). Laba wareeg oo baakidh beddelasho ah (macmiil β†’ adeege β†’ macmiil β†’ server β†’ macmiil) si loo bilaabo fadhi sugan oo TLS ah.

Fiiro gaar ah: HTTP/3 wuu wanaajin doonaa oo wuu dadajin doonaa habka gacan-qaadka, laakiin wali way fogtahay.

DNS-prefetch

<link rel= "dns-prefetch"> Waydiiso browser-ka inuu horay u sii sameeyo xallinta DNS ee domainka haddii aad dhawaan ku xidhi doonto oo aad rabto inaad dedejiso xidhiidhka bilowga ah.

Barowsarku waa inuu go'aamiyaa ciwaanka IP-ga ee xayndaabka haddii uu ka soo ceshanayo wax khayraad ah bog cusub oo qolo saddexaad ah. Tusaale ahaan, ku rarida Google Fonts, xarfaha React ka CDN, ama ka codsanaya jawaabta JSON ee serverka API.

Goob kasta oo cusub, xallinta diiwaanka DNS waxay caadi ahaan qaadataa qiyaastii 20-120 ms. Tani waxay kaliya saamaynaysaa rarista ilaha ugu horeeya ee goob la siiyay, laakiin wali waxay soo bandhigaysaa dib u dhac. Haddii aan horay u sii wadno xallinta DNS, waxaan badbaadin doonaa waqti waxaanan ku shubi doonnaa kheyraadka si dhakhso ah.

Saan

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

href wuxuu muujinayaa magaca domainka oo aad rabto inaad u dejiso ciwaanka IP-ga. Waxaa lagu qeexi karaa horgale (https://domain.com) ama la'aanteed (//domain.com).

Goorta la isticmaalo

U isticmaal domains loo baahan doono dhawaan si aad halkaas uga soo dejiso agab aan browser-ku hore u ogayn. Tusaale ahaan:

  • Codsigaaga waa lagu marti galiyay my-app.com oo codsiyo AJAX u sameeya api.my-app.comHoray uma garanaysid su'aalaha gaarka ah sababtoo ah si firfircoon ayaa looga sameeyay JS. Halkan aad ayey ugu habboon tahay in la isticmaalo summada si hore loogu xidho domainka.
  • Codsigaaga waa lagu marti galiyay my-app.com, oo isticmaala Google Fonts. Waxaa lagu soo dejiyaa laba tallaabo: marka hore, faylka CSS waxaa laga soo dejiyey domainka fonts.googleapis.com, ka dibna faylkani wuxuu ku codsanaya xarfaha fonts.gstatic.com. Ma garan kartid faylalka farta gaarka ah ee ka yimi fonts.gstatic.com waxaad u baahan doontaa ilaa aad ka shubto faylka CSS, markaa waxaanu samayn karnaa oo kaliya xidhiidh hordhac ah ka hor.

Isticmaal summadan si aad u dedejiso qaar ka mid ah qoraalka qolo saddexaad ama qaab yar iyadoo ay ugu wacan tahay xiriir hore loo aasaasay.

Fadlan la soco astaamo la mid ah <link rel= "dns-prefetch"/> ΠΈ <link rel= "preconnect">. Caadiyan macno ma samaynayso in la wada isticmaalo hal domain: <link rel= "preconnect"> horeba waxaa ku jira <link rel= "dns-prefetch"/> iyo qaar kaloo badan. Tan waxaa lagu sababeyn karaa laba xaaladood:

  • Ma rabtaa inaad taageerto daalacashada hore?. <link rel= "dns-prefetch" /> taageeray Tan iyo IE10 iyo Safari 5. <link rel= "preconnect"> waxaa lagu taageeray in muddo ah Chrome iyo Firefox, laakiin kaliya lagu daray Safari in 11.1 iyo wali lagama taageero IE/Edge. Haddii aad u baahan tahay inaad taageerto browser-yadan, isticmaal <link rel= "dns-prefetch" /> sida doorasho gurmad ah <link rel= "preconnect">.
  • Waxaad doonaysaa inaad dedejiso isku xidhka in ka badan 4-6 goobood. Tag <link rel= "preconnect"> Laguma talinayo in lagu isticmaalo in ka badan 4-6 domains, tan iyo samaynta iyo ilaalinta xidhiidhka waa hawlgal qaali ah. <link rel= "dns-prefetch" /> waxay isticmaashaa kheyraad yar, markaa isticmaal haddii loo baahdo.

Faahfaahinta eeg

sumad ikhtiyaari ah. browserka loogama baahna inuu raaco tilmaantan, markaa waxaa laga yaabaa inuusan samayn xallinta DNS, tusaale ahaan, haddii ay jiraan calaamado badan oo noocaas ah bogga ama xaalad kale.

Waa maxay DNS. Server kasta oo internetka ku jira wuxuu leeyahay cinwaan IP gaar ah, kaas oo u eg 216.58.215.78. Magaca goobta waxaa badanaa la galaa ciwaanka browserka (tusaale ahaan, google.com), iyo DNS (Nidaamka Magaca Domain) ee server-yada waxay la jaan qaadayaan cinwaanka IP-ga ee server-ka (216.58.215.78).

Si loo go'aamiyo ciwaanka IP-ga, browserku waa inuu waydiiyaa server-ka DNS. Waxay qaadataa 20-120 ms marka lagu xirayo bogga qolo saddexaad.

DNS waa la kaydiyay, in kasta oo aan aad loo isku hallayn karin. Qaar ka mid ah OS-yada iyo browser-yada ayaa kaydiya weydiimaha DNS: tani waxay badbaadin doontaa wakhti su'aalaha soo noqnoqda, laakiin kaydinta laguma tiirsanaan karo. Linux inta badan kuma shaqeyso gabi ahaanba. Chrome wuxuu leeyahay kayd DNS ah, laakiin kaliya waxay socotaa hal daqiiqo. Windows waxay kaydisaa jawaabaha DNS shan maalmood.

hordhigid

<link rel= "prerender"> ka codsada browserka inuu soo dejiyo URL oo uu ku muujiyo tab aan la arki karin. Marka isticmaaluhu gujiyo isku xirka, bogga waa in isla markiiba la soo bandhigaa. Tani waa mid faa'iido leh haddii aad hubiso in isticmaaluhu uu booqan doono bog gaar ah oo aad rabto inaad dedejiso bandhigeeda.

In kasta oo (ama ay sabab u tahay) waxtarka gaarka ah ee summadan, 2019 <link rel= "prerender"> si liidata loo taageero browser-yada waaweyn Faahfaahin dheeraad ah ka arag hoose.

Saan

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

href farta ku fiiqaya URL-ka aad rabto inaad ka bilowdo samaynta gadaasha.

Goorta la isticmaalo

Marka aad runtii hubiso in isticmaaluhu uu aadi doono bog gaar ah. Haddii aad leedahay "tunnel" kaas oo 70% booqdayaasha bogga A tagaan bogga B, markaa <link rel= "prerender"> bogga A ayaa kaa caawin doona soo bandhigida bogga B si degdeg ah.

Si xad dhaaf ah ha u isticmaalin. Kahor-qaadista waa mid aad qaali u ah marka loo eego baaxadda xajinta iyo xusuusta. Ha isticmaalin <link rel= "prerender"> in ka badan hal bog.

Faahfaahinta eeg

sumad ikhtiyaari ah. browserka loogama baahna inuu raaco tilmaantan waxaana laga yaabaa inuu iska indhatiro, tusaale ahaan, xiriir gaabis ah ama marka ay jirto xasuus bilaash ah oo ku filan.

Si loo badbaadiyo xusuusta Chrome si buuxda uma qabtoiyo Kaliya horay u soo deji NoState. Tani waxay ka dhigan tahay in Chrome uu buuxiyo bogga iyo dhammaan agabkiisa, laakiin ma bixiyo ama ma fuliyo JavaScript.

Firefox iyo Safari gabi ahaanba ma taageeraan summadan. Tani ma jabinayso qeexitaanka, maadaama daalacashada aan looga baahnayn inay raacaan tilmaamaha; laakiin weli murugo. Kutaanta fulinta Firefox waxa ay furneyd todoba sano. Waxaa jira warar sheegaya in Safari ma taageerto sumaddan sidoo kale.

Soo koobid

Isticmaal:

  • <link rel= "preload"> - marka aad u baahan tahay kheyraad dhowr ilbiriqsi gudahood
  • <link rel= "prefetch"> - marka aad u baahan tahay kheyraadka bogga xiga
  • <link rel= "preconnect"> - Markaad ogaato inaad u baahan doonto kheyraad dhawaan, laakiin aadan weli garanayn URL-kiisa oo buuxa
  • <link rel= "dns-prefetch"> - si la mid ah, markaad ogaato inaad u baahan doonto kheyraad dhawaan, laakiin aadan weli aqoon URL-keeda buuxa (daalacashada hore)
  • <link rel= "prerender"> - marka aad hubiso in isticmaalayaashu ay aadi doonaan bog gaar ah, oo aad rabto in aad dedejiso bandhigiisa

Source: www.habr.com

Add a comment