ProHoster > Pūnaewele > Nā Administration > Preload, prefetch a me nā hōʻailona ʻē aʻe

Preload, prefetch a me nā hōʻailona ʻē aʻe

he nui na nui nā ala e hoʻomaikaʻi ai i ka hana pūnaewele. ʻO kekahi o lākou ka hoʻouka mua ʻana i nā ʻike e pono ai ma hope. ʻO ka hoʻoponopono mua ʻana o CSS, ka ʻaoʻao piha ma mua o ka hoʻoholo ʻana i ka inoa inoa. Hana mākou i nā mea āpau ma mua, a laila hōʻike koke i ka hopena! He kani maikaʻi.

ʻO ka mea ʻoi aku ka maikaʻi o ka hoʻokō maʻalahi. ʻElima mau hōʻailona hāʻawi i ka polokalamu kele pūnaewele i kauoha e hana i nā hana mua:

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


E wehewehe pōkole kākou i kā lākou hana a me ka wā e hoʻohana ai.

Lele i: preload · kiʻi mua · hoʻopili mua · dns-prefetch · hāʻawi mua

preload

<link rel= "preload"> haʻi i ka polokalamu kele pūnaewele e hoʻouka a hūnā i kahi kumuwaiwai (e like me ka palapala a i ʻole ka pepa style) i ka hiki. Pono kēia i ka wā e pono ai kahi kumuwaiwai i kekahi mau kekona ma hope o ka hoʻouka ʻana o ka ʻaoʻao - a makemake ʻoe e wikiwiki i ke kaʻina hana.

ʻAʻole hana ka polokalamu kele pūnaewele me ka waiwai ma hope o ka hoʻouka ʻana. ʻAʻole i hoʻokō ʻia nā palapala, ʻaʻole hoʻohana ʻia nā ʻano pepa. Hoʻopili wale ʻia ka punawai a loaʻa koke ke noi.

Ka Mooolelo O

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

href kuhikuhi i ka punawai āu e makemake ai e hoʻoiho.

as Hiki ke hoʻoiho ʻia ma ka polokalamu kele pūnaewele:

  • style no ka pepa style,
  • script no ka palapala,
  • font no nā font,
  • fetch no nā kumuwaiwai i hoʻouka ʻia me ka hoʻohana ʻana fetch() ai ole ia, XMLHttpRequest,
  • ʻike i ka papa inoa piha ma MDN.

He mea nui e wehewehe i ke ano as - kōkua kēia i ka polokalamu kele e hoʻonohonoho pono a hoʻonohonoho i nā hoʻoiho.

Ke hoʻohana

E hoʻohana i ka hoʻouka mua ʻana i ka wā e pono ai ke kumuwaiwai i ka wā e hiki mai ana. ʻo kahi laʻana:

  • Nā kikokikona maʻamau ʻole mai kahi faila waho: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    ma ka paʻamau comic-sans.woff2 e hoʻomaka ana e hoʻouka wale ma hope o ka hoʻoiho ʻana a me ka hoʻoiho ʻana index.css. I mea e pale ai i ka kali lōʻihi, hiki iā ʻoe ke hoʻoiho i ka font ma mua o ka hoʻohana ʻana <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Inā hoʻokaʻawale ʻoe i kāu mau ʻano e like me ke ʻano CSS koʻikoʻi i ʻelua ʻāpana, koʻikoʻi (no ka hoʻopuka koke) a me ka koʻikoʻi ʻole: 
    <style>
/* Inlined critical styles */
</style>

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

    Me kēia ala, e hoʻomaka ana nā ʻano koʻikoʻi ʻole i ka hoʻouka ʻana i ka wā e holo ai ʻo JavaScript, hiki ke hana i kekahi mau kekona ma hope o ka hāʻawi ʻana. Ma kahi o ka kali ʻana i ka hoʻohana ʻana iā JS <link rel= "preload">e hoʻomaka e hoʻoiho ma mua:

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

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

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

