Kuna njia nyingi za kuboresha utendaji wa wavuti. Mojawapo ni kupakia awali maudhui ambayo yatahitajika baadaye. Uchakataji wa awali wa CSS, uwasilishaji wa mapema wa ukurasa kamili au azimio la jina la kikoa. Tunafanya kila kitu mapema, na kisha kuonyesha matokeo mara moja! Sauti poa.

Kinachopendeza zaidi ni kwamba inatekelezwa kwa urahisi sana. Vitambulisho vitano kipe kivinjari amri ya kufanya vitendo vya awali:

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

Hebu tueleze kwa ufupi kile wanachofanya na wakati wa kuzitumia.

Rukia kwa: pakia mapema · preetch · kuunganisha awali · dns-prefetch · prerender

pakia mapema

<link rel= "preload"> huambia kivinjari kupakia na kuweka akiba ya rasilimali (kama vile hati au laha ya mtindo) haraka iwezekanavyo. Hii ni muhimu wakati rasilimali inahitajika sekunde chache baada ya upakiaji wa ukurasa - na unataka kuharakisha mchakato.

Kivinjari haifanyi chochote na rasilimali baada ya kupakia. Hati hazitekelezwi, laha za mtindo hazitumiki. Rasilimali imehifadhiwa kwa urahisi na inapatikana mara moja baada ya ombi.

syntax

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

href inaelekeza kwenye rasilimali unayotaka kupakua.

as inaweza kuwa kitu chochote ambacho kinaweza kupakuliwa kwenye kivinjari:

style kwa karatasi za mtindo,
script kwa maandishi,
font kwa fonti,
fetch kwa rasilimali zilizopakiwa kwa kutumia fetch() au XMLHttpRequest,
tazama orodha kamili kwenye MDN.

Ni muhimu kutaja sifa as - hii husaidia kivinjari kuweka kipaumbele vizuri na kupanga upakuaji.

Wakati wa kutumia

Tumia upakiaji wa awali wakati rasilimali inahitajika katika siku za usoni karibu sana. Kwa mfano:

Fonti zisizo za kawaida kutoka kwa faili ya nje:
```

<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
By default comic-sans.woff2 itaanza kupakia tu baada ya kupakua na kuchanganua index.css. Ili kuepuka kusubiri kwa muda mrefu, unaweza kupakua fonti mapema ukitumia <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```

Ukitenganisha mitindo yako kulingana na mbinu CSS muhimu katika sehemu mbili, muhimu (kwa utoaji wa haraka) na zisizo muhimu:

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

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

Kwa mbinu hii, mitindo isiyo ya muhimu itaanza kupakiwa tu wakati JavaScript inapoendeshwa, ambayo inaweza kutokea sekunde chache baada ya kutoa. Badala ya kusubiri matumizi ya JS <link rel= "preload">ili kuanza kupakua mapema:

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

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

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

Usitumie upakiaji kupita kiasi. Ikiwa unapakia kila kitu mfululizo, tovuti haitaharakisha kichawi; kinyume chake, itazuia kivinjari kupanga kazi yake kwa usahihi.

Haipaswi kuchanganyikiwa na kuleta mapema. Usitumie <link rel= "preload">, ikiwa hauitaji rasilimali mara baada ya upakiaji wa ukurasa. Ikiwa unahitaji baadaye, kwa mfano kwa ukurasa unaofuata, kisha utumie <link rel= "prefetch">.

Maelezo ya

Hii ni tagi inayohitajika kutekelezwa na kivinjari (ikiwa kinaiunga mkono), tofauti na vitambulisho vingine vyote inayohusiana na upakiaji mapema. Kivinjari lazima kipakue rasilimali iliyoainishwa ndani <link rel="preload">. Katika hali nyingine inaweza kupuuza upakiaji wa awali, kwa mfano ikiwa inaendeshwa kwenye muunganisho wa polepole.

Vipaumbele. Vivinjari kwa kawaida huweka vipaumbele tofauti kwa rasilimali tofauti (mitindo, hati, fonti, n.k.) ili kupakia rasilimali muhimu zaidi kwanza. Katika kesi hii, kivinjari huamua kipaumbele kwa sifa as. Kwa kivinjari cha Chrome unaweza kuangalia Jedwali kamili la kipaumbele.

preetch

<link rel= "prefetch"> huuliza kivinjari kupakua na kuweka akiba ya rasilimali (kama vile hati au laha la mtindo) chinichini. Upakiaji hutokea kwa kipaumbele cha chini kwa hivyo hauingiliani na rasilimali muhimu zaidi. Hii ni muhimu ikiwa rasilimali inahitajika kwenye ukurasa unaofuata na unataka kuihifadhi mapema.

