Adunay daghang mga paagi aron mapauswag ang performance sa web. Usa niini mao ang preloading content nga gikinahanglan unya. CSS pre-processing, full page pre-rendering o domain name resolution. Gibuhat namon ang tanan nga daan, ug dayon ipakita dayon ang resulta! Nindot paminawon.

Ang mas bugnaw kay yano ra kaayo kining gipatuman. Lima ka tag hatagi ang browser og usa ka sugo sa paghimo sa pasiuna nga mga aksyon:

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

Atong isaysay sa daklit unsay ilang gibuhat ug kanus-a kini gamiton.

Ambak sa: preload · prefetch · preconnect · dns-prefetch · prerender

preload

<link rel= "preload"> nagsulti sa browser nga i-load ug i-cache ang usa ka kapanguhaan (sama sa usa ka script o stylesheet) sa labing dali nga panahon. Mapuslanon kini kung gikinahanglan ang usa ka kapanguhaan pipila ka segundo pagkahuman sa pagkarga sa panid - ug gusto nimo nga mapadali ang proseso.

Ang browser wala’y mahimo sa kapanguhaan pagkahuman sa pagkarga. Ang mga script wala gipatuman, ang mga style sheet wala gigamit. Ang kahinguhaan yano nga gi-cache ug diha-diha dayon gihimo nga magamit kung gihangyo.

syntax

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

href nagpaila sa kapanguhaan nga gusto nimong i-download.

as mahimong bisan unsa nga ma-download sa browser:

style alang sa mga style sheet,
script alang sa mga script,
font para sa mga font,
fetch alang sa mga kapanguhaan nga gikarga gamit fetch() o XMLHttpRequest,
tan-awa ang tibuok listahan sa MDN.

Importante nga ipiho ang hiyas as - kini makatabang sa browser sa husto nga pag-prioritize ug pag-iskedyul sa mga pag-download.

Kanus-a gamiton

Gamita ang preloading kung ang kapanguhaan gikinahanglan sa labing duol nga umaabot. Pananglitan:

Non-standard nga mga font gikan sa external file:
```

<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
pinaagi sa default comic-sans.woff2 magsugod sa loading lamang human sa download ug parsing index.css. Aron malikayan ang paghulat ug dugay, mahimo nimong i-download ang font sa sayo pa gamit <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Kung gilain nimo ang imong mga istilo sumala sa pamaagi Kritikal nga CSS ngadto sa duha ka bahin, kritikal (alang sa hinanaling paghubad) ug dili kritikal:
```
<style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>
```
Uban niini nga pamaagi, ang dili kritikal nga mga istilo magsugod ra sa pagkarga kung ang JavaScript modagan, nga mahimong mahitabo pipila ka segundo pagkahuman sa paghubad. Imbes maghulat gamit ang JS <link rel= "preload">sa pagsugod sa pag-download sa sayo pa:
```
<style>
/* Inlined critical styles */
</style>

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

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

Ayaw sobra nga paggamit sa preloading. Kung gi-load nimo ang tanan nga sunud-sunod, ang site dili makapadali, sa kasukwahi, mapugngan niini ang browser sa pagplano sa trabaho niini sa husto.

Dili malibog sa prefetching. Ayaw gamita <link rel= "preload">, kung dili nimo kinahanglan ang kapanguhaan dayon pagkahuman sa pagkarga sa panid. Kung kinahanglan nimo kini sa ulahi, pananglitan sa sunod nga panid, dayon gamita <link rel= "prefetch">.

Tan-awa ang mga detalye

Kini usa ka gikinahanglan nga tag nga ipatuman sa browser (kung kini nagsuporta niini), dili sama sa ubang mga tag may kalabutan sa preloading. Kinahanglang i-download sa browser ang kapanguhaan nga gipiho sa <link rel="preload">. Sa ubang mga kaso mahimo’g ibaliwala ang preloading, pananglitan kung kini nagdagan sa hinay nga koneksyon.

