ProHoster > Blog > Rêveberî > Etîketên pêşda barkirin, pêşanîn û yên din

Etîketên pêşda barkirin, pêşanîn û yên din

Ð • n, Nûh * de gelek awayên çêtirkirina performansa malperê. Yek ji wan barkirina naverokê ye ku dê paşê hewce bike. Pêş-pêvajoya CSS, pêş-pêşkêşkirina rûpelê ya tevahî an çareseriya navê domainê. Em her tiştî di pêş de dikin, û dûv re tavilê encamê nîşan didin! Deng xweş.

Tiştê ku hê sartir e ev e ku ew pir sade tê pêkanîn. Pênc tag ji gerokê re fermanek bide ku kiryarên pêşîn pêk bîne:

<link rel="prefetch" href="/ku/style.css" as="style" />
<link rel="preload" href="/ku/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 em bi kurtî rave bikin ka ew çi dikin û kengê wan bikar tînin.

Biçe ser: barkirin · pêşgirtin · pêşî girêdan · dns-prefetch · pêşdibistanê

barkirin

<link rel= "preload"> ji gerokê re dibêje ku di zûtirîn dem de çavkaniyek (wek skrîpt an şêwazek) bar bike û cache bike. Ev bikêr e dema ku çavkaniyek çend saniyeyan piştî barkirina rûpelê hewce bike - û hûn dixwazin pêvajoyê bilezînin.

Gerok piştî barkirinê bi çavkaniyê re tiştek nake. Skrîpt nayên înfazkirin, pelên şêwazê nayên sepandin. Çavkanî bi hêsanî tê girtin û li ser daxwazê ​​yekser tête peyda kirin.

syntax

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

href xalên çavkaniya ku hûn dixwazin dakêşin.

as dikare her tiştê ku di gerokê de were daxistin be:

  • style ji bo pelên şêwazê,
  • script ji bo nivîsan,
  • font ji bo tîpan,
  • fetch ji bo çavkaniyên ku bi kar têne barkirin fetch() an XMLHttpRequest,
  • lîsteya tam bibînin li ser MDN.

Girîng e ku meriv taybetmendiyê diyar bike as - ev ji gerokê re dibe alîkar ku dakêşan bi rêkûpêk pêşanî û plansaz bike.

Dema ku bikar bînin

Dema ku çavkanî di pêşerojek pir nêzîk de hewce be, barkirina pêşdibistanê bikar bînin. Bo nimûne:

  • Fontên ne-standard ji pelek derveyî: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    by default comic-sans.woff2 dê tenê piştî dakêşandin û parskirinê dest bi barkirinê bike index.css. Ji bo ku hûn ewqas dirêj li bendê nebin, hûn dikarin fontê berê bikar bînin dakêşin <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Ger hûn şêwazên xwe li gorî nêzîkatiyê ji hev veqetînin CSS krîtîk di du beşan de, krîtîk (ji bo vegotina tavilê) û ne-rexne: 
    <style>
/* Inlined critical styles */
</style>

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

    Bi vê nêzîkbûnê re, şêwazên ne-rexne dê tenê gava ku JavaScript dimeşîne dest bi barkirinê bikin, ku dikare çend saniyeyan piştî radestkirinê çêbibe. Li şûna ku li bendê bin JS bikar bînin <link rel= "preload">ji bo ku berê dest bi dakêşanê bikin:

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

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

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

Berî barkirinê zêde bi kar neynin. Ger hûn her tiştî li pey hev bar bikin, malper dê bi efsûnî bilez neke; berevajî, ew ê rê li ber gerokê bigire ku karê xwe rast plansaz bike.

Nabe ku bi pêşîgirtinê re were tevlihev kirin. Bi kar neynin <link rel= "preload">, heke piştî barkirina rûpelê yekser çavkaniyê ne hewce ye. Heke hûn paşê hewce ne, ji bo nimûne ji bo rûpela din, paşê bikar bînin <link rel= "prefetch">.

Agahdarî bibînin

