ProHoster > blog > Gweinyddiaeth > Preload, prefetch a thagiau eraill

Preload, prefetch a thagiau eraill

Mae sawl ffordd o wella perfformiad gwe. Mae un ohonynt yn rhaglwytho cynnwys y bydd ei angen yn ddiweddarach. Cyn-brosesu CSS, rhag-rendro tudalen lawn neu ddatrysiad enw parth. Rydyn ni'n gwneud popeth ymlaen llaw, ac yna'n arddangos y canlyniad ar unwaith! Swnio'n cŵl.

Yr hyn sydd hyd yn oed yn oerach yw ei fod yn cael ei weithredu'n syml iawn. Pum tag rhowch orchymyn i'r porwr gyflawni gweithredoedd rhagarweiniol:

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


Gadewch i ni egluro'n fyr beth maen nhw'n ei wneud a phryd i'w defnyddio.

Neidio i: rhaglwyth · rhagddodiad · rhaggysylltu · dns-prefetch · rhagluniaeth

rhaglwyth

<link rel= "preload"> yn dweud wrth y porwr am lwytho a storio adnodd (fel sgript neu ddalen arddull) cyn gynted â phosibl. Mae hyn yn ddefnyddiol pan fydd angen adnodd ychydig eiliadau ar ôl i'r dudalen lwytho - a'ch bod am gyflymu'r broses.

Nid yw'r porwr yn gwneud dim â'r adnodd ar ôl ei lwytho. Nid yw sgriptiau'n cael eu gweithredu, ni chaiff dalennau arddull eu cymhwyso. Mae'r adnodd wedi'i storio'n syml a bydd ar gael ar unwaith ar gais.

cystrawen

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

href yn cyfeirio at yr adnodd rydych chi am ei lawrlwytho.

as Gall fod yn unrhyw beth y gellir ei lawrlwytho yn y porwr:

  • style ar gyfer dalennau arddull,
  • script ar gyfer sgriptiau,
  • font ar gyfer ffontiau,
  • fetch ar gyfer adnoddau a lwythir gan ddefnyddio fetch() neu XMLHttpRequest,
  • gweler y rhestr lawn ar MDN.

Mae'n bwysig nodi'r nodwedd as – mae hyn yn helpu'r porwr i flaenoriaethu ac amserlennu lawrlwythiadau yn iawn.

Pryd i ddefnyddio

Defnyddiwch raglwytho pan fydd angen yr adnodd yn y dyfodol agos iawn. Er enghraifft:

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

    Yn ddiofyn comic-sans.woff2 bydd yn dechrau llwytho dim ond ar ôl llwytho i lawr a dosrannu index.css. Er mwyn osgoi aros cyhyd, gallwch chi lawrlwytho'r ffont yn gynharach gan ddefnyddio <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Os ydych chi'n gwahanu'ch arddulliau yn ôl y dull gweithredu CSS beirniadol yn ddwy ran, hanfodol (i'w rendro ar unwaith) ac anfeirniadol: 
    <style>
/* Inlined critical styles */
</style>

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

    Gyda'r dull hwn, dim ond pan fydd JavaScript yn rhedeg y bydd arddulliau anfeirniadol yn dechrau llwytho, a all ddigwydd ychydig eiliadau ar ôl rendro. Yn lle aros defnydd JS <link rel= "preload">i ddechrau llwytho i lawr yn gynharach:

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

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

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

Peidiwch â gorddefnyddio rhaglwytho. Os ydych chi'n llwytho popeth yn olynol, ni fydd y wefan yn cyflymu'n hudol; i'r gwrthwyneb, bydd yn atal y porwr rhag cynllunio ei waith yn gywir.

Peidio â chael ei ddrysu â rhag-fetching. Peidiwch â defnyddio <link rel= "preload">, os nad oes angen yr adnodd arnoch yn syth ar ôl i'r dudalen lwytho. Os bydd ei angen arnoch yn ddiweddarach, er enghraifft ar gyfer y dudalen nesaf, yna defnyddiwch <link rel= "prefetch">.

Manylion

