ProHoster > Blag > Riarachán > Réamhlódáil, prefetch agus clibeanna eile

Réamhlódáil, prefetch agus clibeanna eile

Tá go leor bealaí chun feidhmíocht gréasáin a fheabhsú. Ar cheann acu tá réamhluchtú ábhar a bheidh ag teastáil níos déanaí. Réamhphróiseáil CSS, réamh-rindreáil leathanaigh iomlán nó réiteach ainm fearainn. Déanaimid gach rud roimh ré, agus ansin cuirimid an toradh ar taispeáint láithreach! Fuaimeanna fionnuar.

Is é an rud atá níos fuaire fós ná go gcuirtear i bhfeidhm é go han-simplí. Cúig chlib tabhair ordú don bhrabhsálaí réamhghníomhartha a dhéanamh:

<link rel="prefetch" href="/ga/style.css" as="style" />
<link rel="preload" href="/ga/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íneoimis go hachomair cad a dhéanann siad agus cathain is ceart iad a úsáid.

Léim go: réamhlódáil · prefetch · réamhcheangail · dns-prefetch · réamhrá

réamhlódáil

<link rel= "preload"> insíonn sé don bhrabhsálaí acmhainn a luchtú agus a thaisceadh (ar nós script nó stílbhileog) chomh luath agus is féidir. Tá sé seo úsáideach nuair a bhíonn acmhainn ag teastáil cúpla soicind tar éis an leathanach a luchtú - agus ba mhaith leat an próiseas a bhrostú.

Ní dhéanann an brabhsálaí faic leis an acmhainn tar éis é a luchtú. Ní dhéantar scripteanna, ní chuirtear stílbhileoga i bhfeidhm. Tá an acmhainn i dtaisce go simplí agus cuirtear ar fáil láithreach é ach é a iarraidh.

error

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

href pointí ar an acmhainn is mian leat a íoslódáil.

as rud ar bith is féidir a íoslódáil sa bhrabhsálaí:

  • style le haghaidh bileoga stíle,
  • script le haghaidh scripteanna,
  • font le haghaidh clónna,
  • fetch le haghaidh acmhainní luchtaithe ag baint úsáide as fetch() nó XMLHttpRequest,
  • féach ar an liosta iomlán ar MDN.

Tá sé tábhachtach an tréith a shonrú as – cuidíonn sé seo leis an mbrabhsálaí íoslódálacha a chur in ord tosaíochta agus a sceidealú i gceart.

Cathain a úsáid

Bain úsáid as réamhlódáil nuair a bheidh an acmhainn ag teastáil go luath amach anseo. Mar shampla:

  • Clónna neamhchaighdeánacha ó chomhad seachtrach: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    De réir réamhshocraithe comic-sans.woff2 cuirfear tús leis an luchtú ach amháin tar éis é a íoslódáil agus a pharsáil index.css. Chun fanacht chomh fada a sheachaint, is féidir leat an cló a íoslódáil níos luaithe ag baint úsáide as <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Má scarann ​​tú do stíleanna de réir an chur chuige CSS criticiúil ina dhá chuid, criticiúil (le haghaidh rindreála láithreach) agus neamhchriticiúil: 
    <style>
/* Inlined critical styles */
</style>

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

    Leis an gcur chuige seo, ní thosóidh stíleanna neamhchriticiúil a luchtú ach amháin nuair a ritheann JavaScript, rud a d'fhéadfadh tarlú cúpla soicind tar éis rindreála. In ionad fanacht úsáid JS <link rel= "preload">chun tús a chur le híoslódáil níos luaithe:

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

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

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

Ná ró-úsáid réamhlódáil. Má luchtaíonn tú gach rud i ndiaidh a chéile, ní luasóidh an suíomh go draíochta; ar a mhalairt, cuirfidh sé cosc ​​​​ar an mbrabhsálaí a chuid oibre a phleanáil i gceart.

Gan a mheascadh le prefetching. Ná húsáid <link rel= "preload">, mura bhfuil an acmhainn ag teastáil uait díreach tar éis an leathanach a luchtú. Más gá duit é níos déanaí, mar shampla don chéad leathanach eile, bain úsáid as <link rel= "prefetch">.

Sonraí