Ev tagek pêdivî ye ji hêla gerokê ve were darve kirin (heke ew piştgirî bike), berevajî hemî nîşaneyên din bi barkirina pêşîn ve girêdayî ye. Gerok divê çavkaniya ku tê de hatî destnîşan kirin dakêşîne <link rel="preload">. Di rewşên din de dibe ku ew barkirina pêşîn paşguh bike, mînakî heke ew li ser pêwendiyek hêdî dimeşe.

Priorities. Gerok bi gelemperî pêşanînên cihêreng ji çavkaniyên cihêreng (şel, nivîs, tîp, hwd.) re destnîşan dikin da ku pêşî çavkaniyên herî girîng bar bikin. Di vê rewşê de, gerok ji hêla taybetmendiyê ve pêşîniyê destnîşan dike as. Ji bo geroka Chrome hûn dikarin lê binêrin tabloya pêşîn a tevahî.

Etîketên pêşda barkirin, pêşanîn û yên din

pêşgirtin

<link rel= "prefetch"> ji gerokê dipirse ku çavkaniyekê (wekî skrîptek an pelgeya şêwazê) li paşîn dakêşîne û cache bike. Barkirin di pêşanînek kêm de pêk tê, ji ber vê yekê ew bi çavkaniyên girîngtir re mudaxele nake. Ev bikêr e ger çavkanî li ser rûpela paşîn hewce be û hûn dixwazin wê di pêş de cache bikin.

Li vir jî, gerok piştî barkirinê tiştek bi çavkaniyê re nake. Skrîpt nayên înfazkirin, pelên şêwazê nayên sepandin. Çavkanî bi hêsanî tê girtin û li ser daxwazê ​​yekser tête peyda kirin.

syntax

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

href xalên çavkaniya ku hûn dixwazin dakêşin.

as dikare her tiştê ku di gerokê de were daxistin be:

  • style ji bo pelên şêwazê,
  • script ji bo nivîsan,
  • font ji bo tîpan,
  • fetch ji bo çavkaniyên ku bi kar têne barkirin fetch() an XMLHttpRequest,
  • lîsteya tam bibînin li ser MDN.

Girîng e ku meriv taybetmendiyê diyar bike as - ev ji gerokê re dibe alîkar ku dakêşan rast pêşanî û plansaz bike.

Dema ku bikar bînin

Ji bo barkirina çavkaniyên ji rûpelên din, heke ji we re çavkaniyek ji rûpelek din lazim be, û hûn dixwazin wê ji berê de bar bikin da ku wê hingê danasîna wê rûpelê bilez bikin. Bo nimûne:

  • We firotgehek serhêl heye, û 40% ji bikarhêneran ji rûpelê malê derdikevin ji bo rûpelê hilberê. Bikaranîn <link rel= "prefetch">, barkirina pelên CSS û JS da ku rûpelên hilberê bidin.
  • We serîlêdanek rûpelek yek heye, û rûpelên cûda pakêtên cihêreng bar dikin. Dema ku bikarhênerek seredana rûpelek dike, pakêtên ji bo hemî rûpelên ku ew bi wan ve girêdide dikare ji pêş de were barkirin.

Ihtîmal e ku ev tag bi her astê bi ewlehî were bikar anîn.. Gerok bi gelemperî pêşhilanîn bi pêşîniya herî nizm plansaz dikin, ji ber vê yekê ew kesek aciz nake. Tenê ji bîr mekin ku ew seyrûsefera bikarhêner dixwe, ku dikare drav bide.

Ne ji bo daxwazên lezgîn. Bi kar neynin <link rel= "prefetch">, dema ku çavkaniyê di çend saniyan de hewce ye. Di vê rewşê de, bikar bînin <link rel= "preload">.

Agahdarî bibînin

Tag Bijarî. Gerok ne hewce ye ku vê rêwerzê bişopîne; Mînakî, li ser pêwendiyek hêdî dibe ku ew paşguh bike.

Pêşî li Chrome. Li Chrome <link rel= "prefetch"> bi gelemperî bi pêşîniya herî kêm têne darve kirin (binêre tabloya pêşîn a tevahî), ango piştî barkirina her tiştê din.

