ProHoster > Blog > Rianachd > Preload, prefetch agus tagaichean eile

Preload, prefetch agus tagaichean eile

tha iomadh dòigh air coileanadh lìn a leasachadh. Tha aon dhiubh a’ luchdachadh suas susbaint a bhios a dhìth nas fhaide air adhart. Ro-ghiollachd CSS, ro-aithris làn-dhuilleag no rùn ainm fearainn. Bidh sinn a’ dèanamh a h-uile càil ro làimh, agus an uairsin a’ taisbeanadh an toradh sa bhad! Fuaimean fionnar.

Is e an rud a tha eadhon nas fhuaire gu bheil e air a chuir an gnìomh gu math sìmplidh. Còig tagaichean thoir òrdugh don bhrobhsair gnìomhan tòiseachaidh a dhèanamh:

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


Mìnichidh sinn gu h-aithghearr dè a nì iad agus cuin a chleachdas iad iad.

Leum gu: gun ro-luchdaich · prefetch · ro-cheangail · dns-prefetch · ro-fhearg

gun ro-luchdaich

<link rel= "preload"> ag iarraidh air a’ bhrabhsair goireas a luchdachadh is a thasgadh (leithid sgriobt no duilleag stoidhle) cho luath ‘s a ghabhas. Tha seo feumail nuair a tha feum air goireas beagan dhiog às deidh an duilleag a luchdachadh - agus tha thu airson am pròiseas a luathachadh.

Cha dèan am brabhsair dad leis a’ ghoireas às deidh an luchdachadh. Chan eil sgriobtaichean air an cur an gnìomh, chan eil duilleagan stoidhle air an cur an sàs. Tha an goireas dìreach air a thasgadh agus ri fhaighinn sa bhad ma thèid iarraidh.

sheantansan

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

href puingean don ghoireas a tha thu airson a luchdachadh sìos.

as faodaidh e bhith mar rud sam bith a ghabhas luchdachadh a-nuas sa bhrobhsair:

  • style airson duilleagan stoidhle,
  • script airson sgriobtaichean,
  • font airson fonts,
  • fetch airson goireasan air an cleachdadh fetch() no XMLHttpRequest,
  • faic an liosta slàn air MDN.

Tha e cudromach an caractar a shònrachadh as - cuidichidh seo am brobhsair gus prìomhachas ceart a thoirt seachad agus luchdachadh sìos a chlàradh.

Cuin a chleachdas tu

Cleachd ro-luchdachadh nuair a bhios feum air an goireas a dh’ aithghearr. Mar eisimpleir:

  • Cruthan neo-àbhaisteach bho fhaidhle a-muigh: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    bho thùs comic-sans.woff2 tòisichidh luchdachadh sìos dìreach às deidh an luchdachadh sìos agus am parsadh index.css. Gus nach bi thu a 'feitheamh cho fada, faodaidh tu an cruth-clò a luchdachadh sìos nas tràithe a' cleachdadh <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Ma tha thu a 'sgaradh do stoidhlichean a rèir an dòigh-obrach CSS èiginneach ann an dà phàirt, deatamach (airson a thoirt seachad sa bhad) agus neo-èiginneach: 
    <style>
/* Inlined critical styles */
</style>

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

    Leis an dòigh-obrach seo, cha tòisich stoidhlichean neo-èiginneach a’ luchdachadh ach nuair a ruitheas JavaScript, a dh’ fhaodadh tachairt beagan dhiog às deidh an toirt seachad. An àite a bhith a 'feitheamh JS cleachdadh <link rel= "preload">gus tòiseachadh air luchdachadh sìos nas tràithe:

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

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

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

Na cleachd cus ro-luchdachadh. Ma luchdaicheas tu a h-uile càil ann an sreath, cha luathaich an làrach gu draoidheil; air an làimh eile, cuiridh e casg air a ’bhrobhsair bho bhith a’ dealbhadh a chuid obrach gu ceart.

Gun a bhith air a mheasgadh le prefetching. Na cleachd <link rel= "preload">, mura h-eil feum agad air an goireas dìreach às deidh an duilleag a luchdachadh. Ma tha feum agad air nas fhaide air adhart, mar eisimpleir airson an ath dhuilleig, an uairsin cleachd <link rel= "prefetch">.

Seall mion-fhiosrachadh