Hapa, pia, kivinjari haifanyi chochote na rasilimali baada ya kupakia. Hati hazitekelezwi, laha za mtindo hazitumiki. Rasilimali imehifadhiwa kwa urahisi na inapatikana mara moja baada ya ombi.

syntax

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

href inaelekeza kwenye rasilimali unayotaka kupakua.

as inaweza kuwa kitu chochote ambacho kinaweza kupakuliwa kwenye kivinjari:

style kwa karatasi za mtindo,
script kwa maandishi,
font kwa fonti,
fetch kwa rasilimali zilizopakiwa kwa kutumia fetch() au XMLHttpRequest,
tazama orodha kamili kwenye MDN.

Ni muhimu kutaja sifa as - hii husaidia kivinjari kuweka kipaumbele kwa usahihi na kupanga upakuaji.

Wakati wa kutumia

Ili kupakia rasilimali kutoka kwa kurasa zingine, ikiwa unahitaji rasilimali kutoka kwa ukurasa mwingine, na unataka kuipakia mapema kisha uharakishe utoaji wa ukurasa huo. Kwa mfano:

Una duka la mtandaoni, na 40% ya watumiaji huacha ukurasa wa nyumbani kwa ukurasa wa bidhaa. Tumia <link rel= "prefetch">, inapakia faili za CSS na JS ili kutoa kurasa za bidhaa.
Una programu ya ukurasa mmoja, na kurasa tofauti hupakia vifurushi tofauti. Mtumiaji anapotembelea ukurasa, vifurushi vya kurasa zote anazounganisha vinaweza kupakiwa mapema.

Kuna uwezekano kuwa lebo hii inaweza kutumika kwa usalama kwa kiwango chochote.. Vivinjari kwa kawaida huratibu uletaji mapema kwa kipaumbele cha chini zaidi, kwa hivyo haisumbui mtu yeyote. Kumbuka tu kwamba hutumia trafiki ya mtumiaji, ambayo inaweza kugharimu pesa.

Sio kwa maombi ya dharura. Usitumie <link rel= "prefetch">, wakati rasilimali inahitajika katika sekunde chache. Katika kesi hii, tumia <link rel= "preload">.

Maelezo ya

Lebo ya hiari. Kivinjari hakihitajiki kufuata maagizo haya, inaweza kupuuza, kwa mfano, kwenye muunganisho wa polepole.

Kipaumbele katika Chrome. Katika Chrome <link rel= "prefetch"> kawaida hutekelezwa kwa kipaumbele cha chini (ona Jedwali kamili la kipaumbele), yaani, baada ya kupakia kila kitu kingine.

kuunganisha awali

<link rel= "preconnect"> huuliza kivinjari kuunganisha kwenye kikoa mapema unapotaka kuharakisha usanidi wa muunganisho katika siku zijazo.

Kivinjari lazima kianzishe muunganisho ikiwa kitapata rasilimali zozote kutoka kwa kikoa kipya cha wahusika wengine. Kwa mfano, ikiwa inapakia Fonti za Google, fonti za React kutoka CDN, au ikiomba jibu la JSON kutoka kwa seva ya API.

Kuanzisha muunganisho mpya kwa kawaida huchukua milisekunde mia chache. Inafanywa mara moja, lakini bado inachukua muda. Ikiwa umeanzisha muunganisho mapema, utaokoa wakati na kupakua rasilimali kutoka kwa kikoa hiki haraka.

syntax

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

