ProHoster > Блог > Nchịkwa > Bugharịa, buo ụzọ na mkpado ndị ọzọ

Bugharịa, buo ụzọ na mkpado ndị ọzọ

E nwere ọtụtụ ụzọ iji melite arụmọrụ weebụ. Otu n'ime ha bụ ibugharị ọdịnaya nke a ga-achọ ma emechaa. CSS tupu nhazi, ntinye akwụkwọ zuru oke ma ọ bụ mkpebi ngalaba aha. Anyị na-eme ihe niile tupu oge eruo, wee gosipụta nsonaazụ ozugbo! Ụda dị mma.

Ihe kachasị mma bụ na a na-eme ya nke ọma. Mkpado ise nye ihe nchọgharị ahụ iwu ka ọ mee omume mbido:

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


Ka anyị kọwaa ná nkenke ihe ha na-eme na mgbe a ga-eji ha eme ihe.

Gaa na: bute · prefetch · tupu njikọ · dns-prefetch · prerender

bute

<link rel= "preload"> na-agwa ihe nchọgharị ka ọ buru ibu ma chekwaa akụrụngwa (dị ka edemede ma ọ bụ ụdị ụdị) ozugbo enwere ike. Nke a bara uru ma ọ bụrụ na achọrọ ihe enyemaka sekọnd ole na ole ka ibe akwụkwọ ahụ gwụchara - ma ịchọrọ ime ka usoro ahụ dị ngwa.

Ihe nchọgharị ahụ na-eme ihe ọ bụla na akụrụngwa mgbe nbudata. Egbughị scripts, anaghị etinye akwụkwọ ụdị. A na-echekwa akụrụngwa ahụ ozugbo wee mee ya ozugbo achọrọ ya.

syntax

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

href na-atụ aka na akụrụngwa ịchọrọ ibudata.

as nwere ike ịbụ ihe ọ bụla enwere ike ibudata na ihe nchọgharị:

  • style maka mpempe akwụkwọ style,
  • script maka scripts,
  • font maka font,
  • fetch maka akụrụngwa ejiri fetch() ma ọ bụ XMLHttpRequest,
  • lee ndepụta zuru oke na MDN.

Ọ dị mkpa ịkọwapụta àgwà as - nke a na-enyere ihe nchọgharị aka idobe ụzọ nke ọma na ịhazi nbudata.

Mgbe iji

Jiri ebugo mbu mgbe achọrọ akụrụngwa n'ọdịnihu dị nso. Ọmụmaatụ:

  • Fonts ndị na-abụghị ọkọlọtọ sitere na faịlụ mpụga: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    ndabara comic-sans.woff2 ga-amalite loading naanị mgbe nbudata na parsing index.css. Iji zere ichere ogologo oge, ị nwere ike budata font mbụ site na iji <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Ọ bụrụ na ị kewapụ ụdị gị dịka usoro ahụ si dị CSS dị mkpa n'ime akụkụ abụọ, dị oke egwu (maka nsụgharị ozugbo) na nke na-adịghị mkpa: 
    <style>
/* Inlined critical styles */
</style>

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

    Site na usoro a, ụdị ndị na-adịghị mkpa ga-amalite ibunye naanị mgbe Javascript na-agba ọsọ, nke nwere ike ime sekọnd ole na ole ka emechara ya. Kama ichere JS ojiji <link rel= "preload">ka ịmalite nbudata na mbụ:

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

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

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

Ejila ibubu ụzọ mee ihe gabiga ókè. Ọ bụrụ na ị na-ebu ihe niile n'usoro, saịtị ahụ agaghị eme ngwa ngwa ngwa ngwa; kama nke ahụ, ọ ga-egbochi ihe nchọgharị ahụ ịhazi ọrụ ya nke ọma.

Ka a ghara inwe mgbagwoju anya na prefetching. Ejila ya <link rel= "preload">, ma ọ bụrụ na ị na-adịghị mkpa akụ ozugbo mgbe ibe ibu. Ọ bụrụ na ịchọrọ ya ma emechaa, dịka ọmụmaatụ maka ibe na-esote, wee jiri ya <link rel= "prefetch">.

Lee nkọwa

