He he maha nga huarahi hei whakapai ake i te mahinga tukutuku. Ko tetahi o enei ko te whakauru i nga ihirangi ka hiahiatia i muri mai. Ko te tukatuka i mua i te CSS, te wharangi katoa i mua i te whakaputanga, te whakatau ingoa rohe ranei. Ka mahia e matou nga mea katoa i mua, ka whakaatu tonu i te hua! He pai te tangi.

Ko te mea tino pai ake ko te tino whakatinana. E rima nga tohu hoatu he whakahau ki te kaitirotiro kia mahia nga mahi tuatahi:

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

Me whakamarama poto he aha ta raatau mahi me te wa e whakamahia ai.

Peke ki: kōpaki · Tuhinga o mua · hono mua · dns-prefetch · tuku mua

kōpaki

<link rel= "preload"> ka korero ki te kaitirotiro kia utaina me te keteroki i tetahi rauemi (penei i te tuhinga tuhi, i te pepa ahua ranei) ka taea. Ka whai hua tenei ina hiahiatia he rauemi i etahi hēkona i muri i te utaina o te wharangi - me te hiahia kia tere ake te mahi.

Karekau he mahi a te kaitirotiro ki te rauemi i muri i te utaina. Karekau nga tuhinga e mahia ana, karekau e whakamahia nga rau ahua. Ka keteroki noa te rauemi, ka waatea tonu ina tono.

wetereo

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

href tohu ki te rauemi e hiahia ana koe ki te tango.

as he mea ka taea te tango i roto i te tirotiro:

• style mo nga pepa ahua,
• script mo nga tuhinga tuhi,
• font mo nga momotuhi,
• fetch mo nga rauemi e utaina ana ma te whakamahi fetch() ranei XMLHttpRequest,
• tirohia te rarangi katoa runga MDN.

He mea nui kia tohua te huanga as - ka awhina tenei i te kaitirotiro ki te whakarite tika me te whakarite i nga tango.

Ahea ki te whakamahi

Whakamahia te uta i mua i te wa e hiahiatia ana te rauemi i roto i nga wa e tata mai nei. Hei tauira:

• Momotuhi kore-paerewa mai i te konae waho:

  <!-- index.html -->
  <link rel="stylesheet" href="index.css" />
  /* index.css */
  @font-face {
    src: url('comic-sans.woff2') format('woff2');
  }

  i te taunoa comic-sans.woff2 ka timata te uta i muri i te tango me te poroporoaki index.css. Hei karo i te tatari roa, ka taea e koe te tango i te momotuhi i mua atu ma te whakamahi <link rel= "preload">:

  <link rel="preload" href="comic-sans.woff2" as="font" />

• Mena ka wehea e koe o ahua i runga i te huarahi CSS tino nui kia rua nga wahanga, tino nui (mo te whakaputa tere) me te kore-arohaehae:

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

  Ma tenei huarahi, ka timata nga momo kore-arohaehae ki te uta i te wa e rere ana a JavaScript, ka puta he hēkona i muri i te whakaputanga. Engari o te tatari JS whakamahi <link rel= "preload">ki te timata ki te tango i mua ake:

  <style>
  /* Inlined critical styles */
  </style>
  
  <link rel="preload" href="/mi/app/non-critical.css" as="style" />
  
  <script>
  /* Custom JS that starts downloading non-critical styles */
  loadCSS('/app/non-critical.css');
  </script>

Kaua e nui te whakamahi i te utaina. Mena ka utaina e koe nga mea katoa i roto i te rarangi, kaore te papanga e tere tere; engari, ka kore e taea e te kaitirotiro te whakamahere tika i ana mahi.

Kaua e pohehe ki te tango i mua. Kaua e whakamahi <link rel= "preload">, ki te kore koe e hiahia te rauemi i muri tonu i te utaina o te wharangi. Mena ka hiahia koe i muri mai, hei tauira mo te wharangi e whai ake nei, whakamahia <link rel= "prefetch">.

