Zikhona izindlela eziningi zokuthuthukisa ukusebenza kwewebhu. Okunye kwakho ukulayisha kuqala okuqukethwe okuzodingeka kamuva. Ukucubungula ngaphambilini kwe-CSS, ukunikezwa kwangaphambili kwekhasi eligcwele noma ukulungiswa kwegama lesizinda. Senza konke kusengaphambili, bese sibonisa umphumela ngokushesha! Kuzwakala kupholile.

Okuhle nakakhulu ukuthi kwenziwa kalula. Amathegi amahlanu nika isiphequluli umyalo wokwenza izenzo zokuqala:

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

Ake sichaze kafushane ukuthi zenzani nokuthi zisetshenziswa nini.

Gxumela ku-: layisha kuqala · preetch · ukuxhuma kuqala · dns-prefetch · nikela ngaphambili

layisha kuqala

<link rel= "preload"> itshela isiphequluli ukuthi silayishe futhi sigcine insiza (efana neskripthi noma ishidi lesitayela) ngokushesha okukhulu. Lokhu kuyasiza uma isisetshenziswa sidingeka imizuzwana embalwa ngemva kokulayishwa kwekhasi - futhi ufuna ukusheshisa inqubo.

Isiphequluli asenzi lutho ngesisetshenziswa ngemva kokulayisha. Imibhalo ayisetshenziswa, amashidi esitayela awasetshenziswa. Insiza igcinwe kunqolobane futhi itholakale ngokushesha lapho icelwa.

I-syntax

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

href ukhomba insiza ofuna ukuyilanda.

as kungaba noma yini engalandwa kusiphequluli:

style amashidi esitayela,
script okwemibhalo,
font amafonti,
fetch ngezinsiza ezilayishwe kusetshenziswa fetch() noma XMLHttpRequest,
bona uhlu olugcwele ku-MDN.

Kubalulekile ukucacisa isibaluli as - lokhu kusiza isiphequluli ukuthi sibeke phambili ngokufanelekile futhi sihlele ukulanda.

Uzosebenzisa nini

Sebenzisa ukulayisha kuqala lapho insiza idingeka esikhathini esizayo esiseduze. Ngokwesibonelo:

Amafonti angajwayelekile asuka kufayela langaphandle:
```

<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
Ngokuzenzakalelayo comic-sans.woff2 izoqala ukulayisha kuphela ngemva kokulanda nokudlulisa index.css. Ukuze ugweme ukulinda isikhathi eside, ungalanda ifonti kusenesikhathi usebenzisa <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Uma uhlukanisa izitayela zakho ngokuya ngendlela I-CSS Ebucayi zibe izingxenye ezimbili, ezibucayi (zokunikeza ngokushesha) nezingabalulekile:
```
<style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>
```
Ngale ndlela, izitayela ezingabalulekile zizoqala ukulayishwa kuphela uma i-JavaScript isebenza, okungenzeka amasekhondi ambalwa ngemva kokunikezelwa. Esikhundleni sokulinda ukusetshenziswa kwe-JS <link rel= "preload">ukuze uqale ukulanda ngaphambilini:
```
<style>
/* Inlined critical styles */
</style>

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

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

Ungasebenzisi ngokweqile ukulayisha kuqala. Uma ulayisha yonke into ngokulandelana, isayithi ngeke lisheshise ngomlingo, ngokuphambene nalokho, lizovimbela isiphequluli ekuhleleni umsebenzi waso ngendlela efanele.

Akufanele kudidaniswe nokulanda kuqala. Ungasebenzisi <link rel= "preload">, uma ungawudingi insiza ngokushesha ngemva kokulayishwa kwekhasi. Uma uyidinga kamuva, isibonelo ekhasini elilandelayo, bese usebenzisa <link rel= "prefetch">.

Imininingwane

Lona umaka odingekayo ukuze isetshenziswe isiphequluli (uma siyisekela), ngokungafani nawo wonke amanye amathegi okuhlobene nokulayisha kuqala. Isiphequluli kufanele silande insiza ecaciswe kuyo <link rel="preload">. Kwezinye izimo ingase izibe ukulayisha kuqala, isibonelo uma isebenza ngoxhumo olungasheshi.