Is clib riachtanach é seo a fhorghníomhú ag an mbrabhsálaí (má thacaíonn sé leis), murab ionann agus gach clib eile a bhaineann le réamhluchtú. Ní mór don bhrabhsálaí an acmhainn atá sonraithe i <link rel="preload">. I gcásanna eile féadfaidh sé neamhaird a dhéanamh ar réamhlódáil, mar shampla má tá sé ag rith ar nasc mall.

Tosaíochtaí. De ghnáth déanann brabhsálaithe tosaíochtaí éagsúla a shannadh d'acmhainní éagsúla (stíleanna, scripteanna, clónna, etc.) chun na hacmhainní is tábhachtaí a luchtú ar dtús. Sa chás seo, cinneann an brabhsálaí tosaíocht de réir tréithe as. Do bhrabhsálaí Chrome is féidir leat breathnú ar tábla tosaíochta iomlán.

Réamhlódáil, prefetch agus clibeanna eile

prefetch

<link rel= "prefetch"> iarrann sé ar an mbrabhsálaí acmhainn (ar nós script nó stílbhileog) a íoslódáil agus a thaisceadh sa chúlra. Tarlaíonn lódáil ar thosaíocht íseal agus mar sin ní chuireann sé isteach ar acmhainní níos tábhachtaí. Tá sé seo úsáideach má tá an acmhainn ag teastáil ar an gcéad leathanach eile agus gur mhaith leat é a thaisceadh roimh ré.

Anseo, freisin, ní dhéanann an brabhsálaí faic leis an acmhainn tar éis é a luchtú. Ní dhéantar scripteanna, ní chuirtear stílbhileoga i bhfeidhm. Tá an acmhainn i dtaisce go simplí agus cuirtear ar fáil láithreach é ach é a iarraidh.

error

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

href pointí ar an acmhainn is mian leat a íoslódáil.

as rud ar bith is féidir a íoslódáil sa bhrabhsálaí:

  • style le haghaidh bileoga stíle,
  • script le haghaidh scripteanna,
  • font le haghaidh clónna,
  • fetch le haghaidh acmhainní luchtaithe ag baint úsáide as fetch() nó XMLHttpRequest,
  • féach ar an liosta iomlán ar MDN.

Tá sé tábhachtach an tréith a shonrú as - cabhraíonn sé seo leis an mbrabhsálaí íoslódálacha a chur in ord tosaíochta agus a sceidealú i gceart.

Cathain a úsáid

Chun acmhainní a lódáil ó leathanaigh eile, má theastaíonn acmhainn ó leathanach eile uait, agus gur mhaith leat í a réamhlódáil chun rindreáil an leathanaigh sin a bhrostú. Mar shampla:

  • Tá siopa ar líne agat, agus fágann 40% d’úsáideoirí an leathanach baile don leathanach táirge. Úsáid <link rel= "prefetch">, comhaid CSS agus JS a luchtú chun leathanaigh táirge a rindreáil.
  • Tá feidhmchlár aon leathanach amháin agat, agus lódálann leathanaigh éagsúla pacáistí éagsúla. Nuair a thugann úsáideoir cuairt ar leathanach, is féidir pacáistí do na leathanaigh go léir a nascann sé leo a réamhlódáil.

Is dócha gur féidir an chlib seo a úsáid go sábháilte go pointe ar bith.. De ghnáth déanann brabhsálaithe prefetch a sceidealú leis an tosaíocht is ísle, mar sin ní bhacann sé le haon duine. Coinnigh i gcuimhne go n-ídíonn sé trácht úsáideora, rud a d'fhéadfadh airgead a chostas.

Ní le haghaidh iarratais phráinneacha. Ná húsáid <link rel= "prefetch">, nuair a bhíonn an acmhainn ag teastáil i gceann cúpla soicind. Sa chás seo, bain úsáid as <link rel= "preload">.

Sonraí

Clib roghnach. Ní gá don bhrabhsálaí an treoir seo a leanúint; féadfaidh sé neamhaird a dhéanamh de, mar shampla, ar nasc mall.

Tosaíocht i Chrome. I Chrome <link rel= "prefetch"> a fhorghníomhaítear de ghnáth le tosaíocht íosta (féach tábla tosaíochta iomlán), is é sin, tar éis gach rud eile a luchtú.