pêşî girêdan

<link rel= "preconnect"> Dema ku hûn dixwazin di pêşerojê de sazkirina pêwendiyê bilez bikin ji gerokê dipirse ku pêş de bi domainê ve were girêdan.

Ger gerok ji domanek partiya sêyemîn a nû vegere, pêdivî ye ku pêwendiyek saz bike. Mînakî, heke ew Fontên Google-ê, tîpên React ji CDN-ê bar dike, an bersivek JSON ji serverek API-yê bixwaze.

Damezrandina pêwendiyek nû bi gelemperî çend sed milî çirkeyan digire. Carekê tê kirin, lê dîsa jî dem digire. Ger we pêwendiyek pêşwext saz kiribe, hûn ê wextê xwe biparêzin û çavkaniyên ji vê domainê zûtir dakêşin.

syntax

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

href Navê domainê ya ku hûn dixwazin navnîşana IP-yê diyar bikin destnîşan dike. Dikare bi pêşgirek were diyar kirin (https://domain.com) an bêyî wê (//domain.com).

Dema ku bikar bînin

Ji bo domên ku dê di demek nêzîk de hewce bibin bikar bînin da ku hûn şêwazek girîng, nivîsar an wêneyek ji wir dakêşin, lê hûn hîn URL-ya çavkaniyê nizanin. Bo nimûne:

  • Serlêdana we li ser mêvandar e my-app.com û daxwazên AJAX dike api.my-app.com: Hûn pirsên taybetî di pêş de nizanin ji ber ku ew bi dînamîk ji JS têne çêkirin. Li vir pir maqûl e ku meriv nîşanek bikar bîne da ku pêşî li domainê were girêdan.
  • Serlêdana we li ser mêvandar e my-app.com û Google Fonts bikar tîne. Ew di du gavan de têne daxistin: yekem, pelê CSS ji domainê tê daxistin fonts.googleapis.com, wê demê ev pel bi tîpan daxwaz dike fonts.gstatic.com. Hûn nikarin zanibin ku pelên tîpên taybetî ji kîjan in fonts.gstatic.com hûn ê hewce bikin heya ku hûn pelê CSS-ê barkirin, ji ber vê yekê em tenê dikarin pêwendiyek pêşîn çêkin.

Vê etîketê bikar bînin da ku hin nivîsar an şêwazek partiya sêyemîn hinekî bilez bikin ji ber pêwendiya pêş-sazkirî.

Zêde bikar neynin. Sazkirin û domandina pêwendiyê hem ji bo xerîdar û hem jî ji serverê re operasyonek biha ye. Vê nîşanê ji bo herî zêde 4-6 domainan bikar bînin.

Agahdarî bibînin

Tag Bijarî. Gerok ne hewce ye ku vê rêwerzê bişopîne û dibe ku wê paşguh bike, ji bo nimûne, heke gelek girêdan berê hatine damezrandin an di rewşek din de.

Pêvajoya pêwendiyê çi dike?. Ji bo girêdana her malperê, gerok divê jêrîn bike:

  • çareseriya DNS. Navnîşana IP-ya serverê bibîne (216.58.215.78) ji bo navê domainê diyarkirî (google.com).
  • destên TCP. Ji bo destpêkirina pêwendiyek TCP bi serverê re pakêtan biguhezînin (muwekîlê → server → muwekîlê).
  • TLS handshake (tenê malperên HTTPS). Du gerên pevguhertina pakêtê (muwekîlê → pêşkêşker → xerîdar → server → xerîdar) ji bo destpêkirina danişînek TLS ya ewledar.

Nîşe: HTTP/3 dê mekanîzmaya destanan çêtir û bileztir bike, lê ew hîn jî rêyek dûr e.

dns-prefetch

<link rel= "dns-prefetch"> ger hûn ê di demek nêzîk de pê ve girêbidin û dixwazin pêwendiya destpêkê bilez bikin ji gerokê dipirse ku çareseriya DNS-ê ji bo domainê pêşwext bike.

Gerok divê navnîşana IP-ya domainê diyar bike ger ew ê çavkaniyek ji domainek partiya sêyemîn a nû bistîne. Mînakî, barkirina Google Fonts, React fonts ji CDN, an daxwazkirina bersivek JSON ji serverek API.

Ji bo her domainek nû, çareseriya tomara DNS bi gelemperî 20-120 ms digire. Ev tenê bandorê li barkirina çavkaniya yekem a ji domainek diyar dike, lê dîsa jî derengiyek destnîşan dike. Ger em di pêş de çareseriya DNS-ê pêk bînin, em ê wextê xilas bikin û çavkaniyê zûtir bar bikin.

syntax

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

href Navê domainê ya ku hûn dixwazin navnîşana IP-yê saz bikin destnîşan dike. Dikare bi pêşgirek were diyar kirin (https://domain.com) an bêyî wê (//domain.com).

Dema ku bikar bînin

Ji bo domên ku dê di demek nêzîk de hewce bibin bikar bînin da ku çavkaniyên ji wir dakêşin ku gerok di pêş de pê nizane. Bo nimûne:

  • Serlêdana we li ser mêvandar e my-app.com û daxwazên AJAX dike api.my-app.com: Hûn pirsên taybetî di pêş de nizanin ji ber ku ew bi dînamîk ji JS têne çêkirin. Li vir pir maqûl e ku meriv nîşanek bikar bîne da ku pêşî li domainê were girêdan.
  • Serlêdana we li ser mêvandar e my-app.com, û Google Fonts bikar tîne. Ew di du gavan de têne daxistin: yekem, pelê CSS ji domainê tê daxistin fonts.googleapis.com, wê demê ev pel bi tîpan daxwaz dike fonts.gstatic.com. Hûn nikarin zanibin ku pelên tîpên taybetî ji kîjan in fonts.gstatic.com heya ku hûn pelê CSS-ê bar bikin hûn ê hewce bikin, ji ber vê yekê em tenê dikarin pêwendiyek pêşîn çêkin.

Vê etîketê bikar bînin da ku hin nivîsar an şêwazek partiya sêyemîn hinekî bilez bikin ji ber pêwendiya pêş-sazkirî.

Ji kerema xwe taybetmendiyên wekhev bi bîr bînin <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Bi gelemperî ne wate ye ku meriv wan ji bo yek domainê bi hev re bikar bîne: <link rel= "preconnect"> jixwe tê de <link rel= "dns-prefetch"/> û hê bêtir. Ev dikare di du rewşan de rastdar be:

  • Ma hûn dixwazin gerokên kevn piştgirî bikin?. <link rel= "dns-prefetch" /> piştgirî kirin ji IE10 û Safari 5. <link rel= "preconnect"> ji bo demekê di Chrome û Firefox de hate piştgirî kirin, lê tenê di 11.1 û Safari de hate zêdekirin hîn jî di IE / Edge de nayê piştgirî kirin. Heke hûn hewce ne ku van gerokan piştgirî bikin, bikar bînin <link rel= "dns-prefetch" /> wekî vebijarkek hilanînê ji bo <link rel= "preconnect">.
  • Hûn dixwazin pêwendiyan ji zêdetirî 4-6 domanan re bilezînin. Tag <link rel= "preconnect"> Ew nayê pêşniyar kirin ku bi zêdetirî 4-6 domanan re bikar bînin, ji ber ku sazkirin û domandina pêwendiyek xebatek biha ye. <link rel= "dns-prefetch" /> kêm çavkaniyan dixwe, ji ber vê yekê heke pêwîst be wê bikar bînin.

Agahdarî bibînin

Tag Bijarî. Gerok ne hewce ye ku vê rêwerzê bişopîne, ji ber vê yekê ew dikare çareseriya DNS-ê bicîh neke, mînakî, heke li ser rûpelê an di rewşek din de gelek etîketên weha hebin.

DNS çi ye. Her serverek li ser Înternetê navnîşek IP-ya yekta ye, ku xuya dike 216.58.215.78. Navê malperê bi gelemperî di barika navnîşana gerokê de tête navnîş kirin (mînak, google.com(216.58.215.78).

Ji bo destnîşankirina navnîşana IP-ê, gerok divê servera DNS-ê bipirse. Dema ku bi domainek sêyemîn-a nû ve tê girêdan 20−120 ms digire.

DNS cache ye, her çend ne pir pêbawer be. Hin OS û gerok pirsên DNS-ê vedişêrin: ev ê wextê li ser pirsên dubare xilas bike, lê caching nikare were vegerandin. Li Linux-ê ew bi gelemperî qet naxebite. Chrome cacheyek DNS-ê heye, lê ew tenê deqîqeyek dom dike. Windows pênc rojan bersivên DNS-ê vedişêre.

pêşdibistanê

<link rel= "prerender"> ji gerokê dipirse ku URL-ê dakêşîne û di tabloyek nedîtbar de nîşan bide. Dema ku bikarhêner li ser lînkê bitikîne, divê rûpel tavilê were xuyang kirin. Heke hûn pê ewle ne ku bikarhêner dê serdana rûpelek diyar bike û bixwaze pêşandana wê bilez bike ev bikêr e.

Tevî (an ji ber) bandorkeriya awarte ya vê tagê, di sala 2019 de <link rel= "prerender"> di gerokên sereke de kêm piştgirî. Zêdetir hûrgulî bibînin. jêrîn.

syntax

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

href URL-ya ku hûn dixwazin di paşerojê de dest pê bikin nîşan dide.

Dema ku bikar bînin

Gava ku hûn bi rastî pê ewle ne ku bikarhêner dê biçe rûpelek diyarkirî. Ger we "tunel"ek heye ku tê de 70% ji mêvanên rûpela A diçin rûpela B, wê hingê <link rel= "prerender"> di rûpela A de dê bibe alîkar ku rûpela B pir zû were xuyang kirin.

Zêde bikar neynin. Pre-rendering di warê bandwidth û bîra de pir biha ye. Bi kar neynin <link rel= "prerender"> ji bo bêtir ji yek rûpel.

Agahdarî bibînin

Tag Bijarî. Gerok ne hewce ye ku vê rêwerzê bişopîne û dibe ku wê paşguh bike, ji bo nimûne, li ser pêwendiyek hêdî an dema ku têra bîranîna belaş tune.

Ji bo bîranînê biparêzin Chrome bi tevahî rendering nakeû tenê NoState pêşda barkirin. Ev tê vê wateyê ku Chrome rûpel û hemî çavkaniyên wê bar dike, lê JavaScript-ê nade an naxebitîne.

Firefox û Safari qet vê tagê piştgirî nakin. Ev taybetmendiyê binpê nake, ji ber ku gerok ne hewce ne ku vê rêwerzê bişopînin; lê dîsa jî xemgîn. Bûka pêkanînê Firefox heft sal in vekirî ye. Rapor hene ku Safari vê tagê jî piştgirî nake.

Nîqaş

Bikaranîn:

  • <link rel= "preload"> - gava ku hûn di çend saniyan de çavkaniyek hewce dikin
  • <link rel= "prefetch"> - gava ku hûn hewceyê çavkaniyê li ser rûpela din
  • <link rel= "preconnect"> - gava ku hûn dizanin ku hûn ê di demek nêzîk de hewceyê çavkaniyek bin, lê hûn hîn URL-ya wê ya tevahî nizanin
  • <link rel= "dns-prefetch"> - Bi heman rengî, gava ku hûn dizanin ku hûn ê di demek nêzîk de hewceyê çavkaniyekê bin, lê hûn hîn URL-ya wê ya tevahî nizanin (ji bo gerokên kevntir)
  • <link rel= "prerender"> - gava ku hûn pê ewle ne ku bikarhêner dê biçin rûpelek diyarkirî, û hûn dixwazin pêşandana wê bilez bikin

Source: www.habr.com

Add a comment