Mai hoʻohana nui i ka hoʻouka ʻana. Inā ʻoe e hoʻouka i nā mea āpau i ka lālani, ʻaʻole e wikiwiki ka pūnaewele; akā, e pale ia i ka polokalamu mai ka hoʻolālā pololei ʻana i kāna hana.

ʻAʻole e huikau me ka prefetching. Mai hoʻohana <link rel= "preload">, inā ʻaʻole pono ʻoe i ka kumuwaiwai ma hope koke o ka hoʻouka ʻana o ka ʻaoʻao. Inā makemake ʻoe iā ia ma hope, no ka laʻana no ka ʻaoʻao aʻe, a laila e hoʻohana <link rel= "prefetch">.

Nānā i nā kiko'ī

He hōʻailona pono kēia e hoʻokō ʻia e ka polokalamu kele pūnaewele (inā kākoʻo ia), ʻaʻole like me nā hōʻailona ʻē aʻe pili i ka preloading. Pono ka polokalamu kele pūnaewele e hoʻoiho i ka kumuwaiwai i kuhikuhi ʻia ma <link rel="preload">. I kekahi mau hihia ʻē aʻe paha e haʻalele paha ia i ka hoʻouka ʻana, no ka laʻana inā e holo ana ia ma kahi pili lohi.

Nā mea nui. Hāʻawi ka poʻe mākaʻikaʻi i nā mea nui i nā kumu waiwai like ʻole (nā ʻano, palapala, font, etc.) i mea e hoʻouka mua ai i nā kumuwaiwai koʻikoʻi. I kēia hihia, hoʻoholo ka polokalamu kele i ka mea nui ma ke ʻano as. No ka polokalamu kele pūnaewele Chrome hiki iā ʻoe ke nānā papa kuhikuhi piha.

Preload, prefetch a me nā hōʻailona ʻē aʻe

kiʻi mua

<link rel= "prefetch"> noi i ka polokalamu kele pūnaewele e hoʻoiho a hūnā i kahi kumuwaiwai (e like me ka palapala a i ʻole ke ʻano pepa) ma hope. Hana ʻia ka hoʻouka ʻana ma kahi haʻahaʻa no laila ʻaʻole ia e hoʻopilikia i nā kumuwaiwai koʻikoʻi. Pono kēia inā makemake ʻia ka punawai ma ka ʻaoʻao aʻe a makemake ʻoe e hūnā ma mua.

Eia nō hoʻi, ʻaʻohe mea o ka polokalamu kele pūnaewele me ka waiwai ma hope o ka hoʻouka ʻana. ʻAʻole i hoʻokō ʻia nā palapala, ʻaʻole hoʻohana ʻia nā ʻano pepa. Hoʻopili wale ʻia ka punawai a loaʻa koke ke noi.

Ka Mooolelo O

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

href kuhikuhi i ka punawai āu e makemake ai e hoʻoiho.

as Hiki ke hoʻoiho ʻia ma ka polokalamu kele pūnaewele:

  • style no ka pepa style,
  • script no ka palapala,
  • font no nā font,
  • fetch no nā kumuwaiwai i hoʻouka ʻia me ka hoʻohana ʻana fetch() ai ole ia, XMLHttpRequest,
  • ʻike i ka papa inoa piha ma MDN.

He mea nui e wehewehe i ke ano as - kōkua kēia i ka polokalamu kele pūnaewele e hoʻonohonoho pono i ka hoʻoiho ʻana.

Ke hoʻohana

E hoʻouka i nā kumuwaiwai mai nā ʻaoʻao ʻē aʻe, inā makemake ʻoe i kahi kumuwaiwai mai kahi ʻaoʻao ʻē aʻe, a makemake ʻoe e hoʻouka mua iā ia a laila e wikiwiki i ka unuhi ʻana o kēlā ʻaoʻao. ʻo kahi laʻana:

  • He hale kūʻai pūnaewele kāu, a haʻalele ka 40% o nā mea hoʻohana i ka ʻaoʻao home no ka ʻaoʻao huahana. Hoʻohana <link rel= "prefetch">, e hoʻouka ana i nā faila CSS a me JS e hoʻolilo i nā ʻaoʻao huahana.
  • Loaʻa iā ʻoe kahi palapala noi hoʻokahi, a hoʻouka nā ʻaoʻao ʻokoʻa i nā pūʻolo like ʻole. Ke kipa ka mea hoʻohana i kahi ʻaoʻao, hiki ke hoʻouka mua ʻia nā pūʻolo no nā ʻaoʻao a pau āna e loulou ai.

