kukho iindlela ezininzi zokuphucula ukusebenza kwewebhu. Enye yazo kukulayisha kwangaphambili umxholo oza kufuneka kamva. Ukulungiswa kwangaphambili kweCSS, unikezelo lwangaphambili lwephepha elipheleleyo okanye isisombululo segama lesizinda. Senza yonke into kwangaphambili, kwaye ngoko nangoko sibonise umphumo! Ivakala ipholile.

Eyona nto ipholileyo kukuba iphunyezwe ngokulula. Iithegi ezintlanu nika isikhangeli umyalelo wokuba senze izenzo zokuqala:

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

Makhe sichaze ngokufutshane into ayenzayo kunye nexesha lokuyisebenzisa.

Tsibela ku: layisha kwangaphambili · kwangaphambili · qhagamshela ngaphambili · dns-prefetch · nikela kwangaphambili

layisha kwangaphambili

<link rel= "preload"> ixelela umkhangeli zincwadi ukuba alayishe kwaye agcine indawo yobutyebi (efana nescript okanye icwecwe lesimbo) ngokukhawuleza. Oku kuluncedo xa uvimba ufuneka kwimizuzwana embalwa emva kokuba iphepha lilayishwe - kwaye ufuna ukukhawulezisa inkqubo.

Isikhangeli akenzi nto ngesixhobo emva kokulayisha. Izikripthi ayenziwanga, amaphepha esimbo awasetyenziswanga. Isixhobo sigcinwe kwi-cache kwaye ngokukhawuleza senziwe sifumaneke xa siceliwe.

I-Syntax

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

href ikhomba kumthombo ofuna ukuwukhuphela.

as inokuba yiyo nantoni na enokukhutshelwa kwisikhangeli:

style kumaphepha esitayela,
script kwimibhalo,
font iifonti,
fetch kwimithombo elayishiweyo kusetyenziswa fetch() okanye XMLHttpRequest,
bona uluhlu olupheleleyo kwi-MDN.

Kubalulekile ukucacisa uphawu as - oku kunceda isikhangeli ukuba sibeke phambili ngokufanelekileyo kwaye sicwangcise ukukhuphela.

Uyisebenzisa nini

Sebenzisa ukulayisha kwangaphambili xa uvimba ufuneka kungekudala. Umzekelo:

Iifonti ezingekho mgangathweni ukusuka kwifayile yangaphandle:
```

<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
Ukungagqibeki comic-sans.woff2 izakuqala ukulayisha kuphela emva kokukhuphela kunye nokwahlulahlula index.css. Ukunqanda ukulinda ixesha elide, unokukhuphela ifonti kwangaphambili usebenzisa <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Ukuba uyahlula izitayile zakho ngokwendlela yokujonga CSS ebalulekileyo abe ngamacandelo amabini, abaluleke kakhulu (unikezelo olukhawulezileyo) kwaye angabalulekanga:
```
<style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>
```
Ngale ndlela, izimbo ezingabalulekanga ziya kuqalisa ukulayisha kuphela xa iJavaScript ibaleka, enokuthi yenzeke kwimizuzwana embalwa emva kokunikezelwa. Endaweni yokulinda JS sebenzisa <link rel= "preload">ukuqalisa ukukhuphela kwangaphambili:
```
<style>
/* Inlined critical styles */
</style>

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

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

Musa ukusebenzisa ngokugqithisileyo ukulayisha kwangaphambili. Ukuba ulayisha yonke into ngokulandelelana, indawo ayiyi kukhawulezisa ngomlingo, ngokuchaseneyo, iya kuthintela isikhangeli ekucwangciseni umsebenzi wayo ngokuchanekileyo.

Ayinakubhidaniswa nokulanda kuqala. Musa ukusebenzisa <link rel= "preload">, ukuba awufuni vimba ngoko nangoko emva kokulayisha iphepha. Ukuba uyayifuna kamva, umzekelo wephepha elilandelayo, sebenzisa <link rel= "prefetch">.

Jonga iinkcukacha

Le yithegi efunekayo izakwenziwa ngumkhangeli zincwadi (ukuba iyayixhasa), ngokungafaniyo nazo zonke ezinye iithegi enxulumene nokulayisha kwangaphambili. Isikhangeli kufuneka sikhuphele uvimba ochazwe apha <link rel="preload">. Kwezinye iimeko inokungahoyi ukulayisha kwangaphambili, umzekelo ukuba iyasebenza kuqhagamshelwano olucothayo.