Mae hwn yn dag gofynnol i'w gweithredu gan y porwr (os yw'n ei gefnogi), yn wahanol i bob tag arall yn ymwneud â rhaglwytho. Rhaid i'r porwr lawrlwytho'r adnodd a nodir yn <link rel="preload">. Mewn achosion eraill gall anwybyddu rhag-lwytho, er enghraifft os yw'n rhedeg ar gysylltiad araf.

Blaenoriaethau. Mae porwyr fel arfer yn neilltuo gwahanol flaenoriaethau i wahanol adnoddau (arddulliau, sgriptiau, ffontiau, ac ati) er mwyn llwytho'r adnoddau pwysicaf yn gyntaf. Yn yr achos hwn, mae'r porwr yn pennu blaenoriaeth yn ôl priodoledd as. Ar gyfer porwr Chrome gallwch edrych ar tabl blaenoriaeth llawn.

Preload, prefetch a thagiau eraill

rhagddodiad

<link rel= "prefetch"> yn gofyn i'r porwr lawrlwytho a storio adnodd (fel sgript neu ddalen arddull) yn y cefndir. Mae llwytho yn digwydd ar flaenoriaeth isel felly nid yw'n ymyrryd ag adnoddau pwysicach. Mae hyn yn ddefnyddiol os oes angen yr adnodd ar y dudalen nesaf a'ch bod am ei storio ymlaen llaw.

Yma, hefyd, nid yw'r porwr yn gwneud dim â'r adnodd ar ôl ei lwytho. Nid yw sgriptiau'n cael eu gweithredu, ni chaiff dalennau arddull eu cymhwyso. Mae'r adnodd wedi'i storio'n syml a bydd ar gael ar unwaith ar gais.

cystrawen

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

href yn cyfeirio at yr adnodd rydych chi am ei lawrlwytho.

as Gall fod yn unrhyw beth y gellir ei lawrlwytho yn y porwr:

  • style ar gyfer dalennau arddull,
  • script ar gyfer sgriptiau,
  • font ar gyfer ffontiau,
  • fetch ar gyfer adnoddau a lwythir gan ddefnyddio fetch() neu XMLHttpRequest,
  • gweler y rhestr lawn ar MDN.

Mae'n bwysig nodi'r nodwedd as - mae hyn yn helpu'r porwr i flaenoriaethu ac amserlennu lawrlwythiadau yn gywir.

Pryd i ddefnyddio

I lwytho adnoddau o dudalennau eraill, os oes angen adnodd o dudalen arall arnoch, a'ch bod am ei raglwytho i gyflymu'r broses o rendro'r dudalen honno. Er enghraifft:

  • Mae gennych chi siop ar-lein, ac mae 40% o ddefnyddwyr yn gadael y dudalen gartref ar gyfer y dudalen cynnyrch. Defnydd <link rel= "prefetch">, llwytho ffeiliau CSS a JS i rendro tudalennau cynnyrch.
  • Mae gennych raglen un dudalen, ac mae tudalennau gwahanol yn llwytho gwahanol becynnau. Pan fydd defnyddiwr yn ymweld â thudalen, gellir rhaglwytho pecynnau ar gyfer yr holl dudalennau y mae'n cysylltu â nhw.

Mae'n debygol y gellir defnyddio'r tag hwn yn ddiogel i unrhyw raddau.. Mae porwyr fel arfer yn trefnu prefetch gyda'r flaenoriaeth isaf, felly nid yw'n trafferthu unrhyw un. Cofiwch ei fod yn defnyddio traffig defnyddwyr, a all gostio arian.

Nid ar gyfer ceisiadau brys. Peidiwch â defnyddio <link rel= "prefetch">, pan fydd angen yr adnodd mewn ychydig eiliadau. Yn yr achos hwn, defnyddiwch <link rel= "preload">.

Manylion

Tag dewisol. Nid oes angen i'r porwr ddilyn y cyfarwyddyd hwn; gall ei anwybyddu, er enghraifft, ar gysylltiad araf.

Blaenoriaeth yn Chrome. Yn Chrome <link rel= "prefetch"> fel arfer yn cael ei gyflawni gyda'r flaenoriaeth leiaf (gweler tabl blaenoriaeth llawn), hynny yw, ar ôl llwytho popeth arall.

rhaggysylltu