href inaonyesha jina la kikoa ambalo unataka kuamua anwani ya IP. Inaweza kubainishwa na kiambishi awali (https://domain.com) au bila hiyo (//domain.com).

Wakati wa kutumia

Tumia kwa vikoa ambavyo vitahitajika hivi karibuni kupakua mtindo muhimu, hati au picha kutoka hapo, lakini bado hujui URL ya rasilimali. Kwa mfano:

Ombi lako linapangishwa my-app.com na hufanya maombi ya AJAX kwa api.my-app.com: Hujui maswali mahususi mapema kwa sababu yanaundwa kwa nguvu kutoka kwa JS. Hapa inafaa kabisa kutumia lebo ili kuunganisha awali kwenye kikoa.
Ombi lako linapangishwa my-app.com na hutumia Fonti za Google. Zinapakuliwa kwa hatua mbili: kwanza, faili ya CSS inapakuliwa kutoka kwa kikoa fonts.googleapis.com, basi faili hii inaomba fonti na fonts.gstatic.com. Huwezi kujua ni faili gani maalum za fonti zinatoka fonts.gstatic.com utahitaji hadi upakie faili ya CSS, ili tuweze tu kufanya muunganisho wa awali kabla.

Tumia lebo hii kuharakisha hati au mtindo wa watu wengine kidogo kwa sababu ya muunganisho uliowekwa hapo awali.

Usitumie kupita kiasi. Kuanzisha na kudumisha muunganisho ni operesheni ya gharama kubwa kwa mteja na seva. Tumia lebo hii kwa upeo wa vikoa 4-6.

Maelezo ya

Lebo ya hiari. Kivinjari hakihitajiki kufuata maagizo haya na inaweza kupuuza, kwa mfano, ikiwa viunganisho vingi tayari vimeanzishwa au katika hali nyingine.

Mchakato wa uunganisho unajumuisha nini?. Ili kuunganisha kwa kila tovuti, kivinjari lazima kifanye yafuatayo:

Ubora wa DNS. Tafuta anwani ya IP ya seva (216.58.215.78) kwa jina la kikoa lililotajwa (google.com).
TCP kupeana mkono. Badilisha pakiti (mteja → seva → mteja) ili kuanzisha muunganisho wa TCP na seva.
TLS handshake (tovuti za HTTPS pekee). Mizunguko miwili ya kubadilishana pakiti (mteja → seva → mteja → seva → mteja) ili kuanzisha kipindi salama cha TLS.

Kumbuka: HTTP/3 itaboresha na kuharakisha utaratibu wa kupeana mikono, lakini bado uko mbali.

dns-prefetch

<link rel= "dns-prefetch"> huuliza kivinjari kutekeleza azimio la DNS kwa kikoa mapema ikiwa utaunganisha kwa hiyo hivi karibuni na ungependa kuharakisha muunganisho wa awali.

Kivinjari lazima kibainishe anwani ya IP ya kikoa ikiwa kitapata rasilimali zozote kutoka kwa kikoa kipya cha watu wengine. Kwa mfano, kupakia Fonti za Google, fonti za React kutoka CDN, au kuomba jibu la JSON kutoka kwa seva ya API.

Kwa kila kikoa kipya, azimio la rekodi ya DNS kwa kawaida huchukua takriban 20-120 ms. Hii inathiri tu upakiaji wa rasilimali ya kwanza kutoka kwa kikoa fulani, lakini bado inaleta ucheleweshaji. Ikiwa tutafanya azimio la DNS mapema, tutaokoa wakati na kupakia rasilimali haraka.

syntax

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

href inaonyesha jina la kikoa ambalo unataka kuweka anwani ya IP. Inaweza kubainishwa na kiambishi awali (https://domain.com) au bila hiyo (//domain.com).

Wakati wa kutumia

Tumia kwa vikoa ambavyo vitahitajika hivi karibuni kupakua rasilimali kutoka hapo ambazo kivinjari hajui kuhusu mapema. Kwa mfano:

Ombi lako linapangishwa my-app.com na hufanya maombi ya AJAX kwa api.my-app.com: Hujui maswali mahususi mapema kwa sababu yanaundwa kwa nguvu kutoka kwa JS. Hapa inafaa kabisa kutumia lebo ili kuunganisha awali kwenye kikoa.
Ombi lako linapangishwa my-app.com, na hutumia Fonti za Google. Zinapakuliwa kwa hatua mbili: kwanza, faili ya CSS inapakuliwa kutoka kwa kikoa fonts.googleapis.com, basi faili hii inaomba fonti na fonts.gstatic.com. Huwezi kujua ni faili gani maalum za fonti zinatoka fonts.gstatic.com utaihitaji hadi upakie faili ya CSS, kwa hivyo tunaweza tu kufanya muunganisho wa awali mapema.

Tumia lebo hii kuharakisha hati au mtindo wa watu wengine kidogo kwa sababu ya muunganisho uliowekwa hapo awali.

Tafadhali kumbuka sifa zinazofanana na <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Kwa kawaida haileti maana kuzitumia pamoja kwa kikoa kimoja: <link rel= "preconnect"> tayari inajumuisha <link rel= "dns-prefetch"/> na mengi zaidi. Hii inaweza kuhesabiwa haki katika kesi mbili:

Je, ungependa kutumia vivinjari vya zamani?. <link rel= "dns-prefetch" /> mkono na tangu IE10 na Safari 5. <link rel= "preconnect"> iliungwa mkono kwa muda katika Chrome na Firefox, lakini iliongezwa tu kwa Safari mnamo 11.1 na bado haitumiki katika IE/Edge. Ikiwa unahitaji kuunga mkono vivinjari hivi, tumia <link rel= "dns-prefetch" /> kama chaguo chelezo kwa <link rel= "preconnect">.

Unataka kuharakisha miunganisho kwa zaidi ya vikoa 4-6. Lebo <link rel= "preconnect"> Haipendekezi kutumia na vikoa zaidi ya 4-6, kwani kuanzisha na kudumisha uunganisho ni operesheni ya gharama kubwa. <link rel= "dns-prefetch" /> hutumia rasilimali kidogo, kwa hivyo itumie ikiwa ni lazima.

Maelezo ya

Lebo ya hiari. Kivinjari hakihitajiki kufuata maagizo haya, kwa hivyo haiwezi kufanya azimio la DNS, kwa mfano, ikiwa kuna vitambulisho vingi kwenye ukurasa au katika hali nyingine.

DNS ni nini. Kila seva kwenye mtandao ina anwani ya kipekee ya IP, ambayo inaonekana kama 216.58.215.78. Jina la tovuti kawaida huingizwa kwenye upau wa anwani wa kivinjari (kwa mfano, google.com), na seva za DNS (Domain Name System) zinalinganisha na anwani ya IP ya seva (216.58.215.78).

Kuamua anwani ya IP, kivinjari lazima kiulize seva ya DNS. Inachukua 20−120 ms wakati wa kuunganisha kwenye kikoa kipya cha watu wengine.

DNS imehifadhiwa, ingawa sio ya kuaminika sana. Baadhi ya mifumo ya uendeshaji na vivinjari huweka akiba ya maswali ya DNS: hii itaokoa muda kwa maswali yanayorudiwa, lakini uakibishaji hauwezi kutegemewa. Kwenye Linux kawaida haifanyi kazi hata kidogo. Chrome ina akiba ya DNS, lakini hudumu kwa dakika moja tu. Windows huhifadhi majibu ya DNS kwa siku tano.

prerender

<link rel= "prerender"> huuliza kivinjari kupakua URL na kuionyesha kwenye kichupo kisichoonekana. Mtumiaji anapobofya kiungo, ukurasa unapaswa kuonyeshwa mara moja. Hii ni muhimu ikiwa una uhakika kwamba mtumiaji atatembelea ukurasa fulani na kutaka kuharakisha onyesho lake.

Licha ya (au kwa sababu ya) ufanisi wa kipekee wa lebo hii, katika 2019 <link rel= "prerender"> haitumiki vizuri katika vivinjari vikuu. Tazama maelezo zaidi. chini ya.

syntax

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

href inaelekeza kwenye URL unayotaka kuanza kutoa chinichini.

Wakati wa kutumia

Wakati una hakika kwamba mtumiaji ataenda kwenye ukurasa fulani. Ikiwa una "handaki" ambayo 70% ya wageni kwenye ukurasa A huenda kwenye ukurasa wa B, basi <link rel= "prerender"> kwenye ukurasa A itasaidia kuonyesha ukurasa B haraka sana.

Usitumie kupita kiasi. Utoaji wa mapema ni ghali sana katika suala la kipimo data na kumbukumbu. Usitumie <link rel= "prerender"> kwa zaidi ya ukurasa mmoja.

Maelezo ya

Lebo ya hiari. Kivinjari hakihitajiki kufuata maagizo haya na inaweza kupuuza, kwa mfano, kwenye muunganisho wa polepole au wakati hakuna kumbukumbu ya kutosha ya bure.

Ili kuhifadhi kumbukumbu Chrome haifanyi uwasilishaji kamiliNa pakia tu NoState. Hii inamaanisha kuwa Chrome hupakia ukurasa na rasilimali zake zote, lakini haitoi au kutekeleza JavaScript.

Firefox na Safari hazitumii lebo hii hata kidogo. Hii haikiuki vipimo, kwani vivinjari hazihitajiki kufuata maagizo haya; lakini bado huzuni. Hitilafu ya utekelezaji Firefox imekuwa wazi kwa miaka saba. Kuna taarifa kwamba Safari haiauni tagi hii pia.

Muhtasari

Tumia:

<link rel= "preload"> - wakati unahitaji rasilimali katika sekunde chache
<link rel= "prefetch"> - unapohitaji rasilimali kwenye ukurasa unaofuata
<link rel= "preconnect"> - unapojua kuwa utahitaji rasilimali hivi karibuni, lakini bado haujui URL yake kamili
<link rel= "dns-prefetch"> - vivyo hivyo, unapojua kuwa utahitaji rasilimali hivi karibuni, lakini bado haujui URL yake kamili (kwa vivinjari vya zamani)
<link rel= "prerender"> - wakati una uhakika kwamba watumiaji wataenda kwenye ukurasa fulani, na unataka kuharakisha onyesho lake

Chanzo: mapenzi.com

Pakia mapema, leta na lebo zingine

pakia mapema

syntax

Wakati wa kutumia

Maelezo ya

preetch

syntax

Wakati wa kutumia

Maelezo ya

kuunganisha awali

syntax

Wakati wa kutumia

Maelezo ya

dns-prefetch

syntax

Wakati wa kutumia

Maelezo ya

prerender

syntax

Wakati wa kutumia

Maelezo ya

Muhtasari

Kuongeza maoni Kufuta kujibu