Tirohia nga taipitopito

He tohu e hiahiatia ana tenei kia mahia e te kaitirotiro (mehemea ka tautokohia), kaore i rite ki era atu tohu e pa ana ki te utaina. Me tango e te kaitirotiro te rauemi kua tohua ki roto <link rel="preload">. I etahi atu keehi ka warewarehia te utaina i mua, hei tauira mena kei te rere i runga i te hononga puhoi.

Nga kaupapa matua. I te nuinga o te wa ka tautapahia e nga kaitirotiro nga kaupapa matua rereke ki nga rauemi rereke (ahua, tuhinga, momotuhi, aha atu) kia utaina nga rauemi tino nui i te tuatahi. I tenei take, ka whakatauhia e te kaitirotiro te kaupapa matua ma te huanga as. Mo te kaitirotiro Chrome ka taea e koe te titiro tepu matua katoa.

Tuhinga o mua

<link rel= "prefetch"> ka tono ki te kaitirotiro ki te tango me te keteroki i tetahi rauemi (penei i te tuhinga tuhi, te pepa ahua ranei) kei muri. Ko te utaina he iti te kaupapa matua kia kore ai e whakararu i nga rauemi nui ake. Ka whai hua tenei ki te hiahiatia te rauemi ki te wharangi e whai ake nei ka hiahia koe ki te keteroki i mua.

I konei hoki, kaore he mahi a te kaitirotiro me te rauemi i muri i te utaina. Karekau nga tuhinga e mahia ana, karekau e whakamahia nga rau ahua. Ka keteroki noa te rauemi, ka waatea tonu ina tono.

wetereo

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

href tohu ki te rauemi e hiahia ana koe ki te tango.

as he mea ka taea te tango i roto i te tirotiro:

• style mo nga pepa ahua,
• script mo nga tuhinga tuhi,
• font mo nga momotuhi,
• fetch mo nga rauemi e utaina ana ma te whakamahi fetch() ranei XMLHttpRequest,
• tirohia te rarangi katoa runga MDN.

He mea nui kia tohua te huanga as - ka awhina tenei i te kaitirotiro ki te whakarite tika me te whakarite i nga tangohanga.

Ahea ki te whakamahi

Hei uta rauemi mai i etahi atu wharangi, ki te hiahia koe ki tetahi rauemi mai i tetahi atu wharangi, ka hiahia koe ki te uta i mua kia tere ake ai te whakaputanga o taua wharangi. Hei tauira:

• Kei a koe he toa ipurangi, a 40% o nga kaiwhakamahi ka waiho i te wharangi kaainga mo te wharangi hua. Whakamahi <link rel= "prefetch">, te uta i nga konae CSS me JS hei whakaputa i nga wharangi hua.
• He tono wharangi kotahi koe, a he rereke nga wharangi ka utaina nga kete rereke. Ina toro te kaiwhakamahi ki tetahi wharangi, ka taea te utaina i mua i nga kete mo nga wharangi katoa e hono ana.

Ko te ahua pea ka taea te whakamahi haumaru i tenei tohu ki nga waahi katoa.. I te nuinga o nga wa ka whakaritea e nga kaitirotiro te tango i te kaupapa matua iti rawa, kia kore ai e whakararuraru i tetahi. Kia maumahara noa ka pau te hokohoko a nga kaiwhakamahi, ka taea te utu moni.

Ehara mo nga tono ohorere. Kaua e whakamahi <link rel= "prefetch">, ina hiahiatia te rauemi i roto i etahi hēkona. I tenei keehi, whakamahia <link rel= "preload">.

Tirohia nga taipitopito

tūtohu kōwhiringa. Kaore e hiahiatia te kaitirotiro ki te whai i tenei tohutohu; tera pea ka warewarehia, hei tauira, i runga i te hononga puhoi.