<link rel= "preconnect"> yn gofyn i'r porwr gysylltu â'r parth ymlaen llaw pan fyddwch am gyflymu'r broses o sefydlu cysylltiad yn y dyfodol.

Rhaid i'r porwr sefydlu cysylltiad os yw'n adfer unrhyw adnoddau o barth trydydd parti newydd. Er enghraifft, os yw'n llwytho Ffontiau Google, ffontiau React o CDN, neu'n gofyn am ymateb JSON gan weinydd API.

Mae sefydlu cysylltiad newydd fel arfer yn cymryd ychydig gannoedd o filieiliadau. Mae'n cael ei wneud unwaith, ond mae'n dal i gymryd amser. Os ydych wedi sefydlu cysylltiad ymlaen llaw, byddwch yn arbed amser ac yn lawrlwytho adnoddau o'r parth hwn yn gyflymach.

cystrawen

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

href yn nodi'r enw parth yr ydych am bennu'r cyfeiriad IP ar ei gyfer. Gellir ei nodi gyda rhagddodiad (https://domain.com) neu hebddo (//domain.com).

Pryd i ddefnyddio

Defnyddiwch ar gyfer parthau y bydd eu hangen yn fuan i lawrlwytho arddull, sgript neu ddelwedd bwysig oddi yno, ond nid ydych chi'n gwybod URL yr adnodd eto. Er enghraifft:

  • Mae eich cais yn cael ei gynnal ar my-app.com ac yn gwneud ceisiadau AJAX i api.my-app.com: Nid ydych chi'n gwybod yr ymholiadau penodol ymlaen llaw oherwydd fe'u gwneir yn ddeinamig gan JS. Yma mae'n eithaf priodol defnyddio tag i rag-gysylltu â'r parth.
  • Mae eich cais yn cael ei gynnal ar my-app.com ac yn defnyddio Ffontiau Google. Maent yn cael eu llwytho i lawr mewn dau gam: yn gyntaf, mae'r ffeil CSS yn cael ei lawrlwytho o'r parth fonts.googleapis.com, yna mae'r ffeil hon yn gofyn am ffontiau gyda fonts.gstatic.com. Ni allwch wybod o ba ffeiliau ffont penodol fonts.gstatic.com bydd angen i chi nes i chi lwytho'r ffeil CSS, felly dim ond cysylltiad rhagarweiniol y gallwn ei wneud ymlaen llaw.

Defnyddiwch y tag hwn i gyflymu rhywfaint o sgript trydydd parti neu arddull ychydig oherwydd cysylltiad a sefydlwyd ymlaen llaw.

Peidiwch â gorddefnyddio. Mae sefydlu a chynnal cysylltiad yn weithrediad drud i'r cleient a'r gweinydd. Defnyddiwch y tag hwn ar gyfer uchafswm o 4-6 parth.

Manylion

Tag dewisol. Nid oes angen i'r porwr ddilyn y cyfarwyddyd hwn a gall ei anwybyddu, er enghraifft, os oes llawer o gysylltiadau eisoes wedi'u sefydlu neu mewn rhyw achos arall.

Beth mae'r broses gysylltu yn ei gynnwys?. I gysylltu â phob gwefan, rhaid i'r porwr wneud y canlynol:

  • Datrysiad DNS. Dod o hyd i gyfeiriad IP gweinydd (216.58.215.78) ar gyfer yr enw parth penodedig (google.com).
  • Ysgwyd dwylo TCP. Pecynnau cyfnewid (cleient → gweinydd → cleient) i gychwyn cysylltiad TCP â'r gweinydd.
  • Ysgwyd llaw TLS (safleoedd HTTPS yn unig). Dwy rownd o gyfnewid pecynnau (cleient → gweinydd → cleient → gweinydd → cleient) i gychwyn sesiwn TLS diogel.

Nodyn: Bydd HTTP/3 yn gwella ac yn cyflymu'r mecanwaith ysgwyd llaw, ond mae'n dal i fod ymhell i ffwrdd.

dns-prefetch

<link rel= "dns-prefetch"> yn gofyn i'r porwr berfformio datrysiad DNS ar gyfer y parth ymlaen llaw os byddwch chi'n cysylltu ag ef yn fuan ac eisiau cyflymu'r cysylltiad cychwynnol.

Rhaid i'r porwr bennu cyfeiriad IP y parth os bydd yn adfer unrhyw adnoddau o barth trydydd parti newydd. Er enghraifft, llwytho Google Fonts, React ffontiau o CDN, neu ofyn am ymateb JSON gan weinydd API.

Ar gyfer pob parth newydd, mae datrysiad cofnodion DNS fel arfer yn cymryd tua 20-120 ms. Nid yw hyn ond yn effeithio ar lwytho'r adnodd cyntaf o barth penodol, ond mae'n dal i gyflwyno oedi. Os byddwn yn perfformio datrysiad DNS ymlaen llaw, byddwn yn arbed amser ac yn llwytho'r adnodd yn gyflymach.

cystrawen

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

href yn nodi'r enw parth yr ydych am osod y cyfeiriad IP ar ei gyfer. Gellir ei nodi gyda rhagddodiad (https://domain.com) neu hebddo (//domain.com).

Pryd i ddefnyddio

Defnyddiwch ar gyfer parthau y bydd eu hangen yn fuan i lawrlwytho adnoddau oddi yno nad yw'r porwr yn gwybod amdanynt ymlaen llaw. Er enghraifft:

  • Mae eich cais yn cael ei gynnal ar my-app.com ac yn gwneud ceisiadau AJAX i api.my-app.com: Nid ydych chi'n gwybod yr ymholiadau penodol ymlaen llaw oherwydd fe'u gwneir yn ddeinamig gan JS. Yma mae'n eithaf priodol defnyddio tag i rag-gysylltu â'r parth.
  • Mae eich cais yn cael ei gynnal ar my-app.com, ac yn defnyddio Ffontiau Google. Maent yn cael eu llwytho i lawr mewn dau gam: yn gyntaf, mae'r ffeil CSS yn cael ei lawrlwytho o'r parth fonts.googleapis.com, yna mae'r ffeil hon yn gofyn am ffontiau gyda fonts.gstatic.com. Ni allwch wybod o ba ffeiliau ffont penodol fonts.gstatic.com bydd ei angen arnoch nes i chi lwytho'r ffeil CSS, felly dim ond cysylltiad rhagarweiniol y gallwn ei wneud ymlaen llaw.

Defnyddiwch y tag hwn i gyflymu rhywfaint o sgript trydydd parti neu arddull ychydig oherwydd cysylltiad a sefydlwyd ymlaen llaw.

Nodwch nodweddion tebyg i <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Fel arfer nid yw'n gwneud synnwyr eu defnyddio gyda'i gilydd ar gyfer un parth: <link rel= "preconnect"> eisoes yn cynnwys <link rel= "dns-prefetch"/> a llawer mwy. Gellir cyfiawnhau hyn mewn dau achos:

  • Ydych chi eisiau cefnogi porwyr hŷn?. <link rel= "dns-prefetch" /> gyda chefnogaeth ers IE10 a Safari 5. <link rel= "preconnect"> yn cael ei gefnogi am gyfnod yn Chrome a Firefox, ond dim ond yn 11.1 a ychwanegwyd at Safari dal heb ei gefnogi yn IE/Edge. Os oes angen i chi gefnogi'r porwyr hyn, defnyddiwch <link rel= "dns-prefetch" /> fel opsiwn wrth gefn ar gyfer <link rel= "preconnect">.
  • Rydych chi eisiau cyflymu cysylltiadau â mwy na 4-6 parth. Tag <link rel= "preconnect"> Ni argymhellir ei ddefnyddio gyda mwy na 4-6 parth, gan fod sefydlu a chynnal cysylltiad yn weithrediad drud. <link rel= "dns-prefetch" /> yn defnyddio llai o adnoddau, felly defnyddiwch ef os oes angen.

Manylion

Tag dewisol. Nid yw'n ofynnol i'r porwr ddilyn y cyfarwyddyd hwn, felly efallai na fydd yn perfformio datrysiad DNS, er enghraifft, os oes llawer o dagiau o'r fath ar y dudalen neu mewn rhyw achos arall.

Beth yw DNS. Mae gan bob gweinydd ar y Rhyngrwyd gyfeiriad IP unigryw, sy'n edrych fel 216.58.215.78. Mae enw'r wefan fel arfer yn cael ei roi ym mar cyfeiriad y porwr (er enghraifft, google.com), a gweinyddwyr DNS (System Enw Parth) yn ei baru â chyfeiriad IP y gweinydd (216.58.215.78).

I bennu cyfeiriad IP, rhaid i'r porwr gwestiynu'r gweinydd DNS. Mae'n cymryd 20−120 ms wrth gysylltu â pharth trydydd parti newydd.

Mae DNS wedi'i storio, er nad yw'n ddibynadwy iawn. Mae rhai OSes a phorwyr yn storio ymholiadau DNS: bydd hyn yn arbed amser ar ymholiadau dro ar ôl tro, ond ni ellir dibynnu ar caching. Ar Linux fel arfer nid yw'n gweithio o gwbl. Mae gan Chrome storfa DNS, ond dim ond am funud y mae'n para. Windows caches DNS ymatebion am bum diwrnod.

rhagluniaeth

<link rel= "prerender"> yn gofyn i'r porwr lawrlwytho'r URL a'i arddangos mewn tab anweledig. Pan fydd y defnyddiwr yn clicio ar y ddolen, dylid arddangos y dudalen ar unwaith. Mae hyn yn ddefnyddiol os ydych chi'n siŵr y bydd y defnyddiwr yn ymweld â thudalen benodol ac eisiau cyflymu ei harddangos.

Er gwaethaf (neu oherwydd) effeithiolrwydd eithriadol y tag hwn, yn 2019 <link rel= "prerender"> cefnogaeth wael mewn porwyr mawr. Gweler mwy o fanylion. isod.

cystrawen

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

href yn pwyntio at yr URL rydych chi am ddechrau ei rendro yn y cefndir.

Pryd i ddefnyddio

Pan fyddwch chi'n wirioneddol sicr y bydd y defnyddiwr yn mynd i dudalen benodol. Os oes gennych chi “dwnnel” lle mae 70% o ymwelwyr â thudalen A yn mynd i dudalen B, yna <link rel= "prerender"> ar dudalen A yn helpu i arddangos tudalen B yn gyflym iawn.

Peidiwch â gorddefnyddio. Mae cyn-rendro yn ddrud iawn o ran lled band a chof. Peidiwch â defnyddio <link rel= "prerender"> am fwy nag un dudalen.

Manylion

Tag dewisol. Nid oes angen i'r porwr ddilyn y cyfarwyddyd hwn a gall ei anwybyddu, er enghraifft, ar gysylltiad araf neu pan nad oes digon o gof rhydd.

I arbed cof Nid yw Chrome yn gwneud rendro llawnAc dim ond rhaglwytho NoState. Mae hyn yn golygu bod Chrome yn llwytho'r dudalen a'i holl adnoddau, ond nid yw'n rhoi nac yn gweithredu JavaScript.

Nid yw Firefox a Safari yn cefnogi'r tag hwn o gwbl. Nid yw hyn yn torri'r fanyleb, gan nad oes angen i borwyr ddilyn y cyfarwyddyd hwn; ond yn dal yn drist. Byg gweithredu Mae Firefox wedi bod ar agor ers saith mlynedd. Mae adroddiadau bod Safari ddim yn cefnogi'r tag hwn chwaith.

Crynodeb

Defnydd:

  • <link rel= "preload"> - pan fyddwch angen adnodd mewn ychydig eiliadau
  • <link rel= "prefetch"> - pan fyddwch angen yr adnodd ar y dudalen nesaf
  • <link rel= "preconnect"> - pan fyddwch chi'n gwybod y bydd angen adnodd arnoch yn fuan, ond nid ydych chi'n gwybod ei URL llawn eto
  • <link rel= "dns-prefetch"> - yn yr un modd, pan fyddwch chi'n gwybod y bydd angen adnodd arnoch yn fuan, ond nid ydych chi'n gwybod ei URL llawn eto (ar gyfer porwyr hŷn)
  • <link rel= "prerender"> - pan fyddwch chi'n siŵr y bydd defnyddwyr yn mynd i dudalen benodol, a'ch bod chi am gyflymu ei harddangos

Ffynhonnell: hab.com

Ychwanegu sylw