Hiki paha ke hoʻohana pono ʻia kēia tag i kēlā me kēia ʻano.. Hoʻonohonoho pinepine nā mea hoʻokele i ka prefetch me ka mea haʻahaʻa loa, no laila ʻaʻole ia e pilikia i kekahi. E hoʻomanaʻo wale i ka hoʻopau ʻana i nā mea hoʻohana, hiki ke uku kālā.

ʻAʻole no nā noi wikiwiki. Mai hoʻohana <link rel= "prefetch">, i ka wā e pono ai ka waiwai i loko o kekahi mau kekona. I kēia hihia, hoʻohana <link rel= "preload">.

Nānā i nā kiko'ī

Lepe koho. ʻAʻole koi ʻia ka polokalamu kele pūnaewele e hahai i kēia ʻōlelo aʻo; hiki ke nānā ʻole iā ia, no ka laʻana, ma kahi pili lohi.

Ka mea nui ma Chrome. Ma Chrome <link rel= "prefetch"> hoʻokō maʻamau me ka haʻahaʻa haʻahaʻa (e nānā papa kuhikuhi piha), ʻo ia hoʻi, ma hope o ka hoʻouka ʻana i nā mea ʻē aʻe.

hoʻopili mua

<link rel= "preconnect"> noi i ka polokalamu kele pūnaewele e hoʻopili i ka domain ma mua ke makemake ʻoe e wikiwiki i ka hoʻonohonoho pili i ka wā e hiki mai ana.

Pono ka polokalamu kele pūnaewele e hoʻokumu i kahi pilina inā loaʻa iā ia nā kumuwaiwai mai kahi kāʻei kapu ʻekolu. No ka laʻana, inā hoʻouka ia i nā Google Fonts, React fonts mai kahi CDN, a i ʻole e noi i kahi pane JSON mai kahi kikowaena API.

ʻO ka hoʻokumu ʻana i kahi pilina hou he mau haneli mau milliseconds. Hana ʻia i hoʻokahi manawa, akā mau ka manawa. Inā ua hoʻokumu ʻoe i kahi pilina ma mua, e mālama ʻoe i ka manawa a e hoʻoiho wikiwiki i nā kumuwaiwai mai kēia kahua.

Ka Mooolelo O

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