Nke a bụ mkpado achọrọ ihe nchọgharị ga-egbu ya (ọ bụrụ na ọ kwadoro ya), n'adịghị ka mkpado ndị ọzọ niile metụtara bu ụzọ ebugo. Ihe nchọgharị ahụ ga-ebudata akụrụngwa akọwapụtara na ya <link rel="preload">. N'ọnọdụ ndị ọzọ, ọ nwere ike ileghara ibubu ụzọ, dịka ọmụmaatụ ma ọ bụrụ na ọ na-agba ọsọ na njikọ dị nwayọ.

Ihe ndị mbụ. Ihe nchọgharị na-ekenye ihe dị iche iche ụzọ maka akụrụngwa dị iche iche (ụdị, edemede, mkpụrụedemede, wdg) iji buru ụzọ buo ihe kacha mkpa. N'okwu a, ihe nchọgharị na-ekpebi ihe kacha mkpa site na njirimara as. Maka ihe nchọgharị Chrome ị nwere ike ile anya Tebụl kacha mkpa zuru oke.

Bugharịa, buo ụzọ na mkpado ndị ọzọ

prefetch

<link rel= "prefetch"> na-arịọ ihe nchọgharị ka ibudata na cache akụrụngwa (dị ka edemede ma ọ bụ mpempe ụdị) n'azụ. Nbudata na-eme na mkpa dị ala ka ọ ghara igbochi akụrụngwa ndị ka mkpa. Nke a bara uru ma ọ bụrụ na achọrọ akụrụngwa na ibe na-esote ma ịchọrọ ịchekwa ya tupu oge eruo.

N'ebe a, kwa, ihe nchọgharị ahụ na-eme ihe ọ bụla na akụrụngwa mgbe ị wụnyechara. Egbughị scripts, anaghị etinye akwụkwọ ụdị. A na-echekwa akụrụngwa ahụ ozugbo wee mee ya ozugbo achọrọ ya.

syntax

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

href na-atụ aka na akụrụngwa ịchọrọ ibudata.

as nwere ike ịbụ ihe ọ bụla enwere ike ibudata na ihe nchọgharị:

  • style maka mpempe akwụkwọ style,
  • script maka scripts,
  • font maka font,
  • fetch maka akụrụngwa ejiri fetch() ma ọ bụ XMLHttpRequest,
  • lee ndepụta zuru oke na MDN.

Ọ dị mkpa ịkọwapụta àgwà as - nke a na-enyere ihe nchọgharị aka idobe ụzọ na ịhazi nbudata.

Mgbe iji

Iji buo akụrụngwa sitere na ibe ndị ọzọ, ọ bụrụ na ị chọrọ akụrụngwa sitere na ibe ọzọ, ma ịchọrọ ibu ụzọ buo ya ka ị mee ngwa ngwa nsụgharị nke ibe ahụ. Ọmụmaatụ:

  • Ị nwere ụlọ ahịa dị n'ịntanetị, na 40% nke ndị ọrụ na-ahapụ ibe ụlọ maka ibe ngwaahịa. Jiri <link rel= "prefetch">, na-ebunye faịlụ CSS na JS iji nye ibe ngwaahịa.
  • Ị nwere ngwa otu ibe, ibe dị iche iche na-ebukwa ngwugwu dị iche iche. Mgbe onye ọrụ gara na ibe, ngwugwu maka ibe niile ọ jikọtara na ya nwere ike ibugo ya.

O yikarịrị ka enwere ike iji mkpado a n'enweghị nsogbu ọ bụla.. Ihe nchọgharị na-ahazi prefetch na ihe kacha mkpa, yabụ na ọ naghị enye onye ọ bụla nsogbu. Naanị buru n'uche na ọ na-eri okporo ụzọ onye ọrụ, nke nwere ike na-efu ego.

Ọ bụghị maka arịrịọ ngwa ngwa. Ejila ya <link rel= "prefetch">, mgbe achọrọ akụrụngwa n'ime sekọnd ole na ole. N'okwu a, jiri <link rel= "preload">.

Lee nkọwa

mkpado nhọrọ. Achọghị ihe nchọgharị ahụ ịgbaso ntuziaka a; ọ nwere ike ileghara ya anya, dịka ọmụmaatụ, na njikọ dị nwayọ.

Ihe mbu na Chrome. Na Chrome <link rel= "prefetch"> A na-egbukarị ya na mkpa kacha nta (lee Tebụl kacha mkpa zuru oke), ya bụ, mgbe loading ihe ọ bụla ọzọ.

tupu njikọ

