Mayroon maraming paraan upang mapabuti ang pagganap ng web. Ang isa sa mga ito ay ang pag-preload ng nilalaman na kakailanganin sa ibang pagkakataon. CSS pre-processing, full page pre-rendering o domain name resolution. Ginagawa namin ang lahat nang maaga, at pagkatapos ay agad na ipakita ang resulta! Mukhang cool.

Ang mas cool pa ay napakasimpleng ipinatupad nito. Limang tag bigyan ang browser ng utos upang magsagawa ng mga paunang aksyon:

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

Ipaliwanag natin nang maikli kung ano ang ginagawa nila at kung kailan gagamitin ang mga ito.

Tumalon sa: preload · prefetch · paunang kumonekta · dns-prefetch · prerender

preload

<link rel= "preload"> nagsasabi sa browser na i-load at i-cache ang isang mapagkukunan (tulad ng isang script o stylesheet) sa lalong madaling panahon. Ito ay kapaki-pakinabang kapag ang isang mapagkukunan ay kailangan ng ilang segundo pagkatapos mag-load ang pahina - at gusto mong pabilisin ang proseso.

Walang ginagawa ang browser sa mapagkukunan pagkatapos mag-load. Ang mga script ay hindi naisagawa, ang mga style sheet ay hindi inilalapat. Ang mapagkukunan ay naka-cache lamang at agad na ginawang magagamit kapag hiniling.

palaugnayan

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

href tumuturo sa mapagkukunan na gusto mong i-download.

as maaaring anumang bagay na maaaring ma-download sa browser:

style para sa mga style sheet,
script para sa mga script,
font para sa mga font,
fetch para sa mga mapagkukunan na na-load gamit fetch() o XMLHttpRequest,
tingnan ang buong listahan sa MDN.

Mahalagang tukuyin ang katangian as – tinutulungan nito ang browser na maayos na unahin at iiskedyul ang mga pag-download.

Kailan gagamitin

Gumamit ng preloading kapag kailangan ang mapagkukunan sa malapit na hinaharap. Halimbawa:

Mga hindi karaniwang font mula sa isang panlabas na file:
```

<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
По умолчанию comic-sans.woff2 magsisimulang mag-load lamang pagkatapos mag-download at mag-parse index.css. Upang maiwasan ang paghihintay nang matagal, maaari mong i-download ang font nang mas maaga gamit <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Kung ihihiwalay mo ang iyong mga istilo ayon sa diskarte Kritikal na CSS sa dalawang bahagi, kritikal (para sa agarang pag-render) at hindi kritikal:
```
<style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>
```
Sa diskarteng ito, magsisimula lang mag-load ang mga hindi kritikal na istilo kapag tumakbo ang JavaScript, na maaaring mangyari ilang segundo pagkatapos mag-render. Sa halip na maghintay ng paggamit ng JS <link rel= "preload">upang simulan ang pag-download nang mas maaga:
```
<style>
/* Inlined critical styles */
</style>

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

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

Huwag masyadong gumamit ng preloading. Kung na-load mo ang lahat nang sunud-sunod, hindi mapabilis ang site; sa kabaligtaran, mapipigilan nito ang browser mula sa pagpaplano ng trabaho nito nang tama.

Hindi dapat malito sa prefetching. Huwag gamitin <link rel= "preload">, kung hindi mo kailangan ang mapagkukunan kaagad pagkatapos ma-load ang pahina. Kung kailangan mo ito sa ibang pagkakataon, halimbawa para sa susunod na pahina, pagkatapos ay gamitin <link rel= "prefetch">.

Mga detalye

Ito ay isang kinakailangang tag na ipapatupad ng browser (kung sinusuportahan nito ito), hindi katulad ng lahat ng iba pang mga tag nauugnay sa preloading. Dapat i-download ng browser ang mapagkukunang tinukoy sa <link rel="preload">. Sa ibang mga kaso, maaari nitong balewalain ang paunang pagkarga, halimbawa kung ito ay tumatakbo sa mabagal na koneksyon.