Mga prayoridad. Ang mga browser kasagarang maghatag ug lain-laing mga prayoridad sa lain-laing mga kapanguhaan (estilo, script, font, ug uban pa) aron ma-load una ang pinakaimportante nga mga kapanguhaan. Sa kini nga kaso, ang browser nagtino sa prayoridad pinaagi sa hiyas as. Alang sa Chrome browser mahimo nimong tan-awon bug-os nga priority table.

prefetch

<link rel= "prefetch"> mihangyo sa browser nga i-download ug i-cache ang usa ka kapanguhaan (sama sa script o style sheet) sa background. Ang pagkarga mahitabo sa ubos nga prayoridad aron kini dili makabalda sa mas importante nga mga kapanguhaan. Mapuslanon kini kung gikinahanglan ang kapanguhaan sa sunod nga panid ug gusto nimo nga i-cache kini daan.

Dinhi, usab, ang browser wala’y mahimo sa kapanguhaan pagkahuman sa pagkarga. Ang mga script wala gipatuman, ang mga style sheet wala gigamit. Ang kahinguhaan yano nga gi-cache ug diha-diha dayon gihimo nga magamit kung gihangyo.

syntax

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

href nagpaila sa kapanguhaan nga gusto nimong i-download.

as mahimong bisan unsa nga ma-download sa browser:

style alang sa mga style sheet,
script alang sa mga script,
font para sa mga font,
fetch alang sa mga kapanguhaan nga gikarga gamit fetch() o XMLHttpRequest,
tan-awa ang tibuok listahan sa MDN.

Importante nga ipiho ang hiyas as - kini makatabang sa browser sa husto nga pag-prioritize ug pag-iskedyul sa mga pag-download.

Kanus-a gamiton

Aron makarga ang mga kapanguhaan gikan sa ubang mga panid, kung kinahanglan nimo ang usa ka kapanguhaan gikan sa lain nga panid, ug gusto nimo nga i-preload kini aron mapadali ang paghubad sa kana nga panid. Pananglitan:

Adunay ka online nga tindahan, ug 40% sa mga tiggamit ang mibiya sa home page alang sa panid sa produkto. Paggamit <link rel= "prefetch">, nagkarga sa CSS ug JS nga mga file aron ma-render ang mga panid sa produkto.
Adunay ka usa ka aplikasyon sa panid, ug lainlain nga panid ang nagkarga sa lainlaing mga pakete. Kung ang usa ka tiggamit mobisita sa usa ka panid, ang mga pakete alang sa tanan nga mga panid nga gisumpay niini mahimong ma-preloaded.

Kini lagmit nga kini nga tag mahimong luwas nga magamit sa bisan unsang gidak-on.. Ang mga browser kasagaran mag-iskedyul sa prefetch nga adunay labing ubos nga prayoridad, mao nga dili kini makahasol ni bisan kinsa. Hinumdomi lang nga kini nag-ut-ot sa trapiko sa tiggamit, nga mahimong gasto sa salapi.

Dili alang sa dinalian nga mga hangyo. Ayaw gamita <link rel= "prefetch">, kung ang kapanguhaan gikinahanglan sa pipila ka segundo. Sa kini nga kaso, gamita <link rel= "preload">.

Tan-awa ang mga detalye

Opsyonal nga tag. Ang browser wala kinahanglana nga sundon kini nga panudlo; kini mahimong ibaliwala kini, pananglitan, sa usa ka hinay nga koneksyon.

Priyoridad sa Chrome. Sa Chrome <link rel= "prefetch"> kasagarang gipatuman nga adunay minimum nga prayoridad (tan-awa bug-os nga priority table), kana mao, pagkahuman sa pagkarga sa tanan.

preconnect

<link rel= "preconnect"> naghangyo sa browser sa pagkonektar sa domain daan kung gusto nimo nga mapadali ang pag-setup sa koneksyon sa umaabot.

Ang browser kinahanglan nga maghimo usa ka koneksyon kung makuha niini ang bisan unsang mga kapanguhaan gikan sa usa ka bag-ong domain sa ikatulo nga partido. Pananglitan, kung nag-load kini sa Google Fonts, React fonts gikan sa CDN, o nangayo og tubag sa JSON gikan sa API server.