<link rel= "preconnect"> na-arịọ ihe nchọgharị ka ọ jikọọ na ngalaba ahụ tupu oge eruo mgbe ịchọrọ ime ka nhazi njikọ dị ngwa n'ọdịnihu.

Ihe nchọgharị ahụ ga-ewepụtarịrị njikọ ma ọ bụrụ na ọ weghachite akụrụngwa ọ bụla site na ngalaba ndị ọzọ. Dịka ọmụmaatụ, ọ bụrụ na ọ na-ebunye Fonts Google, React fonts sitere na CDN, ma ọ bụ rịọ nzaghachi JSON site na sava API.

Ịmepụta njikọ ọhụrụ na-ewekarị narị millise seconds. A na-eme ya otu ugboro, mana ọ ka na-ewe oge. Ọ bụrụ na ị guzobela njikọ tupu oge eruo, ị ga-echekwa oge wee budata akụrụngwa na ngalaba a ngwa ngwa.

syntax

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

href na-egosi ngalaba aha nke ịchọrọ ikpebi adreesị IP. Enwere ike ịkọwapụta ya na prefix (https://domain.com) ma ọ bụ na-enweghị ya (//domain.com).

Mgbe iji

Jiri maka ngalaba ndị a ga-achọ n'oge adịghị anya iji budata ụdị dị mkpa, edemede ma ọ bụ onyonyo si ebe ahụ, mana ị maghị URL akụrụngwa ma. Ọmụmaatụ:

  • A na-akwado ngwa gị my-app.com ma na-eme AJAX arịrịọ api.my-app.com: Ị na-amaghị kpọmkwem ajụjụ n'ọdịnihu n'ihi na ha na-mere dynamically si JS. N'ebe a, ọ dị mma iji mkpado iji jikọọ na ngalaba ahụ.
  • A na-akwado ngwa gị my-app.com ma na-eji Google Fonts. A na-ebudata ha na usoro abụọ: nke mbụ, a na-ebudata faịlụ CSS site na ngalaba fonts.googleapis.com, mgbe ahụ faịlụ a na-arịọ mkpụrụedemede na fonts.gstatic.com. Ị nweghị ike ịma ụdị faịlụ font ndị akọwapụtara fonts.gstatic.com ị ga-achọ ruo mgbe ị na-ebunye faịlụ CSS, yabụ anyị nwere ike ịme njikọ mbụ tupu oge eruo.

Jiri mkpado a iji mee ka ụfọdụ edemede ma ọ bụ ụdị nke atọ dị ngwa n'ihi njikọ etinyegoro mbụ.

Ejila ihe gabigara ókè mee ihe. Ịmepụta na idowe njikọ bụ ọrụ dị oke ọnụ maka ma onye ahịa na ihe nkesa. Jiri mkpado a maka oke ngalaba 4-6.

Lee nkọwa

mkpado nhọrọ. Achọghị ihe nchọgharị ahụ ịgbaso ntuziaka a ma nwee ike ileghara ya anya, dịka ọmụmaatụ, ọ bụrụ na emebelarị ọtụtụ njikọ ma ọ bụ n'ọnọdụ ọzọ.

Kedu ihe usoro njikọ ahụ gụnyere?. Iji jikọọ na saịtị ọ bụla, ihe nchọgharị ahụ ga-emerịrị ihe ndị a:

  • Mkpebi DNS. Chọta adreesị IP nkesa (216.58.215.78) maka aha ngalaba akọwapụtara (google.com).
  • TCP aka. ngwugwu mgbanwe (onye ahịa → ihe nkesa → onye ahịa) iji malite njikọ TCP na sava ahụ.
  • Aka aka TLS (naanị saịtị HTTPS). Mgbanwe nke ngwugwu abụọ (onye ahịa → ihe nkesa → onye ahịa → ihe nkesa → onye ahịa) iji malite nnọkọ TLS echekwara.

Mara: HTTP/3 ga-emeziwanye ma mee ka usoro mmetụ aka dị ngwa, mana ọ ka dị anya.

dns-prefetch

<link rel= "dns-prefetch"> na-arịọ ihe nchọgharị ahụ ka ọ rụọ mkpebi DNS maka ngalaba ahụ tupu oge eruo ma ọ bụrụ na ị ga-ejikọta ya n'oge na-adịghị anya ma chọọ ime ngwa ngwa njikọ mbụ ahụ.

Ihe nchọgharị ahụ ga-ekpebi adreesị IP ngalaba ahụ ma ọ ga-eweghachi akụrụngwa ọ bụla site na ngalaba ndị ọzọ. Dịka ọmụmaatụ, na-ebunye mkpụrụedemede Google, mkpụrụedemede React sitere na CDN, ma ọ bụ ịrịọ nzaghachi JSON site na sava API.

Maka ngalaba ọhụrụ ọ bụla, mkpebi ndekọ DNS na-ewekarị ihe dịka 20-120 ms. Nke a na-emetụta naanị nbudata nke akụrụngwa mbụ sitere na ngalaba enyere, mana ka na-ewebata oge. Ọ bụrụ na anyị na-eme mkpebi DNS n'ọdịnihu, anyị ga-echekwa oge ma buru ngwa ngwa ngwa ngwa.

syntax

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

href na-egosi ngalaba aha nke ịchọrọ ịtọ adreesị IP maka ya. Enwere ike ịkọwapụta ya na prefix (https://domain.com) ma ọ bụ na-enweghị ya (//domain.com).

Mgbe iji

Jiri maka ngalaba ndị a ga-achọ n'oge adịghị anya iji budata akụrụngwa n'ebe ahụ nke ihe nchọgharị ahụ na-amaghị tupu oge eruo. Ọmụmaatụ:

  • A na-akwado ngwa gị my-app.com ma na-eme AJAX arịrịọ api.my-app.com: Ị na-amaghị kpọmkwem ajụjụ n'ọdịnihu n'ihi na ha na-mere dynamically si JS. N'ebe a, ọ dị mma iji mkpado iji jikọọ na ngalaba ahụ.
  • A na-akwado ngwa gị my-app.com, ma na-eji Google Fonts. A na-ebudata ha na usoro abụọ: nke mbụ, a na-ebudata faịlụ CSS site na ngalaba fonts.googleapis.com, mgbe ahụ faịlụ a na-arịọ mkpụrụedemede na fonts.gstatic.com. Ị nweghị ike ịma ụdị faịlụ font ndị akọwapụtara fonts.gstatic.com ị ga-achọ ya ruo mgbe ị na-ebunye faịlụ CSS, yabụ anyị nwere ike ịme njikọ mbụ n'ọdịnihu.

Jiri mkpado a iji mee ka ụfọdụ edemede ma ọ bụ ụdị nke atọ dị ngwa n'ihi njikọ etinyegoro mbụ.

Biko mara njirimara ndị yiri ya <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Ọ naghị abụkarị ihe ezi uche dị na ya iji ha ọnụ maka otu ngalaba: <link rel= "preconnect"> agụnyelarị <link rel= "dns-prefetch"/> na ọtụtụ ndị ọzọ. Enwere ike izipu nke a n'ụzọ abụọ:

  • Ị chọrọ ịkwado ihe nchọgharị ochie?. <link rel= "dns-prefetch" /> na -akwado ya site na IE10 na Safari 5. <link rel= "preconnect"> akwadoro nwa oge na Chrome na Firefox, mana etinyere ya na Safari na 11.1 na akwadoghị na IE/Edge. Ọ bụrụ na ịchọrọ ịkwado ihe nchọgharị ndị a, jiri <link rel= "dns-prefetch" /> dị ka ndabere nhọrọ maka <link rel= "preconnect">.
  • Ịchọrọ ime ka njikọ dị ngwa karịa ngalaba 4-6. Mkpado <link rel= "preconnect"> A naghị atụ aro ka iji ihe karịrị 4-6 ngalaba, ebe ọ bụ na ịmepụta na ịnọgide na-enwe njikọ bụ ọrụ dị oke ọnụ. <link rel= "dns-prefetch" /> na-eri obere akụrụngwa, yabụ jiri ya ma ọ bụrụ na ọ dị mkpa.

Lee nkọwa

mkpado nhọrọ. Achọghị ihe nchọgharị ahụ ịgbaso ntuziaka a, yabụ ọ nwere ike ọ gaghị eme mkpebi DNS, dịka ọmụmaatụ, ọ bụrụ na enwere ọtụtụ mkpado dị na ibe ma ọ bụ n'ọnọdụ ọzọ.

Gịnị bụ DNS. Ihe nkesa ọ bụla dị na ịntanetị nwere adreesị IP pụrụ iche, nke yiri ya 216.58.215.78. A na-abanyekarị aha saịtị ahụ n'ime akara adreesị nke ihe nchọgharị ahụ (dịka ọmụmaatụ, google.com), na DNS (Sistemụ Aha ngalaba) sava dakọtara ya na adreesị IP nke ihe nkesa (216.58.215.78).

Iji chọpụta adreesị IP, ihe nchọgharị ahụ ga-ajụrịrị ihe nkesa DNS. Ọ na-ewe 20-120 ms mgbe ị na-ejikọta na ngalaba nke ndị ọzọ.

A na-echekwa DNS, n'agbanyeghị na ọ bụchaghị ntụkwasị obi. Ụfọdụ OS na ihe nchọgharị na-echekwa ajụjụ DNS: nke a ga-azọpụta oge na ajụjụ ugboro ugboro, mana enweghị ike ịdabere na caching. Na Linux ọ naghị arụ ọrụ ma ọlị. Chrome nwere cache DNS, mana ọ na-ewe naanị otu nkeji. Windows na-echekwa nzaghachi DNS maka ụbọchị ise.

prerender

<link rel= "prerender"> na-arịọ ihe nchọgharị ka ibudata URL wee gosipụta ya na taabụ a na-adịghị ahụ anya. Mgbe onye ọrụ pịa njikọ ahụ, ibe ahụ kwesịrị igosi ozugbo. Nke a bara uru ma ọ bụrụ na ị ji n'aka na onye ọrụ ga-aga otu ibe ma chọọ ime ka ngosi ya dị ngwa.

N'agbanyeghị (ma ọ bụ n'ihi) arụmọrụ pụrụ iche nke mkpado a, na 2019 <link rel= "prerender"> akwadoghị nke ọma na nnukwu ihe nchọgharị. Hụ nkọwa ndị ọzọ. n'okpuru.

syntax

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

href na-atụ aka na URL nke ịchọrọ ịmalite ịtụgharị n'azụ.

Mgbe iji

Mgbe ị ji n'aka n'ezie na onye ọrụ ga-aga otu ibe. Ọ bụrụ na ị nwere “ọwara” nke 70% nke ndị ọbịa na ibe A na-aga na ibe B, mgbe ahụ <link rel= "prerender"> na ibe A ga-enyere aka igosipụta ibe B ngwa ngwa.

Ejila ihe gabigara ókè mee ihe. Ịmepụta ụzọ dị oke ọnụ n'ihe gbasara bandwidth na ebe nchekwa. Ejila ya <link rel= "prerender"> maka ihe karịrị otu ibe.

Lee nkọwa

mkpado nhọrọ. Achọghị ihe nchọgharị ahụ ịgbaso ntuziaka a ma nwee ike ileghara ya anya, dịka ọmụmaatụ, na njikọ dị nwayọ ma ọ bụ mgbe enweghị ebe nchekwa efu zuru oke.

Ka ịchekwaa ebe nchekwa Chrome anaghị eme ntụgharị zuru okena bugoro NoSstate naanị. Nke a pụtara na Chrome na-ebu ibe ya na akụrụngwa ya niile, mana anaghị ewepụta ma ọ bụ mebie Javascript.

Firefox na Safari anaghị akwado mkpado a ma ọlị. Nke a anaghị emebi nkọwapụta, ebe ọ bụ na achọghị ihe nchọgharị ka ịgbaso ntuziaka a; ma ka na-ewute. Njehie mmejuputa Firefox emepeela afọ asaa. Enwere akụkọ na Safari anaghị akwado mkpado a.

Nchịkọta

Jiri:

  • <link rel= "preload"> - mgbe ịchọrọ akụrụngwa n'ime sekọnd ole na ole
  • <link rel= "prefetch"> - mgbe ịchọrọ akụrụngwa na ibe na-esote
  • <link rel= "preconnect"> - mgbe ịmara na ị ga-achọ akụrụngwa n'oge na-adịghị anya, mana ị mabeghị URL ya zuru oke
  • <link rel= "dns-prefetch"> - N'otu aka ahụ, mgbe ịmara na ị ga-achọ akụrụngwa n'oge na-adịghị anya, mana ị mabeghị URL ya zuru oke (maka ihe nchọgharị ochie)
  • <link rel= "prerender"> - mgbe ijide n'aka na ndị ọrụ ga-aga otu ibe, ma ịchọrọ ime ka ngosi ya dị ngwa

isi: www.habr.com

Tinye a comment