réamhcheangail

<link rel= "preconnect"> iarrann sé ar an mbrabhsálaí ceangal leis an bhfearann ​​roimh ré agus tú ag iarraidh socrú ceangail a bhrostú amach anseo.

Ní mór don bhrabhsálaí nasc a bhunú má dhéanann sé aon acmhainní a aisghabháil ó fhearann ​​nua tríú páirtí. Mar shampla, má lódálann sé Clónna Google, clónna React ó CDN, nó má iarrann sé freagra JSON ó fhreastalaí API.

De ghnáth tógann sé cúpla céad milleasoicind chun nasc nua a bhunú. Déantar é uair amháin, ach tógann sé am fós. Má tá nasc bunaithe agat roimh ré, sábhálfaidh tú am agus íoslódálann tú acmhainní ón bhfearann ​​seo níos tapúla.

error

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

href léiríonn sé an t-ainm fearainn a bhfuil tú ag iarraidh an seoladh IP a chinneadh. Is féidir é a shonrú le réimír (https://domain.com) nó gan é (//domain.com).

Cathain a úsáid

Úsáid le haghaidh fearainn a bheidh ag teastáil go luath chun stíl, script nó íomhá tábhachtach a íoslódáil as sin, ach níl URL na hacmhainne ar eolas agat go fóill. Mar shampla:

  • Tá d'iarratas á óstáil ar my-app.com agus déanann sé iarratais AJAX chuig api.my-app.com: Níl na ceisteanna sonracha ar eolas agat roimh ré mar go ndéantar iad go dinimiciúil ó JS. Anseo tá sé oiriúnach go leor clib a úsáid chun nascadh leis an bhfearann ​​​​roimhe.
  • Tá d'iarratas á óstáil ar my-app.com agus úsáideann Clónna Google. Déantar iad a íoslódáil in dhá chéim: ar dtús, déantar an comhad CSS a íoslódáil ón bhfearann fonts.googleapis.com, ansin iarrann an comhad seo clónna le fonts.gstatic.com. Ní féidir a fhios agat cé na comhaid chló ar leith as a dtagann fonts.gstatic.com beidh ort go dtí go lódálann tú an comhad CSS, mar sin ní féidir linn ach réamhcheangal a dhéanamh roimh ré.

Bain úsáid as an gclib seo chun roinnt script nó stíl tríú páirtí a bhrostú beagán mar gheall ar nasc réamhbhunaithe.

Ná bain ró-úsáid. Is oibríocht chostasach é nasc a bhunú agus a chothabháil don chliant agus don fhreastalaí araon. Úsáid an chlib seo le haghaidh 4-6 fhearann ​​ar a mhéad.

Sonraí

Clib roghnach. Ní gá don bhrabhsálaí an treoir seo a leanúint agus féadfaidh sé neamhaird a dhéanamh air, mar shampla, má tá go leor nasc bunaithe cheana féin nó i gcás éigin eile.

Cad a chuimsíonn an próiseas nasctha?. Chun nascadh le gach suíomh, ní mór don bhrabhsálaí na rudaí seo a leanas a dhéanamh:

  • Rún DNS. Aimsigh seoladh IP an fhreastalaí (216.58.215.78) don ainm fearainn sonraithe (google.com).
  • Croitheadh ​​láimhe TCP. Malartú paicéid (cliant → freastalaí → cliant) chun nasc TCP a thionscnamh leis an bhfreastalaí.
  • Croitheadh ​​láimhe TLS (suíomhanna HTTPS amháin). Dhá bhabhta de mhalartú paicéad (cliant → freastalaí → cliant → freastalaí → cliant) chun seisiún slán TLS a thionscnamh.

Nóta: Feabhsóidh HTTP/3 an mheicníocht do chroitheadh ​​láimhe agus cuirfidh sé dlús leis, ach tá sé fós i bhfad as.

dns-prefetch

<link rel= "dns-prefetch"> Iarrann sé ar an mbrabhsálaí réiteach DNS a dhéanamh don fhearann ​​roimh ré an mbeidh tú ag nascadh leis go luath agus más mian leat an nasc tosaigh a bhrostú.

Ní mór don bhrabhsálaí seoladh IP an fhearainn a chinneadh más rud é go n-aisghabhfaidh sé aon acmhainní ó fhearann ​​​​tríú páirtí nua. Mar shampla, Clónna Google á lódáil, clónna React ó CDN, nó freagra JSON a iarraidh ó fhreastalaí API.

I gcás gach fearainn nua, is gnách go dtógann taifeach taifead DNS thart ar 20-120 ms. Ní chuireann sé seo isteach ach ar lódáil na chéad acmhainne ó fhearann ​​ar leith, ach cuireann sé moill isteach fós. Má dhéanaimid réiteach DNS roimh ré, sábhálfaimid am agus lódálfaimid an acmhainn níos tapúla.

error

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

href léiríonn an t-ainm fearainn a bhfuil tú ag iarraidh an seoladh IP a shocrú. Is féidir é a shonrú le réimír (https://domain.com) nó gan é (//domain.com).

Cathain a úsáid

Úsáid le haghaidh fearainn a bheidh ag teastáil go luath chun acmhainní a íoslódáil uaidh sin nach bhfuil an brabhsálaí ar an eolas fúthu roimh ré. Mar shampla:

  • Tá d'iarratas á óstáil ar my-app.com agus déanann sé iarratais AJAX chuig api.my-app.com: Níl na ceisteanna sonracha ar eolas agat roimh ré mar go ndéantar iad go dinimiciúil ó JS. Anseo tá sé oiriúnach go leor clib a úsáid chun nascadh leis an bhfearann ​​​​roimhe.
  • Tá d'iarratas á óstáil ar my-app.com, agus úsáideann Clónna Google. Déantar iad a íoslódáil in dhá chéim: ar dtús, déantar an comhad CSS a íoslódáil ón bhfearann fonts.googleapis.com, ansin iarrann an comhad seo clónna le fonts.gstatic.com. Ní féidir a fhios agat cé na comhaid chló ar leith as a dtagann fonts.gstatic.com beidh sé de dhíth ort go dtí go lódálann tú an comhad CSS, mar sin ní féidir linn ach réamhcheangal a dhéanamh roimh ré.

Bain úsáid as an gclib seo chun roinnt script nó stíl tríú páirtí a bhrostú beagán mar gheall ar nasc réamhbhunaithe.

Tabhair faoi deara le do thoil tréithe cosúla le <link rel= "dns-prefetch"/> и <link rel= "preconnect">. De ghnáth ní dhéanann sé ciall iad a úsáid le chéile le haghaidh fearann ​​amháin: <link rel= "preconnect"> folaíonn cheana féin <link rel= "dns-prefetch"/> agus i bhfad níos mó. Is féidir é seo a chosaint in dhá chás:

  • Ar mhaith leat tacú le brabhsálaithe níos sine?. <link rel= "dns-prefetch" /> le tacaíocht ó ó IE10 agus Safari 5. <link rel= "preconnect"> tacaíodh ar feadh tamaill i Chrome agus Firefox, ach níor cuireadh ach le Safari i 11.1 agus gan tacaíocht fós in IE/Edge. Más gá duit tacú leis na brabhsálaithe seo, bain úsáid as <link rel= "dns-prefetch" /> mar rogha cúltaca le haghaidh <link rel= "preconnect">.
  • Ba mhaith leat naisc le níos mó ná 4-6 fhearann ​​a bhrostú. Chlib <link rel= "preconnect"> Ní mholtar é a úsáid le níos mó ná 4-6 fearainn, ós rud é gur oibríocht chostasach é nasc a bhunú agus a chothabháil. <link rel= "dns-prefetch" /> ídíonn sé níos lú acmhainní, mar sin bain úsáid as más gá.

Sonraí

Clib roghnach. Ní gá don bhrabhsálaí an treoir seo a leanúint, mar sin ní fhéadfaidh sé réiteach DNS a dhéanamh, mar shampla, má tá go leor clibeanna den sórt sin ar an leathanach nó i gcás éigin eile.

Cad é DNS. Tá seoladh IP uathúil ag gach freastalaí ar an Idirlíon, a bhfuil cuma air 216.58.215.78. De ghnáth cuirtear ainm an tsuímh isteach i mbarra seoltaí an bhrabhsálaí (mar shampla, google.com), agus meaitseálann freastalaithe DNS (Córas Ainm Fearainn) é le seoladh IP an fhreastalaí (216.58.215.78).

Chun seoladh IP a chinneadh, ní mór don bhrabhsálaí an freastalaí DNS a cheistiú. Tógann sé 20−120 ms agus tú ag nascadh le fearann ​​nua tríú páirtí.

Tá DNS i dtaisce, cé nach bhfuil sé an-iontaofa. Taisceann roinnt OSes agus brabhsálaithe fiosruithe DNS: sábhálfaidh sé seo am ar cheisteanna arís agus arís eile, ach ní féidir brath ar thaisceadh. Ar Linux de ghnáth ní oibríonn sé ar chor ar bith. Tá taisce DNS ag Chrome, ach ní mhaireann sé ach ar feadh nóiméid. Taisceann Windows freagraí DNS ar feadh cúig lá.

réamhrá

<link rel= "prerender"> iarrann an brabhsálaí an URL a íoslódáil agus é a thaispeáint i gcluaisín dofheicthe. Nuair a chliceálann an t-úsáideoir ar an nasc, ba cheart an leathanach a thaispeáint láithreach. Tá sé seo úsáideach má tá tú cinnte go dtabharfaidh an t-úsáideoir cuairt ar leathanach áirithe agus gur mhaith leat a thaispeántas a bhrostú.

In ainneoin (nó mar gheall ar) éifeachtacht eisceachtúil an chlib seo, in 2019 <link rel= "prerender"> tacaíocht lag i mbrabhsálaithe móra. Féach tuilleadh sonraí. thíos.

error

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

href pointí chuig an URL is mian leat chun tús a rindreáil sa chúlra.

Cathain a úsáid

Nuair a bhíonn tú i ndáiríre cinnte go mbeidh an t-úsáideoir dul go dtí leathanach áirithe. Má tá “tollán” agat trína dtéann 70% de na cuairteoirí ar leathanach A go leathanach B, ansin <link rel= "prerender"> ar leathanach A cabhróidh sé seo le leathanach B a thaispeáint go han-tapa.

Ná bain ró-úsáid. Tá réamh-rindreáil thar a bheith costasach i dtéarmaí bandaleithead agus cuimhne. Ná húsáid <link rel= "prerender"> ar feadh níos mó ná leathanach amháin.

Sonraí

Clib roghnach. Ní gá don bhrabhsálaí an treoir seo a leanúint agus féadfaidh sé neamhaird a dhéanamh air, mar shampla, ar nasc mall nó nuair nach bhfuil dóthain cuimhne shaor ann.

Chun cuimhne a shábháil Ní dhéanann Chrome rindreáil iomlánAgus réamhluchtaigh NoState amháin. Ciallaíonn sé seo go lódálann Chrome an leathanach agus a chuid acmhainní go léir, ach nach ndéanann sé JavaScript a fhorghníomhú nó a fhorghníomhú.

Ní thacaíonn Firefox agus Safari leis an gclib seo ar chor ar bith. Ní sháraíonn sé seo an tsonraíocht, mar ní gá do bhrabhsálaithe an treoir seo a leanúint; ach fós brónach. Fabht forfheidhmithe Tá Firefox ar oscailt le seacht mbliana. Tá tuairiscí ann go Safari ní thacaíonn an chlib seo ach an oiread.

Achoimre

Úsáid:

  • <link rel= "preload"> - nuair a bheidh acmhainn uait i gceann cúpla soicind
  • <link rel= "prefetch"> - nuair a bheidh an acmhainn uait ar an gcéad leathanach eile
  • <link rel= "preconnect"> - nuair a bhíonn a fhios agat go mbeidh acmhainn uait go luath, ach níl a URL iomlán ar eolas agat go fóill
  • <link rel= "dns-prefetch"> - mar an gcéanna, nuair a bhíonn a fhios agat go mbeidh acmhainn uait go luath, ach níl a URL iomlán ar eolas agat go fóill (do bhrabhsálaithe níos sine)
  • <link rel= "prerender"> - nuair a bhíonn tú cinnte go rachaidh úsáideoirí chuig leathanach áirithe, agus gur mhaith leat a thaispeántas a bhrostú

Foinse: will.com

Add a comment