Ang pag-establisar og bag-ong koneksyon kasagaran nagkinahanglan og pipila ka gatos ka millisecond. Gihimo kini kausa, apan nagkinahanglan gihapon og panahon. Kung nakatukod ka daan og koneksyon, makadaginot ka og oras ug mas paspas nga mag-download sa mga kapanguhaan gikan niini nga domain.

syntax

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

href nagpaila sa ngalan sa natad nga gusto nimong mahibal-an ang IP address. Mahimong matino gamit ang prefix (https://domain.com) o wala kini (//domain.com).

Kanus-a gamiton

Gamita para sa mga domain nga gikinahanglan sa dili madugay sa pag-download sa usa ka importante nga estilo, script o larawan gikan didto, apan wala ka pa mahibalo sa kapanguhaan URL. Pananglitan:

Ang imong aplikasyon gi-host sa my-app.com ug naghimo sa AJAX hangyo sa api.my-app.com: Wala nimo nahibal-an ang piho nga mga pangutana nga abante tungod kay kini gihimo nga dinamikong gikan sa JS. Dinhi angayan nga mogamit ug tag aron mag-pre-connect sa domain.
Ang imong aplikasyon gi-host sa my-app.com ug naggamit sa Google Fonts. Gi-download kini sa duha ka lakang: una, ang CSS file gi-download gikan sa domain fonts.googleapis.com, unya kini nga file nangayo ug mga font nga adunay fonts.gstatic.com. Dili nimo mahibal-an kung diin gikan ang piho nga mga file sa font fonts.gstatic.com kinahanglan nimo hangtod nga ma-load nimo ang CSS file, aron makahimo lang kami usa ka pasiuna nga koneksyon.

Gamita kini nga tag aron mapadali ang pipila ka ikatulo nga partido nga script o estilo sa gamay tungod sa pre-established nga koneksyon.

Ayaw paggamit sobra. Ang pag-establisar ug pagpadayon sa usa ka koneksyon usa ka mahal nga operasyon alang sa kliyente ug sa server. Gamita kini nga tag alang sa labing taas nga 4-6 ka domain.

Tan-awa ang mga detalye

Opsyonal nga tag. Ang browser wala kinahanglana nga sundon kini nga panudlo ug mahimong ibaliwala kini, pananglitan, kung daghang mga koneksyon ang natukod na o sa ubang mga kaso.

Unsa ang gilakip sa proseso sa koneksyon?. Aron makonektar sa matag site, ang browser kinahanglang mobuhat sa mosunod:

resolusyon sa DNS. Pangitaa ang server IP address (216.58.215.78) para sa gipiho nga domain name (google.com).
TCP handshake. Pagbaylo sa mga pakete (kliyente → server → kliyente) aron makasugod ug koneksyon sa TCP sa server.
TLS handshake (HTTPS sites lang). Duha ka hugna sa packet exchange (kliyente → server → kliyente → server → kliyente) aron masugdan ang usa ka luwas nga sesyon sa TLS.

Pahinumdom: Ang HTTP/3 mopauswag ug mopadali sa mekanismo sa paglamano, apan layo pa kini.

dns-prefetch

<link rel= "dns-prefetch"> naghangyo sa browser sa paghimo sa DNS nga resolusyon alang sa domain daan kung ikaw magkonektar niini sa dili madugay ug gusto nga mapadali ang unang koneksyon.

Kinahanglang determinahon sa browser ang IP address sa domain kung makuha ba niini ang bisan unsang mga kapanguhaan gikan sa bag-ong domain sa ikatulo nga partido. Pananglitan, ang pagkarga sa Google Fonts, React fonts gikan sa CDN, o paghangyo og JSON nga tubag gikan sa API server.

Alang sa matag bag-ong domain, ang resolusyon sa talaan sa DNS kasagarang magkinahanglan mga 20-120 ms. Kini makaapekto lamang sa loading sa unang kapanguhaan gikan sa usa ka gihatag nga domain, apan sa gihapon nagpaila sa usa ka paglangan. Kung abante ang paghimo sa resolusyon sa DNS, makadaginot kami ug oras ug mas paspas nga makarga ang kapanguhaan.

syntax

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

href nagpaila sa ngalan sa domain nga gusto nimong itakda ang IP address. Mahimong matino gamit ang prefix (https://domain.com) o wala kini (//domain.com).

Kanus-a gamiton

Gamita para sa mga domain nga gikinahanglan sa dili madugay aron ma-download ang mga kapanguhaan gikan didto nga wala mahibal-an daan sa browser. Pananglitan:

Ang imong aplikasyon gi-host sa my-app.com ug naghimo sa AJAX hangyo sa api.my-app.com: Wala nimo nahibal-an ang piho nga mga pangutana nga abante tungod kay kini gihimo nga dinamikong gikan sa JS. Dinhi angayan nga mogamit ug tag aron mag-pre-connect sa domain.
Ang imong aplikasyon gi-host sa my-app.com, ug naggamit sa Google Fonts. Gi-download kini sa duha ka lakang: una, ang CSS file gi-download gikan sa domain fonts.googleapis.com, unya kini nga file nangayo ug mga font nga adunay fonts.gstatic.com. Dili nimo mahibal-an kung diin gikan ang piho nga mga file sa font fonts.gstatic.com kinahanglan nimo kini hangtod nga ma-load nimo ang CSS file, aron makahimo lang kami usa ka pasiuna nga koneksyon sa una.

Gamita kini nga tag aron mapadali ang pipila ka ikatulo nga partido nga script o estilo sa gamay tungod sa pre-established nga koneksyon.

Palihug timan-i ang susama nga mga kinaiya sa <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Kasagaran dili makatarunganon nga gamiton kini alang sa usa ka domain: <link rel= "preconnect"> naglakip na <link rel= "dns-prefetch"/> ug daghan pa. Kini mahimong makatarunganon sa duha ka mga kaso:

Gusto ba nimong suportahan ang mga daan nga browser?. <link rel= "dns-prefetch" /> gisuportahan sa sukad sa IE10 ug Safari 5. <link rel= "preconnect"> gisuportahan sa makadiyot sa Chrome ug Firefox, apan gidugang lamang sa Safari sa 11.1 ug wala gihapon gisuportahan sa IE/Edge. Kung kinahanglan nimo nga suportahan kini nga mga browser, gamita <link rel= "dns-prefetch" /> isip usa ka backup nga kapilian alang sa <link rel= "preconnect">.

Gusto nimo nga mapadali ang mga koneksyon sa labaw pa sa 4-6 nga mga dominyo. Tag <link rel= "preconnect"> Dili girekomenda nga gamiton nga adunay labaw pa sa 4-6 nga mga domain, tungod kay ang pagtukod ug pagpadayon sa usa ka koneksyon usa ka mahal nga operasyon. <link rel= "dns-prefetch" /> gamay ra ang gigamit nga mga kapanguhaan, busa gamita kini kung kinahanglan.

Tan-awa ang mga detalye

Opsyonal nga tag. Ang browser dili kinahanglan nga sundon kini nga panudlo, mao nga dili kini mahimo nga resolusyon sa DNS, pananglitan, kung adunay daghang ingon nga mga tag sa panid o sa ubang mga kaso.

Unsa ang DNS. Ang matag server sa Internet adunay usa ka talagsaon nga IP address, nga morag 216.58.215.78. Ang ngalan sa site kasagarang gisulod sa address bar sa browser (pananglitan, google.com), ug ang DNS (Domain Name System) nga mga server motakdo niini sa IP address sa server (216.58.215.78).

Aron mahibal-an ang usa ka IP address, ang browser kinahanglan nga mangutana sa DNS server. Nagkinahanglan kini og 20−120 ms kon magkonektar sa bag-ong third-party nga domain.

Ang DNS gi-cache, bisan dili kaayo kasaligan. Ang ubang mga OS ug mga browser nag-cache sa mga pangutana sa DNS: kini makadaginot og oras sa balik-balik nga mga pangutana, apan ang pag-cache dili masaligan. Sa Linux kasagaran dili kini molihok. Ang Chrome adunay DNS cache, apan kini molungtad lamang sa usa ka minuto. Gi-cache sa Windows ang mga tubag sa DNS sulod sa lima ka adlaw.

prerender

<link rel= "prerender"> naghangyo sa browser nga i-download ang URL ug ipakita kini sa dili makita nga tab. Kung ang user mag-klik sa link, ang panid kinahanglan nga ipakita dayon. Kini mapuslanon kung sigurado ka nga ang user mobisita sa usa ka panid ug gusto nga mapadali ang pagpakita niini.

Bisan pa (o tungod sa) talagsaon nga pagka-epektibo niini nga tag, sa 2019 <link rel= "prerender"> dili maayo nga suportado sa dagkong mga browser. Tan-awa ang dugang mga detalye. sa ubos.

syntax

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

href nagpunting sa URL nga gusto nimong sugdan sa paghubad sa background.

Kanus-a gamiton

Kung sigurado ka nga ang tiggamit moadto sa usa ka panid. Kung ikaw adunay "tunnel" diin 70% sa mga bisita sa panid A moadto sa panid B, unya <link rel= "prerender"> sa panid A makatabang sa pagpakita sa panid B nga dali kaayo.

Ayaw paggamit sobra. Ang pre-rendering labi ka mahal sa mga termino sa bandwidth ug memorya. Ayaw gamita <link rel= "prerender"> alang sa labaw pa sa usa ka panid.

Tan-awa ang mga detalye

Opsyonal nga tag. Ang browser dili kinahanglan nga sundon kini nga panudlo ug mahimong ibaliwala kini, pananglitan, sa hinay nga koneksyon o kung adunay dili igo nga libre nga memorya.

Aron sa pagluwas sa memorya Ang Chrome wala magbuhat ug bug-os nga paghubadug preload lang ang NoState. Kini nagpasabot nga ang Chrome nagkarga sa panid ug sa tanan nga mga kahinguhaan niini, apan wala mag-render o mopatuman sa JavaScript.

Ang Firefox ug Safari dili mosuporta niini nga tag. Wala kini makalapas sa espesipikasyon, tungod kay ang mga browser wala kinahanglana nga sundon kini nga panudlo; pero sad gihapon. Bug sa pagpatuman Ang Firefox bukas sulod sa pito ka tuig. Adunay mga taho nga ang Safari wala usab nagsuporta niini nga tag.

Sumaryo

Gamita:

<link rel= "preload"> - kung kinahanglan nimo ang usa ka kapanguhaan sa pipila ka segundo
<link rel= "prefetch"> - kung kinahanglan nimo ang kapanguhaan sa sunod nga panid
<link rel= "preconnect"> - kung nahibal-an nimo nga kinahanglan nimo ang usa ka kapanguhaan sa dili madugay, apan wala pa nimo nahibal-an ang tibuuk nga URL niini
<link rel= "dns-prefetch"> - parehas, kung nahibal-an nimo nga kinahanglan nimo ang usa ka kapanguhaan sa dili madugay, apan wala pa nimo nahibal-an ang tibuuk nga URL niini (para sa mga tigulang nga browser)
<link rel= "prerender"> — kung sigurado ka nga ang mga tiggamit moadto sa usa ka piho nga panid, ug gusto nimo nga mapadali ang pagpakita niini

Source: www.habr.com

Preload, prefetch ug uban pang mga tag

preload

syntax

Kanus-a gamiton

Tan-awa ang mga detalye

prefetch

syntax

Kanus-a gamiton

Tan-awa ang mga detalye

preconnect

syntax

Kanus-a gamiton

Tan-awa ang mga detalye

dns-prefetch

syntax

Kanus-a gamiton

Tan-awa ang mga detalye

prerender

syntax

Kanus-a gamiton

Tan-awa ang mga detalye

Sumaryo

Idugang sa usa ka comment Отменить ответ