Mga priyoridad. Karaniwang nagtatalaga ang mga browser ng iba't ibang priyoridad sa iba't ibang mapagkukunan (mga istilo, script, font, atbp.) upang mai-load muna ang pinakamahalagang mapagkukunan. Sa kasong ito, tinutukoy ng browser ang priyoridad ayon sa katangian as. Para sa Chrome browser maaari mong tingnan buong priority table.

prefetch

<link rel= "prefetch"> humihiling sa browser na mag-download at mag-cache ng mapagkukunan (tulad ng script o style sheet) sa background. Ang paglo-load ay nangyayari sa mababang priyoridad upang hindi ito makagambala sa mas mahahalagang mapagkukunan. Ito ay kapaki-pakinabang kung ang mapagkukunan ay kailangan sa susunod na pahina at gusto mong i-cache ito nang maaga.

Dito rin, walang ginagawa ang browser sa mapagkukunan pagkatapos mag-load. Ang mga script ay hindi naisagawa, ang mga style sheet ay hindi inilalapat. Ang mapagkukunan ay naka-cache lamang at agad na ginawang magagamit kapag hiniling.

palaugnayan

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

href tumuturo sa mapagkukunan na gusto mong i-download.

as maaaring anumang bagay na maaaring ma-download sa browser:

style para sa mga style sheet,
script para sa mga script,
font para sa mga font,
fetch para sa mga mapagkukunan na na-load gamit fetch() o XMLHttpRequest,
tingnan ang buong listahan sa MDN.

Mahalagang tukuyin ang katangian as - nakakatulong ito sa browser na wastong unahin at iiskedyul ang mga pag-download.

Kailan gagamitin

Upang mag-load ng mga mapagkukunan mula sa iba pang mga pahina, kung kailangan mo ng resource mula sa ibang page, at gusto mong i-preload ito para mapabilis ang pag-render ng page na iyon. Halimbawa:

Mayroon kang online na tindahan, at 40% ng mga user ang umaalis sa home page para sa page ng produkto. Gamitin <link rel= "prefetch">, naglo-load ng CSS at JS file upang mag-render ng mga page ng produkto.
Mayroon kang isang application ng isang pahina, at ang iba't ibang mga pahina ay naglo-load ng iba't ibang mga pakete. Kapag bumisita ang isang user sa isang page, ang mga package para sa lahat ng page na nali-link nito ay maaaring paunang i-load.

Malamang na ligtas na magagamit ang tag na ito sa anumang lawak.. Ang mga browser ay karaniwang nag-iskedyul ng prefetch na may pinakamababang priyoridad, kaya hindi ito nakakaabala sa sinuman. Tandaan lamang na nakakakonsumo ito ng trapiko ng user, na maaaring magastos.

Hindi para sa mga kagyat na kahilingan. Huwag gamitin <link rel= "prefetch">, kapag kailangan ang mapagkukunan sa loob ng ilang segundo. Sa kasong ito, gamitin <link rel= "preload">.

Mga detalye

Opsyonal na tag. Hindi kinakailangang sundin ng browser ang tagubiling ito; maaari itong balewalain, halimbawa, sa isang mabagal na koneksyon.

Priyoridad sa Chrome. Sa Chrome <link rel= "prefetch"> karaniwang isinasagawa nang may pinakamababang priyoridad (tingnan buong priority table), iyon ay, pagkatapos i-load ang lahat ng iba pa.

paunang kumonekta

<link rel= "preconnect"> humihiling sa browser na kumonekta sa domain nang maaga kapag gusto mong pabilisin ang pag-setup ng koneksyon sa hinaharap.

Ang browser ay dapat magtatag ng isang koneksyon kung ito ay kukuha ng anumang mga mapagkukunan mula sa isang bagong third-party na domain. Halimbawa, kung naglo-load ito ng Google Fonts, React fonts mula sa isang CDN, o humiling ng tugon ng JSON mula sa isang API server.