Izinto eziphambili. Abakhangeli badla ngokunika izinto eziphambili ngokubaluleka ezahlukeneyo kwizibonelelo ezahlukeneyo (izimbo, izikripthi, iifonti, njl.njl.) ukwenzela ukulayisha ezona zixhobo zibalulekileyo kuqala. Kule meko, umkhangeli zincwadi umisela kuqala ngophawu as. Kwisiphequluli seChrome unokujonga itheyibhile epheleleyo ephambili.

kwangaphambili

<link rel= "prefetch"> icela isikhangeli ukuba sikhuphele kwaye sigcine indawo yovimba (efana neskripthi okanye uxwebhu lwesimbo) ngasemva. Ukulayisha kwenzeka ngokubaluleka okuphantsi ngoko ke akuphazamisi izixhobo ezibaluleke ngakumbi. Oku kuluncedo ukuba uvimba uyafuneka kwiphepha elilandelayo kwaye ufuna ukuyigcina kwangethuba.

Apha, kwakhona, isikhangeli akenzi nto ngesixhobo emva kokulayisha. Izikripthi ayenziwanga, amaphepha esimbo awasetyenziswanga. Isixhobo sigcinwe kwi-cache kwaye ngokukhawuleza senziwe sifumaneke xa siceliwe.

I-Syntax

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

href ikhomba kumthombo ofuna ukuwukhuphela.

as inokuba yiyo nantoni na enokukhutshelwa kwisikhangeli:

style kumaphepha esitayela,
script kwimibhalo,
font iifonti,
fetch kwimithombo elayishiweyo kusetyenziswa fetch() okanye XMLHttpRequest,
bona uluhlu olupheleleyo kwi-MDN.

Kubalulekile ukucacisa uphawu as - oku kunceda isikhangeli ukuba sibeke phambili ngokufanelekileyo kwaye sicwangcise ukhuphelo.

Uyisebenzisa nini

Ukulayisha izixhobo ezisuka kwamanye amaphepha, ukuba ufuna iresource esuka kwelinye iphepha, kwaye ufuna ukuyilayisha kwangaphambili ukuze ukhawulezise unikezelo lwelo phepha. Umzekelo:

Unevenkile ye-intanethi, kwaye i-40% yabasebenzisi bashiya iphepha lasekhaya kwiphepha lemveliso. Sebenzisa <link rel= "prefetch">, ilayisha iifayile zeCSS kunye ne-JS ukunika amaphepha emveliso.
Unesicelo sephepha elinye, kwaye amaphepha awohlukeneyo alayisha iipakethe ezahlukeneyo. Xa umsebenzisi endwendwela iphepha, iipakethe zawo onke amaphepha elikhonkco kuwo zinokulayishwa kwangaphambili.

Kusenokwenzeka ukuba le thegi ingasetyenziswa ngokukhuselekileyo kuwo nawuphi na umlinganiselo.. Abakhangeli baqhele ukwenza ishedyuli yokulanda kuqala ngokubaluleka okuphantsi, ngoko ayikhathazi mntu. Gcina nje ukhumbule ukuba idla i-traffic yomsebenzisi, enokubiza imali.

Hayi ngezicelo ezingxamisekileyo. Musa ukusebenzisa <link rel= "prefetch">, xa uvimba ufuneka kwimizuzwana embalwa. Kule meko, sebenzisa <link rel= "preload">.

Jonga iinkcukacha

Ithegi yokuzikhethela. Isikhangeli asifunwa ukuba silandele lo myalelo, inokungahoyi, umzekelo, kuqhagamshelwano olucothayo.

Okuphambili kwiChrome. KwiChrome <link rel= "prefetch"> iqhele ukwenziwa ngokubaluleka okuncinci (bona itheyibhile epheleleyo ephambili), oko kukuthi, emva kokulayisha yonke enye into.

qhagamshela ngaphambili

<link rel= "preconnect"> icela isikhangeli ukuba siqhagamshele kwindawo kwangaphambili xa ufuna ukukhawulezisa ukuseta umdibaniso kwixesha elizayo.