Is e taga riatanach a tha seo a chuir gu bàs leis a’ bhrabhsair (ma bheir e taic dha), eu-coltach ris a h-uile taga eile co-cheangailte ri ro-luchdachadh. Feumaidh am brabhsair an goireas a chaidh a shònrachadh ann an <link rel="preload">. Ann an cùisean eile faodaidh e dearmad a dhèanamh air ro-luchdachadh, mar eisimpleir ma tha e a’ ruith air ceangal slaodach.

Prìomhachasan. Mar as trice bidh brobhsairean a’ sònrachadh diofar phrìomhachasan do dhiofar ghoireasan (stoidhlichean, sgriobtaichean, clòidean, msaa) gus na goireasan as cudromaiche a luchdachadh an toiseach. Anns a 'chùis seo, bidh am brabhsair a' dearbhadh prìomhachas a rèir feart as. Airson brabhsair Chrome faodaidh tu coimhead air clàr prìomhachais iomlan.

Preload, prefetch agus tagaichean eile

prefetch

<link rel= "prefetch"> ag iarraidh air a’ bhrobhsair goireas a luchdachadh sìos is a thasgadh (leithid sgriobt no duilleag stoidhle) air a’ chùl. Bidh luchdachadh a’ tachairt aig prìomhachas ìosal gus nach cuir e bacadh air goireasan nas cudromaiche. Tha seo feumail ma tha an goireas a dhìth air an ath dhuilleig agus gu bheil thu airson a thasgadh ro làimh.

An seo, cuideachd, chan eil am brabhsair a’ dèanamh dad leis a’ ghoireas às deidh a luchdachadh. Chan eil sgriobtaichean air an cur an gnìomh, chan eil duilleagan stoidhle air an cur an sàs. Tha an goireas dìreach air a thasgadh agus ri fhaighinn sa bhad ma thèid iarraidh.

sheantansan

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

href puingean don ghoireas a tha thu airson a luchdachadh sìos.

as faodaidh e bhith mar rud sam bith a ghabhas luchdachadh a-nuas sa bhrobhsair:

  • style airson duilleagan stoidhle,
  • script airson sgriobtaichean,
  • font airson fonts,
  • fetch airson goireasan air an cleachdadh fetch() no XMLHttpRequest,
  • faic an liosta slàn air MDN.

Tha e cudromach an caractar a shònrachadh as - bidh seo a’ cuideachadh a’ bhrobhsair gu ceart a’ prìomhachasadh agus a’ clàradh luchdachadh sìos.

Cuin a chleachdas tu

Gus goireasan a luchdachadh bho dhuilleagan eile, ma tha feum agad air goireas bho dhuilleag eile, agus gu bheil thu airson a luchdachadh ro-làimh gus an tèid an duilleag sin a dhèanamh nas luaithe. Mar eisimpleir:

  • Tha stòr air-loidhne agad, agus fàgaidh 40% de luchd-cleachdaidh an duilleag dachaigh airson duilleag an toraidh. Cleachd <link rel= "prefetch">, a’ luchdachadh fhaidhlichean CSS agus JS gus duilleagan toraidh a thoirt seachad.
  • Tha tagradh aon duilleag agad, agus bidh diofar dhuilleagan a’ luchdachadh diofar phasganan. Nuair a thadhlas neach-cleachdaidh air duilleag, faodar pacaidean airson a h-uile duilleag ris a bheil e a’ ceangal a luchdachadh ro-làimh.

Tha e coltach gum faodar an taga seo a chleachdadh gu sàbhailte gu ìre sam bith.. Mar as trice bidh brobhsairean a’ clàradh prefetch leis a’ phrìomhachas as ìsle, gus nach cuir e dragh air duine sam bith. Dìreach cumaibh cuimhne gu bheil e ag ithe trafaic luchd-cleachdaidh, a dh ’fhaodadh airgead a chosg.

Chan ann airson iarrtasan èiginneach. Na cleachd <link rel= "prefetch">, nuair a tha feum air an goireas ann am beagan dhiog. Anns a 'chùis seo, a' cleachdadh <link rel= "preload">.

Seall mion-fhiosrachadh

Tag roghainneil. Chan fheum am brabhsair an stiùireadh seo a leantainn; faodaidh e dearmad a dhèanamh air, mar eisimpleir, air ceangal slaodach.

Prìomhachas ann an Chrome. Ann an Chrome <link rel= "prefetch"> mar as trice air a chur gu bàs leis a’ phrìomhachas as ìsle (faic clàr prìomhachais iomlan), is e sin, às deidh a h-uile càil eile a luchdachadh.