Ko te kaupapa matua i Chrome. I roto i te Chrome <link rel= "prefetch"> i te nuinga o te wa ka mahia me te iti rawa te kaupapa matua (tirohia tepu matua katoa), ara, i muri i te utaina o nga mea katoa.

hono mua

<link rel= "preconnect"> ka tono ki te kaitirotiro kia hono atu ki te rohe i mua i te wa e hiahia ana koe ki te tere ake te tatūnga hononga a muri ake nei.

Me whakatu hono te kaitirotiro ki te tiki rauemi mai i tetahi rohe-tuatoru hou. Hei tauira, mena ka utaina e ia nga Momotuhi a Google, React momotuhi mai i te CDN, ka tono urupare JSON mai i tetahi tūmau API.

Ko te whakarite hononga hou he iti noa nga rau mirakakona. Ka mahia kotahi, engari ka roa tonu. Mena kua whakatauhia e koe he hononga i mua, ka tere ake te tango i nga rauemi mai i tenei rohe.

wetereo

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

href tohu te ingoa rohe mo e hiahia ana koe ki te whakatau i te wāhitau IP. Ka taea te tohu me te tohu tuatahi (https://domain.com) karekau ranei (//domain.com).

Ahea ki te whakamahi

Whakamahia mo nga rohe ka hiahiatia wawe ki te tango i tetahi ahua nui, tuhinga, whakaahua ranei mai i reira, engari kaore koe i te mohio ki te URL rauemi. Hei tauira:

• Kei te manaakihia to tono my-app.com a ka tono AJAX ki api.my-app.com: Kaore koe i te mohio ki nga patai motuhake i mua i te mea he mea hanga hihiri mai i a JS. I konei he mea tika ki te whakamahi i te tohu hei hono i mua ki te rohe.
• Kei te manaakihia to tono my-app.com me te whakamahi i nga Momotuhi Google. E rua nga waahanga ka tangohia: tuatahi, ka tangohia te konae CSS mai i te rohe fonts.googleapis.com, ka tono tenei kōnae mo nga momotuhi fonts.gstatic.com. Kare e taea e koe te mohio no hea nga konae momotuhi motuhake fonts.gstatic.com ka hiahia koe kia utaina e koe te konae CSS, na reira ka taea e matou te hanga hononga tuatahi i mua.

Whakamahia tenei tohu ki te tere ake i etahi tuhinga tuatoru, ahua iti ranei na te hononga kua whakaritea i mua.

Kaua e whakamahi nui. Ko te whakarite me te pupuri hononga he mahi utu nui mo te kiritaki me te tūmau. Whakamahia tenei tohu mo te 4-6 nga waahanga morahi.

Tirohia nga taipitopito

tūtohu kōwhiringa. Kaore e hiahiatia te kaitirotiro ki te whai i tenei tohutohu, ka warewarehia pea, hei tauira, mena he maha nga hononga kua oti kee, i etahi atu keehi ranei.

He aha te whakauru o te tukanga hononga?. Hei hono atu ki ia pae, me mahi te kaitirotiro e whai ake nei:

• Whakatau DNS. Kimihia te wāhitau IP tūmau (216.58.215.78) mo te ingoa rohe kua tohua (google.com).
• TCP ringaringa. Whakawhitihia nga putea (kiritaki → tūmau → kiritaki) ki te kōkiri i te hononga TCP ki te tūmau.
• TLS rūrū (pae HTTPS anake). E rua nga rauna whakawhiti putea (kiritaki → tūmau → kiritaki → tūmau → kiritaki) ki te kōkiri i tētahi wātū TLS haumaru.

Kia mahara: Ka whakapai ake, ka tere ake hoki te tikanga ruru a HTTP/3, engari he tawhiti tonu.

dns-prefetch

<link rel= "dns-prefetch"> ka tono ki te kaitirotiro kia mahia he whakataunga DNS mo te rohe i mua mena ka hono atu koe ki a ia ka hiahia koe kia tere ake te hononga tuatahi.

Me whakatau e te kaitirotiro te wahitau IP o te rohe mena ka tikina e ia etahi rauemi mai i tetahi rohe-tuatoru hou. Hei tauira, te uta i nga Momotuhi a Google, React momotuhi mai i te CDN, te tono urupare JSON mai i te tūmau API.

Mo ia rohe hou, he 20-120 ms te roa o te whakataunga rekoata DNS. Ka pa noa tenei ki te utaina o te rauemi tuatahi mai i te rohe kua tohua, engari ka mau tonu te whakaroa. Mena ka mahia e matou he whakataunga DNS i mua, ka penapena te waa ka utaina te rauemi tere.

wetereo

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

href tohu te ingoa rohe mo e hiahia ana koe ki te whakaturia te wāhitau IP. Ka taea te tohu me te tohu tuatahi (https://domain.com) karekau ranei (//domain.com).

Ahea ki te whakamahi

Whakamahia mo nga rohe ka hiahiatia wawe ki te tango rauemi mai i reira kaore te kaitirotiro e mohio i mua. Hei tauira:

• Kei te manaakihia to tono my-app.com a ka tono AJAX ki api.my-app.com: Kaore koe i te mohio ki nga patai motuhake i mua i te mea he mea hanga hihiri mai i a JS. I konei he mea tika ki te whakamahi i te tohu hei hono i mua ki te rohe.
• Kei te manaakihia to tono my-app.com, me te whakamahi i nga Momotuhi Google. E rua nga waahanga ka tangohia: tuatahi, ka tangohia te konae CSS mai i te rohe fonts.googleapis.com, ka tono tenei kōnae mo nga momotuhi fonts.gstatic.com. Kare e taea e koe te mohio no hea nga konae momotuhi motuhake fonts.gstatic.com ka hiahia koe kia utaina ra ano e koe te konae CSS, na reira ka taea e matou te hanga hononga tuatahi i mua.

Whakamahia tenei tohu ki te tere ake i etahi tuhinga tuatoru, ahua iti ranei na te hononga kua whakaritea i mua.

Kia mahara ki nga ahuatanga rite ki <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Ko te tikanga karekau he tikanga ki te whakamahi tahi mo te rohe kotahi: <link rel= "preconnect"> kei roto kē <link rel= "dns-prefetch"/> me te maha atu. Ka taea te whakatika tenei i roto i nga keehi e rua:

• Kei te pirangi koe ki te tautoko i nga kaitirotiro tawhito?. <link rel= "dns-prefetch" /> tautokona e mai IE10 me Safari 5. <link rel= "preconnect"> i tautokona mo tetahi wa i roto i Chrome me Firefox, engari i honoa ki Safari anake i roto i 11.1 me kaore ano kia tautokona i IE/Edge. Mena ka hiahia koe ki te tautoko i enei kaitirotiro, whakamahia <link rel= "dns-prefetch" /> hei kōwhiringa pūrua mō <link rel= "preconnect">.
• Kei te hiahia koe ki te tere ake i nga hononga ki te neke atu i te 4-6 nga rohe. Tūtohu <link rel= "preconnect"> Kaore i te tūtohutia kia whakamahia me te neke atu i te 4-6 nga rohe, na te mea ko te whakatuu me te pupuri hononga he mahi utu nui. <link rel= "dns-prefetch" /> he iti ake nga rauemi e pau ana, no reira whakamahia mehemea e tika ana.

Tirohia nga taipitopito

tūtohu kōwhiringa. Kaore e hiahiatia te kaitirotiro ki te whai i tenei tohutohu, na reira kaore pea e mahia he whakataunga DNS, hei tauira, mena he maha nga tohu penei i te whaarangi, i etahi atu keehi ranei.

He aha te DNS. He wāhitau IP ahurei to ia tūmau i runga i te Ipurangi, he rite te ahua 216.58.215.78. Ko te ingoa o te waahi ka uru ki te pae wahitau o te kaitirotiro (hei tauira, google.com), me nga tūmau DNS (Pūnaha Ingoa Rohe) e ōrite ana ki te wāhitau IP o te tūmau (216.58.215.78).

Hei whakatau i tetahi wahitau IP, me patai te kaitirotiro ki te tūmau DNS. E 20−120 ms ina hono ana ki tetahi rohe-tuatoru hou.

Kei te keteroki a DNS, ahakoa kaore e tino pono. Ko etahi o nga OS me nga kaitirotiro e huna ana i nga patai DNS: ma tenei ka whakaora i te wa mo nga patai ka tukuna, engari kaore e taea te whakawhirinaki ki te keteroki. I runga i te Linux karekau e mahi. He keteroki DNS a Chrome, engari mo te meneti noa iho. Ka huna e Windows nga whakautu DNS mo nga ra e rima.

tuku mua

<link rel= "prerender"> ka tono ki te kaitirotiro ki te tango i te URL me te whakaatu ki tetahi ripa kore e kitea. Ina pao te kaiwhakamahi ki te hono, me whakaatu tonu te wharangi. He whai hua tenei mena ka tino mohio koe ka toro atu te kaiwhakamahi ki tetahi whaarangi ka hiahia kia tere ake tana whakaaturanga.

Ahakoa (na te mea ranei) te tino whaihua o tenei tohu, i te tau 2019 <link rel= "prerender"> he iti te tautoko i nga kaitirotiro nui. Tirohia etahi atu korero. i raro.

wetereo

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

href tohu ki te URL e hiahia ana koe ki te timata ki te whakaputa i te papamuri.

Ahea ki te whakamahi

Ina tino mohio koe ka haere te kaiwhakamahi ki tetahi wharangi. Mena kei a koe he "tunnel" e 70% o nga manuhiri ki te wharangi A ka haere ki te wharangi B, katahi <link rel= "prerender"> kei te wharangi A ka tere te whakaatu i te wharangi B.

Kaua e whakamahi nui. He tino utu nui te utu i mua i te whakaputanga i runga i te bandwidth me te mahara. Kaua e whakamahi <link rel= "prerender"> neke atu i te kotahi wharangi.

Tirohia nga taipitopito

tūtohu kōwhiringa. Kaore e hiahiatia te kaitirotiro ki te whai i tenei tohutohu, ka warewarehia pea, hei tauira, i runga i te hononga puhoi, i te iti ranei o te mahara kore utu.

Hei whakaora mahara Karekau a Chrome e whakaatu anaa utaina noa NoState. Ko te tikanga ka utaina e Chrome te wharangi me ona rauemi katoa, engari kaore i te tuku, i te mahi JavaScript ranei.

Kaore a Firefox me Safari e tautoko i tenei tohu. Kaore tenei e takahi i te whakaritenga, na te mea kaore e hiahiatia nga kaitirotiro ki te whai i tenei tohutohu; engari he pouri tonu. bug whakatinana Kua tuwhera a Firefox mo nga tau e whitu. He ripoata ko Safari kare hoki e tautoko i tenei tohu.

Whakarāpopoto

Whakamahia:

• <link rel= "preload"> - ina hiahia koe i tetahi rauemi i roto i etahi hēkona
• <link rel= "prefetch"> - ina hiahia koe ki te rauemi kei te wharangi e whai ake nei
• <link rel= "preconnect"> - ina mohio koe ka hiahia koe ki tetahi rauemi, engari kaore koe i te mohio ki tona URL katoa
• <link rel= "dns-prefetch"> - pera ano, ina mohio koe ka hiahia koe i tetahi rauemi apopo, engari kaore koe i te mohio ki tona URL katoa (mo nga kaitirotiro tawhito)
• <link rel= "prerender"> — ina tino mohio koe ka haere nga kaiwhakamahi ki tetahi wharangi, ka hiahia koe kia tere ake tana whakaaturanga

Source: will.com