Isikhangeli kufuneka siseke umdibaniso ukuba sifumana kwakhona naziphi na izibonelelo ukusuka kwindawo entsha yomntu wesithathu. Umzekelo, ukuba ilayisha iiFonti zikaGoogle, iifonti zeReact kwi-CDN, okanye icela impendulo ye-JSON kwiseva ye-API.

Ukuseka uqhagamshelo olutsha kudla ngokuthatha amakhulu ambalwa emillisecond. Yenziwa kube kanye, kodwa kusathatha ixesha. Ukuba uqhagamshele kwangaphambili, uya konga ixesha kwaye ukhuphele izixhobo ezisuka kwesi sizinda ngokukhawuleza.

I-Syntax

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

href ibonisa igama lesizinda ofuna ukumisela idilesi ye IP. Ingachazwa ngesimaphambili (https://domain.com) okanye ngaphandle kwayo (//domain.com).

Uyisebenzisa nini

Sebenzisa imimandla ezakufuneka kungekudala ukukhuphela isitayile esibalulekileyo, iskripthi okanye umfanekiso osuka apho, kodwa awuyazi i-URL yesixhobo okwangoku. Umzekelo:

Isicelo sakho sibanjwe my-app.com kwaye yenza izicelo AJAX ukuba api.my-app.com: Awuyazi imibuzo ethile kwangaphambili kuba yenziwe ngokutshintshayo ukusuka kwi-JS. Apha kufanelekile ukusebenzisa ithegi ukudibanisa kwangaphambili kwindawo.
Isicelo sakho sibanjwe my-app.com kwaye isebenzisa iiFonti zikaGoogle. Zikhutshelwa ngamanyathelo amabini: okokuqala, ifayile yeCSS ikhutshelwa kwi-domain fonts.googleapis.com, ngoko le fayile icela iifonti nge fonts.gstatic.com. Awunakwazi ukuba zeziphi iifayile zefonti ezisuka kuzo fonts.gstatic.com uzakufuna ude ulayishe ifayile ye CSS, ngoko ke sinokwenza uqhagamshelo lokuqala kwangethuba.

Sebenzisa le thegi ukukhawulezisa iskripthi somntu wesithathu okanye isitayile kancinci ngenxa yoqhagamshelwano olusele lusekiwe.

Sukusebenzisa kakubi. Ukuseka nokugcina umdibaniso ngumsebenzi obiza imali eninzi kubo bobabini umxhasi kunye nomncedisi. Sebenzisa le thegi ubuninzi bemimandla ye-4-6.

Jonga iinkcukacha

Ithegi yokuzikhethela. Isikhangeli asifunwa ukuba silandele lo myalelo kwaye singawuhoya, umzekelo, ukuba uninzi lonxibelelwano sele lusekiwe okanye kwenye imeko.

Iquka ntoni inkqubo yoqhagamshelwano?. Ukuqhagamshela kwisiza ngasinye, isikhangeli kufuneka senze oku kulandelayo:

Isisombululo seDNS. Fumana idilesi ye-IP yomncedisi (216.58.215.78) yegama lesizinda elikhankanyiweyo (google.com).
TCP ukuxhawula izandla. Utshintshiselwano lweepakethi (umxhasi → umncedisi → umxhasi) ukuqalisa uqhagamshelwano lweTCP nomncedisi.
Ukuxhawula izandla kwe-TLS (iisayithi ze-HTTPS kuphela). Imijikelo emibini yotshintshiselwano lwepakethi (umxhasi → umncedisi → umxhasi → umncedisi → umxhasi) ukuqalisa iseshoni ekhuselekileyo yeTLS.

Qaphela: I-HTTP/3 iya kuphucula kwaye ikhawulezise indlela yokuxhawula izandla, kodwa isekude kakhulu.

dns-prefetch

<link rel= "dns-prefetch"> icela isikhangeli ukuba senze isisombululo se-DNS sedomeyini kwangaphambili ukuba uza kuqhagamshela kuyo kungekudala kwaye ufuna ukukhawulezisa udibaniso lokuqala.

Isikhangeli kufuneka simisele idilesi ye-IP yedomeyini ukuba iya kufumana naziphi na izibonelelo ukusuka kwindawo entsha yomntu wesithathu. Umzekelo, ukulayisha iiFonti zikaGoogle, iifonti zeReact kwi-CDN, okanye ucela impendulo ye-JSON kwiseva ye-API.

Kwisizinda ngasinye esitsha, isisombululo serekhodi seDNS sithatha malunga ne-20-120 ms. Oku kuchaphazela kuphela ukulayishwa kwesixhobo sokuqala ukusuka kwindawo enikiweyo, kodwa kusazisa ukulibaziseka. Ukuba senza isisombululo se-DNS kwangaphambili, siya konga ixesha kwaye silayishe uvimba ngokukhawuleza.

I-Syntax

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

href ibonisa igama lesizinda ofuna ukuseta idilesi ye IP. Ingachazwa ngesimaphambili (https://domain.com) okanye ngaphandle kwayo (//domain.com).

Uyisebenzisa nini

Sebenzisa imimandla ezakufuneka kungekudala ukukhuphela izibonelelo ukusuka apho ukuba umkhangeli zincwadi akayazi kwangaphambili. Umzekelo:

Isicelo sakho sibanjwe my-app.com kwaye yenza izicelo AJAX ukuba api.my-app.com: Awuyazi imibuzo ethile kwangaphambili kuba yenziwe ngokutshintshayo ukusuka kwi-JS. Apha kufanelekile ukusebenzisa ithegi ukudibanisa kwangaphambili kwindawo.
Isicelo sakho sibanjwe my-app.com, kwaye isebenzisa iiFonti zikaGoogle. Zikhutshelwa ngamanyathelo amabini: okokuqala, ifayile yeCSS ikhutshelwa kwi-domain fonts.googleapis.com, ngoko le fayile icela iifonti nge fonts.gstatic.com. Awunakwazi ukuba zeziphi iifayile zefonti ezisuka kuzo fonts.gstatic.com uzakuyifuna ude ulayishe ifayile ye CSS, ngoko ke sinokwenza uqhagamshelo lokuqala kwangethuba.

Sebenzisa le thegi ukukhawulezisa iskripthi somntu wesithathu okanye isitayile kancinci ngenxa yoqhagamshelwano olusele lusekiwe.

Nceda uqaphele iimpawu ezifanayo <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Ngokuqhelekileyo akukho ngqiqweni ukuzisebenzisa kunye kwindawo enye: <link rel= "preconnect"> sele ibandakanya <link rel= "dns-prefetch"/> nokunye okuninzi. Oku kunokuthetheleleka kwiimeko ezimbini:

Ngaba uyafuna ukuxhasa iibhrawuza ezindala?. <link rel= "dns-prefetch" /> ixhaswe ngu ukusukela IE10 kunye neSafari 5. <link rel= "preconnect"> yaxhaswa okwethutyana kwiChrome nakwiFirefox, kodwa yongezwa kuphela kwiSafari ngo-11.1 kunye ayikaxhaswa kwi-IE/Edge. Ukuba ufuna ukuxhasa ezi browsers, sebenzisa <link rel= "dns-prefetch" /> njengokhetho logcino lwe <link rel= "preconnect">.

Ufuna ukukhawulezisa uxhulumaniso kwiindawo ezingaphezu kwe-4-6. Ithegi <link rel= "preconnect"> Akukhuthazwa ukusebenzisa kunye neendawo ezingaphezu kwe-4-6, ekubeni ukuseka nokugcina uxhulumaniso ngumsebenzi obiza kakhulu. <link rel= "dns-prefetch" /> sebenzisa izixhobo ezincinci, ngoko ke zisebenzise ukuba kuyimfuneko.

Jonga iinkcukacha

Ithegi yokuzikhethela. Isikhangeli asifunwa ukuba silandele lo myalelo, ngoko ke ayinakwenza isisombululo se-DNS, umzekelo, ukuba zininzi iithegi ezinje kwiphepha okanye kwenye imeko.

Yintoni i-DNS. Umncedisi ngamnye kwi-Intanethi unedilesi ye-IP ekhethekileyo, ekhangeleka ngathi 216.58.215.78. Igama lesiza lihlala lingeniswa kwibar yedilesi yesikhangeli (umzekelo, google.com), kunye nabancedisi beDNS (iDomain Name System) bayitshatisa nedilesi ye IP yomncedisi (216.58.215.78).

Ukumisela idilesi ye-IP, isikhangeli kufuneka sibuze iseva ye-DNS. Kuthatha 20−120 ms xa uqhagamshela kwindawo entsha yomntu wesithathu.

I-DNS igcinwe, nangona ingathembekanga kakhulu. Ezinye ii-OS kunye nezikhangeli ze-cache ye-DNS imibuzo: oku kuya konga ixesha kwimibuzo ephindaphindiweyo, kodwa i-caching ayinakuxhomekeka kuyo. Kwi-Linux idla ngokungasebenzi konke konke. I-Chrome ine-cache ye-DNS, kodwa ihlala nje umzuzu. IiWindows zigcina iimpendulo zeDNS kangangeentsuku ezintlanu.

nikela kwangaphambili

<link rel= "prerender"> icela isikhangeli ukuba sikhuphele i-URL kwaye siyibonise kwithebhu engabonakaliyo. Xa umsebenzisi ecofa ikhonkco, iphepha kufuneka liboniswe kwangoko. Oku kuluncedo ukuba uqinisekile ukuba umsebenzisi uya kundwendwela iphepha elithile kwaye ufuna ukukhawulezisa umboniso walo.

Ngaphandle (okanye ngenxa) yempumelelo ekhethekileyo yale thegi, ngo-2019 <link rel= "prerender"> ixhaswa kakubi kwiibhrawuza ezinkulu. Bona iinkcukacha ezininzi. ngezantsi.

I-Syntax

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

href ikhomba iURL ofuna ukuqala ukuyinikezela ngasemva.

Uyisebenzisa nini

Xa uqinisekile ngenene ukuba umsebenzisi uya kwiphepha elithile. Ukuba une "tonela" apho i-70% yabatyeleli kwiphepha A iya kwiphepha B, ngoko <link rel= "prerender"> kwiphepha A liya kunceda ukubonisa iphepha B ngokukhawuleza.

Sukusebenzisa kakubi. Unikezelo lwangaphambili kubiza kakhulu ngokwemiba yobubanzi kunye nememori. Musa ukusebenzisa <link rel= "prerender"> ngaphezulu kwephepha elinye.

Jonga iinkcukacha

Ithegi yokuzikhethela. Isikhangeli asifunwa ukuba silandele lo myalelo kwaye singawuhoya, umzekelo, kuqhagamshelo olucothayo okanye xa kukho inkumbulo esimahla engonelanga.

Ukugcina imemori IChrome ayenzi unikezelo olupheleleyo, kwaye layisha kuqala kuphela iNoState. Oku kuthetha ukuba iChrome ilayisha iphepha kunye nazo zonke izixhobo zayo, kodwa ayinikezeli okanye isebenzise iJavaScript.

IFirefox kunye neSafari aziyixhasi le thegi kwaphela. Oku akuchaphazeli ingcaciso, njengoko iibhrawuza kungafuneki ukuba zilandele lo myalelo; kodwa kusebuhlungu. Impazamo yokuphumeza IFirefox ibivulwe iminyaka esixhenxe. Kukho iingxelo zokuba Safari nayo ayixhasi le thegi.

Isishwankathelo

Sebenzisa:

<link rel= "preload"> - xa ufuna uvimba kwimizuzwana embalwa
<link rel= "prefetch"> - xa ufuna uvimba kwiphepha elilandelayo
<link rel= "preconnect"> -Xa usazi ukuba uzakufuna iresource kungekudala, kodwa awukayazi iURL yayo epheleleyo
<link rel= "dns-prefetch"> - Ngokufanayo, xa usazi ukuba uzakufuna isixhobo kungekudala, kodwa awukayazi i-URL yayo epheleleyo (yeebhrawuza ezindala)
<link rel= "prerender"> - xa uqinisekile ukuba abasebenzisi baya kuya kwiphepha elithile, kwaye ufuna ukukhawulezisa umboniso walo

umthombo: www.habr.com

Layisha kwangaphambili, landa ngaphambili kunye nezinye iithegi

layisha kwangaphambili

I-Syntax

Uyisebenzisa nini

Jonga iinkcukacha

kwangaphambili

I-Syntax

Uyisebenzisa nini

Jonga iinkcukacha

qhagamshela ngaphambili

I-Syntax

Uyisebenzisa nini

Jonga iinkcukacha

dns-prefetch

I-Syntax

Uyisebenzisa nini

Jonga iinkcukacha

nikela kwangaphambili

I-Syntax

Uyisebenzisa nini

Jonga iinkcukacha

Isishwankathelo

Yongeza izimvo Phendula impendulo