Ang pagtatatag ng bagong koneksyon ay karaniwang tumatagal ng ilang daang millisecond. Ginagawa ito nang isang beses, ngunit nangangailangan pa rin ng oras. Kung nakapagtatag ka ng isang koneksyon nang maaga, makakatipid ka ng oras at magda-download ng mga mapagkukunan mula sa domain na ito nang mas mabilis.

palaugnayan

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

href ay nagpapahiwatig ng domain name kung saan mo gustong tukuyin ang IP address. Maaaring tukuyin gamit ang isang prefix (https://domain.com) o wala nito (//domain.com).

Kailan gagamitin

Gamitin para sa mga domain na kakailanganin sa lalong madaling panahon upang mag-download ng mahalagang istilo, script o larawan mula doon, ngunit hindi mo pa alam ang mapagkukunang URL. Halimbawa:

Ang iyong aplikasyon ay naka-host sa my-app.com at gumagawa ng AJAX na mga kahilingan sa api.my-app.com: Hindi mo alam ang mga partikular na query nang maaga dahil dynamic na ginawa ang mga ito mula sa JS. Dito ay angkop na gumamit ng tag upang paunang kumonekta sa domain.
Ang iyong aplikasyon ay naka-host sa my-app.com at gumagamit ng Google Fonts. Dina-download ang mga ito sa dalawang hakbang: una, dina-download ang CSS file mula sa domain fonts.googleapis.com, pagkatapos ang file na ito ay humihiling ng mga font na may fonts.gstatic.com. Hindi mo malalaman kung aling mga partikular na font file ang nagmula fonts.gstatic.com kakailanganin mo hanggang sa mai-load mo ang CSS file, para makagawa lang kami ng paunang koneksyon.

Gamitin ang tag na ito upang pabilisin ng kaunti ang ilang script o istilo ng third party dahil sa paunang itinatag na koneksyon.

Huwag mag-overuse. Ang pagtatatag at pagpapanatili ng isang koneksyon ay isang mamahaling operasyon para sa parehong kliyente at server. Gamitin ang tag na ito para sa maximum na 4-6 na domain.

Mga detalye

Opsyonal na tag. Ang browser ay hindi kinakailangang sundin ang tagubiling ito at maaaring balewalain ito, halimbawa, kung maraming koneksyon ang naitatag na o sa ibang kaso.

Ano ang kasama sa proseso ng koneksyon?. Upang kumonekta sa bawat site, dapat gawin ng browser ang sumusunod:

Resolusyon ng DNS. Maghanap ng IP address ng server (216.58.215.78) para sa tinukoy na pangalan ng domain (google.com).
TCP handshake. Exchange packets (client → server → client) upang simulan ang isang TCP connection sa server.
TLS handshake (HTTPS sites lang). Dalawang round ng packet exchange (client → server → client → server → client) upang simulan ang isang secure na TLS session.

Tandaan: Pagpapabuti at pabilisin ng HTTP/3 ang mekanismo ng handshake, ngunit malayo pa ito.

dns-prefetch

<link rel= "dns-prefetch"> humihiling sa browser na magsagawa ng DNS resolution para sa domain nang maaga kung malapit ka nang kumonekta dito at gusto mong pabilisin ang paunang koneksyon.

Dapat matukoy ng browser ang IP address ng domain kung kukuha ito ng anumang mga mapagkukunan mula sa isang bagong third-party na domain. Halimbawa, ang paglo-load ng Google Fonts, React fonts mula sa isang CDN, o paghiling ng tugon ng JSON mula sa isang API server.

Para sa bawat bagong domain, karaniwang tumatagal ng humigit-kumulang 20-120 ms ang resolution ng DNS record. Nakakaapekto lang ito sa paglo-load ng unang mapagkukunan mula sa isang partikular na domain, ngunit nagpapakilala pa rin ng pagkaantala. Kung magsagawa kami ng DNS resolution nang maaga, makakatipid kami ng oras at mas mabilis na mai-load ang mapagkukunan.

palaugnayan

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

href ay nagpapahiwatig ng domain name kung saan mo gustong itakda ang IP address. Maaaring tukuyin gamit ang isang prefix (https://domain.com) o wala nito (//domain.com).

Kailan gagamitin

Gamitin para sa mga domain na kakailanganin sa lalong madaling panahon upang mag-download ng mga mapagkukunan mula doon na hindi alam ng browser nang maaga. Halimbawa:

Ang iyong aplikasyon ay naka-host sa my-app.com at gumagawa ng AJAX na mga kahilingan sa api.my-app.com: Hindi mo alam ang mga partikular na query nang maaga dahil dynamic na ginawa ang mga ito mula sa JS. Dito ay angkop na gumamit ng tag upang paunang kumonekta sa domain.
Ang iyong aplikasyon ay naka-host sa my-app.com, at gumagamit ng Google Fonts. Dina-download ang mga ito sa dalawang hakbang: una, dina-download ang CSS file mula sa domain fonts.googleapis.com, pagkatapos ang file na ito ay humihiling ng mga font na may fonts.gstatic.com. Hindi mo malalaman kung aling mga partikular na font file ang nagmula fonts.gstatic.com kakailanganin mo ito hanggang sa mai-load mo ang CSS file, para makagawa lang kami ng paunang koneksyon nang maaga.

Gamitin ang tag na ito upang pabilisin ng kaunti ang ilang script o istilo ng third party dahil sa paunang itinatag na koneksyon.

Pakitandaan ang mga katulad na katangian sa <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Karaniwang hindi makatuwirang gamitin ang mga ito nang magkasama para sa isang domain: <link rel= "preconnect"> kasama na <link rel= "dns-prefetch"/> at marami pang iba. Ito ay maaaring bigyang-katwiran sa dalawang kaso:

Gusto mo bang suportahan ang mga mas lumang browser?. <link rel= "dns-prefetch" /> suportado ng mula noong IE10 at Safari 5. <link rel= "preconnect"> ay suportado ng ilang sandali sa Chrome at Firefox, ngunit idinagdag lamang sa Safari sa 11.1 at hindi pa rin sinusuportahan sa IE/Edge. Kung kailangan mong suportahan ang mga browser na ito, gamitin <link rel= "dns-prefetch" /> bilang isang backup na opsyon para sa <link rel= "preconnect">.

Gusto mong pabilisin ang mga koneksyon sa higit sa 4-6 na domain. Tag <link rel= "preconnect"> Hindi inirerekomenda na gamitin sa higit sa 4-6 na mga domain, dahil ang pagtatatag at pagpapanatili ng isang koneksyon ay isang mamahaling operasyon. <link rel= "dns-prefetch" /> gumagamit ng mas kaunting mapagkukunan, kaya gamitin ito kung kinakailangan.

Mga detalye

Opsyonal na tag. Hindi kinakailangang sundin ng browser ang tagubiling ito, kaya maaaring hindi ito gumanap ng DNS resolution, halimbawa, kung maraming ganoong tag sa page o sa ibang kaso.

Ano ang DNS. Ang bawat server sa Internet ay may natatanging IP address, na mukhang 216.58.215.78. Ang pangalan ng site ay karaniwang inilalagay sa address bar ng browser (halimbawa, google.com), at DNS (Domain Name System) na mga server ay tumutugma dito sa IP address ng server (216.58.215.78).

Upang matukoy ang isang IP address, dapat i-query ng browser ang DNS server. Ito ay tumatagal ng 20−120 ms kapag kumokonekta sa isang bagong third-party na domain.

Naka-cache ang DNS, bagama't hindi masyadong mapagkakatiwalaan. Ang ilang mga OS at browser ay nag-cache ng mga query sa DNS: makakatipid ito ng oras sa mga paulit-ulit na query, ngunit hindi maaasahan ang pag-cache. Sa Linux ito ay karaniwang hindi gumagana sa lahat. Ang Chrome ay may DNS cache, ngunit ito ay tumatagal lamang ng isang minuto. Ini-cache ng Windows ang mga tugon ng DNS sa loob ng limang araw.

prerender

<link rel= "prerender"> humihiling sa browser na i-download ang URL at ipakita ito sa isang invisible na tab. Kapag nag-click ang user sa link, dapat na ipakita kaagad ang page. Ito ay kapaki-pakinabang kung sigurado kang bibisitahin ng user ang isang partikular na page at gustong pabilisin ang pagpapakita nito.

Sa kabila (o dahil sa) pambihirang bisa ng tag na ito, noong 2019 <link rel= "prerender"> hindi gaanong suportado sa mga pangunahing browser. Tingnan ang higit pang mga detalye. sa ibaba.

palaugnayan

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

href tumuturo sa URL na gusto mong simulan ang pag-render sa background.

Kailan gagamitin

Kapag talagang sigurado ka na ang gumagamit ay pupunta sa isang tiyak na pahina. Kung mayroon kang "tunnel" kung saan 70% ng mga bisita sa page A ang pumupunta sa page B, kung gayon <link rel= "prerender"> sa pahina A ay makakatulong upang maipakita ang pahina B nang napakabilis.

Huwag mag-overuse. Ang paunang pag-render ay napakamahal sa mga tuntunin ng bandwidth at memorya. Huwag gamitin <link rel= "prerender"> para sa higit sa isang pahina.

Mga detalye

Opsyonal na tag. Hindi kinakailangang sundin ng browser ang tagubiling ito at maaaring balewalain ito, halimbawa, sa mabagal na koneksyon o kapag walang sapat na libreng memorya.

Upang makatipid ng memorya Ang Chrome ay hindi gumagawa ng buong pag-renderAt preload lang ang NoState. Nangangahulugan ito na nilo-load ng Chrome ang page at lahat ng mapagkukunan nito, ngunit hindi nagre-render o nagpapatupad ng JavaScript.

Hindi sinusuportahan ng Firefox at Safari ang tag na ito. Hindi ito lumalabag sa detalye, dahil hindi kinakailangang sundin ng mga browser ang tagubiling ito; pero malungkot pa rin. Bug sa pagpapatupad Pitong taon nang bukas ang Firefox. May mga ulat na ang Safari ay hindi rin sumusuporta sa tag na ito.

Buod

Gamitin ang:

<link rel= "preload"> - kapag kailangan mo ng mapagkukunan sa loob ng ilang segundo
<link rel= "prefetch"> - kapag kailangan mo ng mapagkukunan sa susunod na pahina
<link rel= "preconnect"> - kapag alam mong kakailanganin mo ng mapagkukunan sa lalong madaling panahon, ngunit hindi mo pa alam ang buong URL nito
<link rel= "dns-prefetch"> - katulad din, kapag alam mong kakailanganin mo ng mapagkukunan sa lalong madaling panahon, ngunit hindi mo pa alam ang buong URL nito (para sa mga mas lumang browser)
<link rel= "prerender"> — kapag sigurado kang mapupunta ang mga user sa isang partikular na page, at gusto mong pabilisin ang pagpapakita nito

Pinagmulan: www.habr.com

Preload, prefetch at iba pang mga tag

preload

palaugnayan

Kailan gagamitin

Mga detalye

prefetch

palaugnayan

Kailan gagamitin

Mga detalye

paunang kumonekta

palaugnayan

Kailan gagamitin

Mga detalye

dns-prefetch

palaugnayan

Kailan gagamitin

Mga detalye

prerender

palaugnayan

Kailan gagamitin

Mga detalye

Buod

Magdagdag ng komento Kanselahin ang sumagot