ro-cheangail

<link rel= "preconnect"> ag iarraidh air a’ bhrobhsair ceangal ris an àrainn ro-làimh nuair a tha thu airson stèidheachadh ceangail a luathachadh san àm ri teachd.

Feumaidh am brabhsair ceangal a stèidheachadh ma gheibh e stòras sam bith air ais bho àrainn treas-phàrtaidh ùr. Mar eisimpleir, ma bhios e a’ luchdachadh Google Fonts, React fonts bho CDN, no ag iarraidh freagairt JSON bho fhrithealaiche API.

Mar as trice bidh stèidheachadh ceangal ùr a’ toirt beagan cheudan milliseconds. Tha e air a dhèanamh aon uair, ach tha e fhathast a 'toirt ùine. Ma tha thu air ceangal a stèidheachadh ro-làimh, sàbhalaidh tu ùine agus luchdaich sìos goireasan bhon raon seo nas luaithe.

sheantansan

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

href a’ comharrachadh an t-ainm àrainn airson a bheil thu airson an seòladh IP a dhearbhadh. Faodar a shònrachadh le ro-leasachan (https://domain.com) no às aonais (//domain.com).

Cuin a chleachdas tu

Cleachd airson raointean a bhios a dhìth a dh'aithghearr gus stoidhle, sgriobt no ìomhaigh chudromach a luchdachadh sìos às an sin, ach chan eil thu eòlach air URL a’ ghoireas fhathast. Mar eisimpleir:

  • Tha an tagradh agad air aoigheachd air my-app.com agus a’ dèanamh iarrtasan AJAX gu api.my-app.com: Chan eil fios agad air na ceistean sònraichte ro làimh oir tha iad air an dèanamh gu fiùghantach bho JS. An seo tha e gu math iomchaidh tag a chleachdadh gus ro-cheangal ris an àrainn.
  • Tha an tagradh agad air aoigheachd air my-app.com agus a’ cleachdadh Google Fonts. Tha iad air an luchdachadh sìos ann an dà cheum: an toiseach, tha am faidhle CSS air a luchdachadh sìos bhon àrainn fonts.googleapis.com, an uairsin bidh am faidhle seo ag iarraidh clòidean le fonts.gstatic.com. Chan eil fios agad cò às a tha na faidhlichean cruth-clò sònraichte fonts.gstatic.com feumaidh tu gus an luchdaich thu am faidhle CSS, agus mar sin chan urrainn dhuinn ach ceangal tòiseachaidh a dhèanamh ro-làimh.

Cleachd an taga seo gus beagan sgriobt no stoidhle treas pàrtaidh a luathachadh air sgàth ceangal ro-stèidhichte.

Na gabh cus. Tha stèidheachadh agus cumail suas ceangal na ghnìomhachd daor don neach-dèiligidh agus don fhrithealaiche. Cleachd an taga seo airson suas ri 4-6 raointean.

Seall mion-fhiosrachadh

Tag roghainneil. Chan fheum am brabhsair an stiùireadh seo a leantainn agus faodaidh e dearmad a dhèanamh air, mar eisimpleir, ma chaidh mòran cheanglaichean a stèidheachadh mar-thà no ann an suidheachadh air choreigin eile.

Dè a tha anns a’ phròiseas ceangail?. Gus ceangal a dhèanamh ri gach làrach, feumaidh am brabhsair na leanas a dhèanamh:

  • Fuasgladh DNS. Lorg seòladh IP an fhrithealaiche (216.58.215.78) airson an ainm àrainn ainmichte (google.com).
  • Crith-làimhe TCP. Pacaidean iomlaid (neach-dèiligidh → frithealaiche → neach-dèiligidh) gus ceangal TCP a thòiseachadh leis an fhrithealaiche.
  • Crith-làimhe TLS (làraich HTTPS a-mhàin). Dà chuairt de iomlaid pacaid (neach-dèiligidh → frithealaiche → teachdaiche → frithealaiche → neach-dèiligidh) gus seisean TLS tèarainte a thòiseachadh.

Nota: Leasaichidh HTTP / 3 agus luathaichidh e an uidheamachd crathadh làimhe, ach tha e fhathast fada air falbh.

dns-prefetch

<link rel= "dns-prefetch"> ag iarraidh air a’ bhrobhsair rùn DNS a dhèanamh airson an àrainn ro-làimh ma bhios tu a’ ceangal ris a dh’ aithghearr agus gu bheil thu airson a’ chiad cheangal a luathachadh.

Feumaidh am brabhsair seòladh IP an àrainn a dhearbhadh ma gheibh e air ais goireasan sam bith bho àrainn treas-phàrtaidh ùr. Mar eisimpleir, a’ luchdachadh Google Fonts, React fonts bho CDN, no ag iarraidh freagairt JSON bho fhrithealaiche API.

Airson gach raon ùr, mar as trice bidh rùn clàr DNS a’ toirt timcheall air 20-120 ms. Chan eil seo a’ toirt buaidh ach air luchdachadh a’ chiad ghoireas bho raon sònraichte, ach tha e fhathast a’ toirt a-steach dàil. Ma nì sinn rùn DNS ro-làimh, sàbhalaidh sinn ùine agus luchdaichidh sinn an goireas nas luaithe.

sheantansan

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

href a 'comharrachadh an ainm àrainn airson a bheil thu airson an seòladh IP a shuidheachadh. Faodar a shònrachadh le ro-leasachan (https://domain.com) no às aonais (//domain.com).

Cuin a chleachdas tu

Cleachd airson raointean a bhios a dhìth a dh'aithghearr gus goireasan a luchdachadh sìos às an sin nach eil fios aig a’ bhrobhsair ro-làimh. Mar eisimpleir:

  • Tha an tagradh agad air aoigheachd air my-app.com agus a’ dèanamh iarrtasan AJAX gu api.my-app.com: Chan eil fios agad air na ceistean sònraichte ro làimh oir tha iad air an dèanamh gu fiùghantach bho JS. An seo tha e gu math iomchaidh tag a chleachdadh gus ro-cheangal ris an àrainn.
  • Tha an tagradh agad air aoigheachd air my-app.com, agus a’ cleachdadh Google Fonts. Tha iad air an luchdachadh sìos ann an dà cheum: an toiseach, tha am faidhle CSS air a luchdachadh sìos bhon àrainn fonts.googleapis.com, an uairsin bidh am faidhle seo ag iarraidh clòidean le fonts.gstatic.com. Chan eil fios agad cò às a tha na faidhlichean cruth-clò sònraichte fonts.gstatic.com bidh feum agad air gus an luchdaich thu am faidhle CSS, agus mar sin chan urrainn dhuinn ach ceangal tòiseachaidh a dhèanamh ro làimh.

Cleachd an taga seo gus beagan sgriobt no stoidhle treas pàrtaidh a luathachadh air sgàth ceangal ro-stèidhichte.

Thoir fa-near feartan coltach ri <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Mar as trice chan eil e ciallach an cleachdadh còmhla airson aon raon: <link rel= "preconnect"> mar-thà a’ toirt a-steach <link rel= "dns-prefetch"/> agus mòran a bharrachd. Faodar seo a dhearbhadh ann an dà chùis:

  • A bheil thu airson taic a thoirt do bhrobhsairean nas sine?. <link rel= "dns-prefetch" /> le taic bho bho IE10 agus Safari 5. <link rel= "preconnect"> taic airson greis ann an Chrome agus Firefox, ach cha deach a chur ri Safari ach ann an 11.1 agus chan eil taic ann fhathast ann an IE/Edge. Ma dh'fheumas tu taic a thoirt dha na brobhsairean sin, cleachd <link rel= "dns-prefetch" /> mar roghainn cùl-taic airson <link rel= "preconnect">.
  • Tha thu airson ceanglaichean gu barrachd air 4-6 raointean a luathachadh. Tag <link rel= "preconnect"> Chan eilear a 'moladh a chleachdadh le barrachd air 4-6 raointean, oir tha stèidheachadh agus cumail suas ceangal na obair daor. <link rel= "dns-prefetch" /> ag ithe nas lugha de ghoireasan, mar sin cleachd e ma tha sin riatanach.

Seall mion-fhiosrachadh

Tag roghainneil. Chan fheum am brabhsair an stiùireadh seo a leantainn, agus mar sin is dòcha nach dèan e fuasgladh DNS, mar eisimpleir, ma tha mòran de na tagaichean sin air an duilleag no ann an suidheachadh air choreigin eile.

Dè th 'ann an DNS. Tha seòladh IP sònraichte aig gach frithealaiche air an eadar-lìn, a tha coltach 216.58.215.78. Mar as trice thèid ainm na làraich a chuir a-steach do bhàr seòlaidh a’ bhrobhsair (mar eisimpleir, google.com), agus bidh frithealaichean DNS (Siostam Ainm Domain) a’ maidseadh e ri seòladh IP an fhrithealaiche (216.58.215.78).

Gus seòladh IP a dhearbhadh, feumaidh am brabhsair ceist a chuir air an fhrithealaiche DNS. Bheir e 20−120 ms nuair a cheanglas tu ri àrainn treas-phàrtaidh ùr.

Tha DNS air a thasgadh, ged nach eil e gu math earbsach. Bidh cuid de OSes agus brobhsairean a’ tasgadh cheistean DNS: sàbhalaidh seo ùine air grunn cheistean, ach chan urrainnear earbsa a bhith ann an tasgadan. Air Linux mar as trice chan eil e ag obair idir. Tha tasgadan DNS aig Chrome, ach cha mhair e ach airson mionaid. Bidh Windows a’ tasgadh freagairtean DNS airson còig latha.

ro-fhearg

<link rel= "prerender"> ag iarraidh air a’ bhrobhsair an URL a luchdachadh sìos agus a thaisbeanadh ann an taba do-fhaicsinneach. Nuair a phutas an neach-cleachdaidh air a’ cheangal, bu chòir an duilleag a thaisbeanadh sa bhad. Tha seo feumail ma tha thu cinnteach gun tadhail an neach-cleachdaidh air duilleag sònraichte agus gu bheil thu airson an taisbeanadh aige a luathachadh.

A dh’ aindeoin (no air sgàth) cho èifeachdach sa tha an taga seo, ann an 2019 <link rel= "prerender"> le droch thaic ann am prìomh bhrobhsairean. Faic barrachd mion-fhiosrachaidh. gu h-ìseal.

sheantansan

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

href puingean don URL a tha thu airson tòiseachadh a’ toirt seachad air a’ chùl.

Cuin a chleachdas tu

Nuair a tha thu dha-rìribh cinnteach gun tèid an neach-cleachdaidh gu duilleag sònraichte. Ma tha “tunail” agad far am bi 70% de luchd-tadhail air duilleag A a’ dol gu duilleag B, mar sin <link rel= "prerender"> air duilleag A cuidichidh e le bhith a’ taisbeanadh duilleag B gu math luath.

Na gabh cus. Tha ro-rendering gu math daor a thaobh leud-bann agus cuimhne. Na cleachd <link rel= "prerender"> airson barrachd air aon duilleag.

Seall mion-fhiosrachadh

Tag roghainneil. Chan fheum am brabhsair an stiùireadh seo a leantainn agus faodaidh e a leigeil seachad, mar eisimpleir, air ceangal slaodach no nuair nach eil cuimhne shaor gu leòr ann.

Gus cuimhne a shàbhaladh Cha bhith Chrome a’ dèanamh làn renderagus dìreach ro-luchdaich NoState. Tha seo a’ ciallachadh gu bheil Chrome a’ luchdachadh an duilleag agus a ghoireasan gu lèir, ach nach eil e a’ toirt seachad no a’ cur an gnìomh JavaScript.

Chan eil Firefox agus Safari a’ toirt taic don taga seo idir. Chan eil seo a’ briseadh an t-sònrachadh, leis nach fheum brobhsairean an stiùireadh seo a leantainn; ach brònach fhathast. Bug buileachaidh Tha Firefox air a bhith fosgailte airson seachd bliadhna. Tha aithrisean ann gu bheil Safari chan eil e a’ toirt taic don taga seo idir.

Geàrr-chunntas

Cleachd:

  • <link rel= "preload"> - nuair a bhios feum agad air goireas ann am beagan dhiog
  • <link rel= "prefetch"> - nuair a bhios feum agad air an goireas air an ath dhuilleig
  • <link rel= "preconnect"> - nuair a tha fios agad gum bi feum agad air goireas a dh’ aithghearr, ach nach eil fios agad fhathast air an URL slàn aige
  • <link rel= "dns-prefetch"> - mar an ceudna, nuair a tha fios agad gum feum thu goireas a dh’ aithghearr, ach nach eil fios agad fhathast air an URL slàn aige (airson brobhsairean nas sine)
  • <link rel= "prerender"> - nuair a tha thu cinnteach gun tèid luchd-cleachdaidh gu duilleag sònraichte, agus gu bheil thu airson an taisbeanadh aige a luathachadh

Source: www.habr.com

Cuir beachd ann