href hōʻike i ka inoa kikowaena āu e makemake ai e hoʻoholo i ka helu IP. Hiki ke kuhikuhi ʻia me kahi prefix (https://domain.com) a me ka ʻole (//domain.com).

Ke hoʻohana

E hoʻohana no nā kāʻei kapu e pono koke ana e hoʻoiho i kahi ʻano koʻikoʻi, palapala a i ʻole kiʻi mai laila, akā ʻaʻole ʻoe i ʻike i ka URL waiwai. ʻo kahi laʻana:

  • Hoʻokipa ʻia kāu palapala noi ma my-app.com a hana AJAX noi i api.my-app.com: ʻAʻole ʻoe i ʻike i nā nīnau kikoʻī ma mua no ka mea ua hana ikaika ʻia lākou mai JS. Maʻaneʻi ua kūpono ke hoʻohana ʻana i kahi hōʻailona e hoʻopili mua i ka waihona.
  • Hoʻokipa ʻia kāu palapala noi ma my-app.com a hoʻohana i nā Google Fonts. Hoʻoiho ʻia lākou ma nā ʻanuʻu ʻelua: ʻo ka mua, lawe ʻia ka faila CSS mai ka waihona fonts.googleapis.com, a laila noi kēia faila i nā font me fonts.gstatic.com. ʻAʻole hiki iā ʻoe ke ʻike i nā faila font kikoʻī mai fonts.gstatic.com pono ʻoe a hiki i ka hoʻouka ʻana i ka faila CSS, no laila hiki iā mākou ke hana i kahi pilina mua ma mua.

E hoʻohana i kēia hōʻailona no ka wikiwiki ʻana i kekahi palapala a i ʻole kaila ʻaoʻao ma muli o ka pilina paʻa mua.

Mai hoʻohana nui. ʻO ka hoʻokumu ʻana a me ka mālama ʻana i kahi pilina he hana pipiʻi no ka mea kūʻai aku a me ke kikowaena. E hoʻohana i kēia hōʻailona no ka lōʻihi o 4-6 mau kikowaena.

Nānā i nā kiko'ī

Lepe koho. ʻAʻole pono ka polokalamu kele pūnaewele e hahai i kēia ʻōlelo aʻo a hiki ke nānā ʻole iā ia, no ka laʻana, inā ua hoʻokumu ʻia nā pilina he nui a i ʻole kekahi hihia ʻē aʻe.

He aha ke kaʻina hana pili?. No ka hoʻopili ʻana i kēlā me kēia pūnaewele, pono ka polokalamu kele pūnaewele e hana i kēia:

  • Hoʻoholo DNS. E huli i ka helu IP kikowaena (216.58.215.78) no ka inoa kikowaena i kuhikuhi ʻia (google.com).
  • TCP lulu lima. Hoʻololi i nā ʻeke (client → server → client) e hoʻomaka i kahi pilina TCP me ke kikowaena.
  • Lū lima TLS (nā kahua HTTPS wale nō). ʻElua pōʻai o ka hoʻololi packet (mea kūʻai → server → mea kūʻai aku → server → mea kūʻai aku) e hoʻomaka i kahi kau TLS paʻa.

E hoʻomaopopo: E hoʻomaikaʻi a wikiwiki ʻo HTTP/3 i ka mīkini lima lima, akā lōʻihi loa ia.

dns-prefetch

<link rel= "dns-prefetch"> noi i ka polokalamu kele pūnaewele e hana i ka hoʻonā DNS no ka domain ma mua inā e hoʻopili koke ʻoe iā ia a makemake ʻoe e wikiwiki i ka pilina mua.

Pono ka polokalamu kele pūnaewele e hoʻoholo i ka helu IP o ka domain inā e kiʻi mai ia i nā kumuwaiwai mai kahi kāʻei kapu ʻekolu hou. No ka laʻana, hoʻouka ʻana i nā Google Fonts, React fonts mai kahi CDN, a i ʻole ke noi ʻana i kahi pane JSON mai kahi kikowaena API.

No kēlā me kēia kikowaena hou, ʻo ka hoʻonā ʻana o ka moʻolelo DNS ma kahi o 20-120 ms. Hoʻopili wale kēia i ka hoʻouka ʻana o ka punawai mua mai kahi kikowaena i hāʻawi ʻia, akā hoʻolauna mau i kahi lohi. Inā mākou e hana i ka hoʻonā DNS ma mua, e mālama mākou i ka manawa a hoʻouka wikiwiki i ka kumuwaiwai.

Ka Mooolelo O

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

href hōʻike i ka inoa inoa āu e makemake ai e hoʻonohonoho i ka helu IP. Hiki ke kuhikuhi ʻia me kahi prefix (https://domain.com) a me ka ʻole (//domain.com).

Ke hoʻohana

E hoʻohana no nā kāʻei kapu e pono koke ana e hoʻoiho i nā kumuwaiwai mai laila ʻaʻole ʻike mua ka polokalamu kele pūnaewele. ʻo kahi laʻana:

  • Hoʻokipa ʻia kāu palapala noi ma my-app.com a hana AJAX noi i api.my-app.com: ʻAʻole ʻoe i ʻike i nā nīnau kikoʻī ma mua no ka mea ua hana ikaika ʻia lākou mai JS. Maʻaneʻi ua kūpono ke hoʻohana ʻana i kahi hōʻailona e hoʻopili mua i ka waihona.
  • Hoʻokipa ʻia kāu palapala noi ma my-app.com, a hoʻohana i Google Fonts. Hoʻoiho ʻia lākou ma nā ʻanuʻu ʻelua: ʻo ka mua, lawe ʻia ka faila CSS mai ka waihona fonts.googleapis.com, a laila noi kēia faila i nā font me fonts.gstatic.com. ʻAʻole hiki iā ʻoe ke ʻike i nā faila font kikoʻī mai fonts.gstatic.com pono ʻoe a hiki i ka hoʻouka ʻana i ka faila CSS, no laila hiki iā mākou ke hana i kahi pilina mua ma mua.

E hoʻohana i kēia hōʻailona no ka wikiwiki ʻana i kekahi palapala a i ʻole kaila ʻaoʻao ma muli o ka pilina paʻa mua.

E ʻoluʻolu e nānā i nā ʻano like me <link rel= "dns-prefetch"/> и <link rel= "preconnect">. ʻAʻole kūpono ka hoʻohana pū ʻana iā lākou no hoʻokahi domain: <link rel= "preconnect"> ua komo <link rel= "dns-prefetch"/> a he nui aku. Hiki ke ho'āponoʻia kēia ma nā hihiaʻelua:

  • Makemake ʻoe e kākoʻo i nā polokalamu kele pūnaewele kahiko?. <link rel= "dns-prefetch" /> kākoʻo ʻia e mai IE10 a me Safari 5. <link rel= "preconnect"> Ua kākoʻo ʻia no kekahi manawa ma Chrome a me Firefox, akā ua hoʻohui ʻia i Safari ma 11.1 a ʻaʻole i kākoʻo ʻia ma IE/Edge. Inā pono ʻoe e kākoʻo i kēia mau polokalamu kele pūnaewele, e hoʻohana <link rel= "dns-prefetch" /> ma ke ʻano he koho hoʻihoʻi no <link rel= "preconnect">.
  • Makemake ʻoe e wikiwiki i nā pilina i ʻoi aku ma mua o 4-6 mau kikowaena. Tag <link rel= "preconnect"> ʻAʻole ʻōlelo ʻia e hoʻohana me ka ʻoi aku ma mua o 4-6 mau kikowaena, ʻoiai ʻo ka hoʻokumu ʻana a me ka mālama ʻana i kahi pilina he hana pipiʻi. <link rel= "dns-prefetch" /> hoʻohana i nā kumuwaiwai liʻiliʻi, no laila e hoʻohana inā pono.

Nānā i nā kiko'ī

Lepe koho. ʻAʻole koi ʻia ka polokalamu kele e hahai i kēia ʻōlelo aʻo, no laila ʻaʻole ia e hana i ka hoʻonā DNS, no ka laʻana, inā he nui nā hōʻailona ma ka ʻaoʻao a i ʻole kekahi hihia ʻē aʻe.

He aha ka DNS. Loaʻa i kēlā me kēia kikowaena ma ka Pūnaewele kahi helu IP kūʻokoʻa, e like me ke ʻano 216.58.215.78. Hoʻokomo pinepine ʻia ka inoa o ka pūnaewele i ka pahu helu o ka polokalamu kele pūnaewele (no ka laʻana, google.com), a me nā kikowaena DNS (Domain Name System) e hoʻohālikelike iā ia me ka IP address o ke kikowaena (216.58.215.78).

No ka hoʻoholo ʻana i kahi helu IP, pono e nīnau ka polokalamu kele pūnaewele i ka server DNS. Loaʻa iā 20−120 ms ke hoʻohui ʻia i kahi kāʻei kapu ʻekolu hou.

Hoʻopili ʻia ʻo DNS, ʻoiai ʻaʻole hilinaʻi nui. Hoʻopaʻa kekahi mau OS a me nā polokalamu kele pūnaewele i nā nīnau DNS: e mālama kēia i ka manawa ma nā nīnau pinepine, akā ʻaʻole hiki ke hilinaʻi ʻia ka cache. Ma Linux, ʻaʻole ia e hana. Loaʻa iā Chrome kahi cache DNS, akā hoʻokahi wale nō minuke. Mālama ʻo Windows i nā pane DNS no ʻelima mau lā.

hāʻawi mua

<link rel= "prerender"> noi i ka polokalamu kele pūnaewele e hoʻoiho i ka URL a hōʻike iā ia ma kahi ʻaoʻao ʻike ʻole. Ke kaomi ka mea hoʻohana i ka loulou, pono e hōʻike koke ʻia ka ʻaoʻao. Pono kēia inā maopopo ʻoe e kipa ka mea hoʻohana i kekahi ʻaoʻao a makemake ʻoe e wikiwiki i kāna hōʻike.

ʻOiai (a i ʻole ma muli o) ka maikaʻi ʻokoʻa o kēia tag, ma 2019 <link rel= "prerender"> kākoʻo maikaʻi ʻole ʻia i nā polokalamu kele nui. E ʻike i nā kikoʻī hou aku. ma lalo.

Ka Mooolelo O

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

href kuhikuhi i ka URL āu e makemake ai e hoʻomaka i ka hana ʻana ma hope.

Ke hoʻohana

Ke maopopo maoli ʻoe e hele ka mea hoʻohana i kekahi ʻaoʻao. Inā loaʻa iā ʻoe kahi "tunnel" kahi e hele ai 70% o nā malihini i ka ʻaoʻao A i ka ʻaoʻao B, a laila <link rel= "prerender"> ma ka ʻaoʻao A e kōkua i ka hōʻike wikiwiki ʻana i ka ʻaoʻao B.

Mai hoʻohana nui. He kumukūʻai nui ka pre-rendering ma ke ʻano o ka bandwidth a me ka hoʻomanaʻo. Mai hoʻohana <link rel= "prerender"> no ka ʻaoʻao hoʻokahi.

Nānā i nā kiko'ī

Lepe koho. ʻAʻole pono ka polokalamu kele pūnaewele e hahai i kēia ʻōlelo aʻo a hiki ke nānā ʻole iā ia, no ka laʻana, ma kahi pili lohi a i ʻole lawa ʻole ka hoʻomanaʻo manuahi.

E mālama i ka hoʻomanaʻo ʻAʻole hana ʻo Chrome i ka unuhi pihaa me ka hoʻouka mua wale nō NoState. ʻO ia ke ʻano o ka hoʻouka ʻana o Chrome i ka ʻaoʻao a me kāna mau kumuwaiwai āpau, akā ʻaʻole ia e hāʻawi a hoʻokō i ka JavaScript.

ʻAʻole kākoʻo ʻo Firefox a me Safari i kēia hōʻailona. ʻAʻole ia e hōʻole i ka ʻōlelo kikoʻī, no ka mea ʻaʻole pono nā mākaʻikaʻi e hahai i kēia ʻōlelo aʻo; aka, kaumaha nae. Hoʻokō ʻino Ua wehe ʻia ʻo Firefox no ʻehiku makahiki. Aia nā hōʻike e pili ana iā Safari ʻAʻole kākoʻo i kēia hōʻailona.

Hōʻuluʻulu

E hoʻohana:

  • <link rel= "preload"> - ke makemake ʻoe i kahi kumuwaiwai i kekahi mau kekona
  • <link rel= "prefetch"> - inā makemake ʻoe i ka kumuwaiwai ma ka ʻaoʻao aʻe
  • <link rel= "preconnect"> - ke ʻike ʻoe e pono koke ana ʻoe i kahi kumuwaiwai, akā ʻaʻole ʻoe i ʻike i kona URL piha
  • <link rel= "dns-prefetch"> - like, ke ʻike ʻoe e pono koke ana ʻoe i kahi kumuwaiwai, akā ʻaʻole ʻoe i ʻike i kāna URL piha (no nā mea nānā kahiko)
  • <link rel= "prerender"> - ke maopopo ʻoe e hele ana nā mea hoʻohana i kekahi ʻaoʻao, a makemake ʻoe e wikiwiki i kāna hōʻike

Source: www.habr.com

Pākuʻi i ka manaʻo hoʻopuka