Okubalulekile. Iziphequluli zivame ukunikeza okubalulekile okuhlukile kuzinsiza ezahlukene (izitayela, imibhalo, amafonti, njll.) ukuze zilayishe izinsiza ezibaluleke kakhulu kuqala. Kulokhu, isiphequluli sinquma okubalulekile ngesibaluli as. Ngesiphequluli se-Chrome ungabheka Ithebula eliphelele elibalulekile.

preetch

<link rel= "prefetch"> icela isiphequluli ukuthi silande futhi sigcine insiza (efana nombhalo noma ishidi lesitayela) ngemuva. Ukulayisha kwenzeka ngokubalulekile okuphansi ngakho-ke akuphazamisi izinsiza ezibaluleke kakhulu. Lokhu kuyasiza uma insiza idingeka ekhasini elilandelayo futhi ufuna ukuyigcina kusenesikhathi.

Nalapha, isiphequluli asenze lutho ngesisetshenziswa ngemva kokulayisha. Imibhalo ayisetshenziswa, amashidi esitayela awasetshenziswa. Insiza igcinwe kunqolobane futhi itholakale ngokushesha lapho icelwa.

I-syntax

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

href ukhomba insiza ofuna ukuyilanda.

as kungaba noma yini engalandwa kusiphequluli:

style amashidi esitayela,
script okwemibhalo,
font amafonti,
fetch ngezinsiza ezilayishwe kusetshenziswa fetch() noma XMLHttpRequest,
bona uhlu olugcwele ku-MDN.

Kubalulekile ukucacisa isibaluli as - lokhu kusiza isiphequluli ukubeka phambili ngendlela efanele futhi sihlele ukulanda.

Uzosebenzisa nini

Ukulayisha izinsiza kusuka kwamanye amakhasi, uma udinga insiza esuka kwelinye ikhasi, futhi ufuna ukuyilayisha kuqala ukuze usheshise ukunikezwa kwalelo khasi. Ngokwesibonelo:

Unesitolo esiku-inthanethi, futhi u-40% wabasebenzisi ushiya ikhasi lasekhaya ukuze uthole ikhasi lomkhiqizo. Sebenzisa <link rel= "prefetch">, ilayisha amafayela e-CSS nawe-JS ukuze inikeze amakhasi omkhiqizo.
Unohlelo lokusebenza lwekhasi elilodwa, futhi amakhasi ahlukene alayisha amaphakheji ahlukene. Uma umsebenzisi evakashela ikhasi, amaphakheji awo wonke amakhasi axhumeka kuwo angalayishwa kuqala.

Kungenzeka ukuthi le thegi ingasetshenziswa ngokuphephile kunoma yiliphi izinga.. Iziphequluli zivame ukuhlela ukulanda kuqala ngokubaluleke kakhulu, ngakho-ke akuhluphi muntu. Vele ukhumbule ukuthi idla ithrafikhi yomsebenzisi, engadla imali.

Hhayi ngezicelo eziphuthumayo. Ungasebenzisi <link rel= "prefetch">, lapho insiza idingeka emizuzwaneni embalwa. Kulokhu, sebenzisa <link rel= "preload">.

Imininingwane

Umaka ozikhethela wona. Isiphequluli akudingekile ukuthi silandele lo myalelo; singawuziba, isibonelo, ekuxhumekeni okuhamba kancane.

Okubalulekile ku-Chrome. Ku-Chrome <link rel= "prefetch"> ngokuvamile eyenziwa ngokubaluleke kakhulu (bona Ithebula eliphelele elibalulekile), okungukuthi, ngemva kokulayisha konke okunye.

ukuxhuma kuqala

<link rel= "preconnect"> icela isiphequluli ukuthi sixhume esizindeni kusenesikhathi uma ufuna ukusheshisa ukusethwa koxhumano ngokuzayo.

Isiphequluli kufanele sisungule uxhumano uma sithola noma yiziphi izinsiza esizindeni esisha esivela eceleni. Isibonelo, uma ilayisha amafonti e-Google, amafonti e-React avela ku-CDN, noma icela impendulo ye-JSON kuseva ye-API.

Ukusungula uxhumano olusha ngokuvamile kuthatha amakhulu ambalwa ama-millisecond. Kwenziwa kanye, kodwa kusathatha isikhathi. Uma usungule uxhumano kusengaphambili, uzokonga isikhathi futhi ulande izinsiza kulesi sizinda ngokushesha.

I-syntax

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

href ikhombisa igama lesizinda ofuna ukunquma ngalo ikheli le-IP. Ingacaciswa ngesiqalo (https://domain.com) noma ngaphandle kwayo (//domain.com).

Uzosebenzisa nini

Sebenzisa ezizindeni ezizodingeka maduze ukuze ulande isitayela esibalulekile, iskripthi noma isithombe ukusuka lapho, kodwa awuyazi i-URL yesisetshenziswa okwamanje. Ngokwesibonelo:

Uhlelo lwakho lokusebenza lungabanjwa my-app.com futhi yenza izicelo ze-AJAX ukuze api.my-app.com: Awuyazi imibuzo ethile kusengaphambili ngoba yenziwe ngokuguqukayo kusuka ku-JS. Lapha kufaneleka impela ukusebenzisa ithegi ukuze uxhume ngaphambilini esizindeni.
Uhlelo lwakho lokusebenza lungabanjwa my-app.com futhi isebenzisa i-Google Fonts. Alandwa ngezinyathelo ezimbili: okokuqala, ifayela le-CSS lilandwa esizindeni fonts.googleapis.com, bese leli fayela licela amafonti nge fonts.gstatic.com. Ngeke wazi ukuthi yimaphi amafayela efonti athile asuka kuwo fonts.gstatic.com uzodinga uze ulayishe ifayela le-CSS, ukuze sikwazi ukwenza uxhumano lokuqala ngaphambili.

Sebenzisa le thegi ukusheshisa isikripthi senkampani yangaphandle noma isitayela kancane ngenxa yokuxhumana okusungulwe ngaphambilini.

Ungasebenzisi ngokweqile. Ukusungula nokugcina uxhumano kuwumsebenzi obizayo kukho kokubili iklayenti neseva. Sebenzisa le thegi ubuningi bezizinda ezi-4-6.

Imininingwane

Umaka ozikhethela wona. Isiphequluli akudingekile ukuthi silandele lo myalelo futhi singase singawunaki, isibonelo, uma ukuxhumana okuningi sekusunguliwe noma kwezinye izimo.

Ihlanganisani inqubo yokuxhuma?. Ukuze uxhume kusayithi ngalinye, isiphequluli kufanele senze okulandelayo:

Ukulungiswa kwe-DNS. Thola ikheli le-IP leseva (216.58.215.78) egameni lesizinda elishiwo (google.com).
Ukuxhawula kwe-TCP. Shintshanisa amaphakethe (iklayenti → iseva → iklayenti) ukuze uqalise uxhumano lwe-TCP neseva.
Ukuxhawula i-TLS (amasayithi we-HTTPS kuphela). Imijikelezo emibili yokushintshisana kwephakethe (iklayenti → iseva → iklayenti → iseva → iklayenti) ukuze kuqalwe iseshini evikelekile ye-TLS.

Qaphela: I-HTTP/3 izothuthuka futhi isheshise indlela yokuxhawula, kodwa kusekude phambili.

dns-prefetch

<link rel= "dns-prefetch"> icela isiphequluli ukuthi senze isinqumo se-DNS sesizinda kusenesikhathi uma uzoxhuma kuso maduze futhi ufuna ukusheshisa ukuxhumeka kokuqala.

Isiphequluli kufanele sinqume ikheli le-IP lesizinda uma sizobuyisa noma yiziphi izinsiza esizindeni esisha esivela eceleni. Isibonelo, ukulayisha amafonti e-Google, amafonti e-React ku-CDN, noma ukucela impendulo ye-JSON kuseva ye-API.

Esizindeni esisha ngasinye, ukulungiswa kwerekhodi le-DNS ngokuvamile kuthatha cishe u-20-120 ms. Lokhu kuthinta kuphela ukulayishwa kwensiza yokuqala kusuka esizindeni esinikeziwe, kodwa kusethula ukubambezeleka. Uma senza ukulungiswa kwe-DNS kusengaphambili, sizokonga isikhathi futhi silayishe insiza ngokushesha.

I-syntax

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

href ikhombisa igama lesizinda ofuna ukulisethela lona ikheli le-IP. Ingacaciswa ngesiqalo (https://domain.com) noma ngaphandle kwayo (//domain.com).

Uzosebenzisa nini

Sebenzisa ezizindeni ezizodingeka maduze ukulanda izinsiza kusuka lapho isiphequluli esingazi ngaphambili. Ngokwesibonelo:

Uhlelo lwakho lokusebenza lungabanjwa my-app.com futhi yenza izicelo ze-AJAX ukuze api.my-app.com: Awuyazi imibuzo ethile kusengaphambili ngoba yenziwe ngokuguqukayo kusuka ku-JS. Lapha kufaneleka impela ukusebenzisa ithegi ukuze uxhume ngaphambilini esizindeni.
Uhlelo lwakho lokusebenza lungabanjwa my-app.com, futhi isebenzisa i-Google Fonts. Alandwa ngezinyathelo ezimbili: okokuqala, ifayela le-CSS lilandwa esizindeni fonts.googleapis.com, bese leli fayela licela amafonti nge fonts.gstatic.com. Ngeke wazi ukuthi yimaphi amafayela efonti athile asuka kuwo fonts.gstatic.com uzoyidinga uze ulayishe ifayela le-CSS, ngakho-ke singakwazi ukwenza uxhumano lokuqala kusenesikhathi.

Sebenzisa le thegi ukusheshisa isikripthi senkampani yangaphandle noma isitayela kancane ngenxa yokuxhumana okusungulwe ngaphambilini.

Sicela uqaphele izici ezifanayo ku <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Ngokuvamile akunangqondo ukuwasebenzisa ndawonye esizindeni esisodwa: <link rel= "preconnect"> vele ihlanganisa <link rel= "dns-prefetch"/> nokunye okuningi. Lokhu kungathethelelwa ezimweni ezimbili:

Uyafuna ukusekela iziphequluli ezindala?. <link rel= "dns-prefetch" /> isekelwe ngu kusukela ku-IE10 nakuSafari 5. <link rel= "preconnect"> yasekelwa isikhashana ku-Chrome nakuFirefox, kodwa yengezwe kuphela ku-Safari ngo-11.1 futhi namanje akusekelwa ku-IE/Edge. Uma udinga ukusekela lezi ziphequluli, sebenzisa <link rel= "dns-prefetch" /> njengenketho yokusekelayo ye <link rel= "preconnect">.

Ufuna ukusheshisa ukuxhumeka ezizindeni ezingaphezu kuka-4-6. Maka <link rel= "preconnect"> Akunconywa ukusebenzisa nezizinda ezingaphezu kuka-4-6, ngoba ukusungula nokugcina uxhumano kuwumsebenzi obizayo. <link rel= "dns-prefetch" /> idla izinsiza ezincane, ngakho-ke isebenzise uma kunesidingo.

Imininingwane

Umaka ozikhethela wona. Isiphequluli akudingekile ukuthi silandele lo myalelo, ngakho-ke kungenzeka singenzi ukulungiswa kwe-DNS, isibonelo, uma kukhona omaka abaningi abanjalo ekhasini noma kwesinye isimo.

Yini i-DNS. Iseva ngayinye ku-inthanethi inekheli le-IP elihlukile, elibukeka ngathi 216.58.215.78. Igama lesayithi livamise ukufakwa kubha yekheli lesiphequluli (isibonelo, google.com), kanye namaseva e-DNS (Domain Name System) ahambisana nawo nekheli le-IP leseva (216.58.215.78).

Ukuze unqume ikheli le-IP, isiphequluli kufanele sibuze iseva ye-DNS. Kuthatha u-20−120 ms uma uxhuma esizindeni esisha esivela eceleni.

I-DNS igcinwe kunqolobane, nakuba ingethembekile kakhulu. Amanye ama-OS neziphequluli zigcina inqolobane yemibuzo ye-DNS: lokhu kuzokonga isikhathi emibuzweni ephindaphindiwe, kodwa ukugcinwa kunqolobane akukwazi ukuthenjelwa kukho. Ku-Linux ngokuvamile ayisebenzi nhlobo. I-Chrome inenqolobane ye-DNS, kodwa ihlala iminithi kuphela. IWindows igcina izimpendulo ze-DNS izinsuku ezinhlanu.

nikela ngaphambili

<link rel= "prerender"> icela isiphequluli ukuthi silande i-URL futhi siyibonise kuthebhu engabonakali. Uma umsebenzisi achofoza isixhumanisi, ikhasi kufanele liboniswe ngokushesha. Lokhu kuyasiza uma uqinisekile ukuthi umsebenzisi uzovakashela ikhasi elithile futhi afune ukusheshisa isibonisi salo.

Ngaphandle (noma ngenxa) yokuphumelela okukhethekile kwale thegi, ngo-2019 <link rel= "prerender"> ukusekelwa kabi kuziphequluli ezinkulu. Bona imininingwane eyengeziwe. ngezansi.

I-syntax

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

href ukhomba i-URL ofuna ukuqala ukuyinikeza ngemuva.

Uzosebenzisa nini

Uma uqinisekile ngempela ukuthi umsebenzisi uzoya ekhasini elithile. Uma “unomhubhe” lapho u-70% wezivakashi ezifika ekhasini A ziya ekhasini B, lapho-ke <link rel= "prerender"> ekhasini A kuzosiza ukuveza ikhasi B ngokushesha okukhulu.

Ungasebenzisi ngokweqile. Ukunikeza kusengaphambili kubiza kakhulu ngokomkhawulokudonsa kanye nenkumbulo. Ungasebenzisi <link rel= "prerender"> ngaphezu kwekhasi elilodwa.

Imininingwane

Umaka ozikhethela wona. Isiphequluli akudingekile ukuthi silandele lo myalelo futhi singase singawunaki, isibonelo, ekuxhumekeni okunensayo noma uma kunememori yamahhala enganele.

Ukugcina inkumbulo I-Chrome ayenzi ukunikezwa okugcwele, futhi layisha kuqala i-NoState kuphela. Lokhu kusho ukuthi i-Chrome ilayisha ikhasi nazo zonke izisetshenziswa zalo, kodwa ayinikezi noma isebenzise i-JavaScript.

IFirefox neSafari aziyisekeli nhlobo le thegi. Lokhu akwephuli ukucaciswa, njengoba iziphequluli azidingeki ukuthi zilandele lo myalelo; kodwa kusadabukisa. Isiphazamisi sokuqalisa IFirefox isivule iminyaka eyisikhombisa. Kunemibiko yokuthi iSafari nayo ayisekeli le thegi.

Isifingqo

Sebenzisa:

<link rel= "preload"> - uma udinga insiza ngemizuzwana embalwa
<link rel= "prefetch"> - uma udinga insiza ekhasini elilandelayo
<link rel= "preconnect"> - uma wazi ukuthi uzodinga insiza maduze, kodwa awukakayazi i-URL yayo egcwele
<link rel= "dns-prefetch"> - ngokufanayo, uma wazi ukuthi uzodinga insiza maduze, kodwa awukayazi i-URL yayo egcwele (yeziphequluli ezindala)
<link rel= "prerender"> - uma uqinisekile ukuthi abasebenzisi bazoya ekhasini elithile, futhi ufuna ukusheshisa ukuboniswa kwalo

Source: www.habr.com

Layisha kuqala, landa kuqala nabanye omaka

layisha kuqala

I-syntax

Uzosebenzisa nini

Imininingwane

preetch

I-syntax

Uzosebenzisa nini

Imininingwane

ukuxhuma kuqala

I-syntax

Uzosebenzisa nini

Imininingwane

dns-prefetch

I-syntax

Uzosebenzisa nini

Imininingwane

nikela ngaphambili

I-syntax

Uzosebenzisa nini

Imininingwane

Isifingqo

Engeza amazwana Отменить ответ