ProHoster > Блог > Isakoso > Ti kojọpọ tẹlẹ, ṣaju ati awọn afi miiran

Ti kojọpọ tẹlẹ, ṣaju ati awọn afi miiran

Nibẹ ni o wa ọpọlọpọ awọn ọna lati mu iṣẹ wẹẹbu dara si. Ọkan ninu wọn jẹ iṣaju akoonu ti yoo nilo nigbamii. Ṣiṣe-ṣaaju CSS, ṣiṣe-ṣaaju oju-iwe ni kikun tabi ipinnu orukọ ìkápá. A ṣe ohun gbogbo ni ilosiwaju, lẹhinna ṣafihan abajade lẹsẹkẹsẹ! O dun.

Ohun ti o tutu paapaa ni pe o rọrun pupọ ni imuse. Awọn aami marun fun ẹrọ aṣawakiri ni aṣẹ lati ṣe awọn iṣe alakoko:

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


Jẹ ki a ṣe alaye ni ṣoki ohun ti wọn ṣe ati igba lati lo wọn.

Lọ si: ṣaja · prefetch · kọkọ sopọ mọ · dns-prefetch · ṣaaju

ṣaja

<link rel= "preload"> sọ fun ẹrọ aṣawakiri lati ṣaja ati kaṣe awọn orisun kan (gẹgẹbi iwe afọwọkọ tabi iwe aṣa) ni kete bi o ti ṣee. Eyi wulo nigbati o nilo orisun kan ni iṣẹju diẹ lẹhin awọn ẹru oju-iwe - ati pe o fẹ lati mu ilana naa yara.

Ẹrọ aṣawakiri ko ṣe nkankan pẹlu orisun lẹhin ikojọpọ. Awọn iwe afọwọkọ ko ṣiṣẹ, awọn iwe aṣa ko lo. Awọn oluşewadi ti wa ni nìkan cache ati ki o lẹsẹkẹsẹ ṣe wa lori ìbéèrè.

Syntax

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

href ntokasi si awọn oluşewadi ti o fẹ lati gba lati ayelujara.

as le jẹ ohunkohun ti o le ṣe igbasilẹ ni ẹrọ aṣawakiri:

  • style fun awọn aṣọ-ikele ara,
  • script fun awọn iwe afọwọkọ,
  • font fun awọn fonti,
  • fetch fun oro kojọpọ lilo fetch() tabi XMLHttpRequest,
  • wo ni kikun akojọ lori MDN.

O ṣe pataki lati pato awọn abuda as - Eyi ṣe iranlọwọ fun ẹrọ aṣawakiri lati ṣe pataki ni pataki ati ṣeto awọn igbasilẹ.

Nigbati lati lo

Lo iṣaju iṣaju nigbati o nilo orisun ni ọjọ iwaju ti o sunmọ pupọ. Fun apere:

  • Awọn nkọwe ti kii ṣe boṣewa lati faili ita kan: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Nipa aiyipada comic-sans.woff2 yoo bẹrẹ ikojọpọ nikan lẹhin igbasilẹ ati itupalẹ index.css. Lati yago fun iduro fun igba pipẹ, o le ṣe igbasilẹ fonti tẹlẹ ni lilo <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Ti o ba ya awọn aza rẹ ni ibamu si ọna naa Lominu ni CSS si awọn ẹya meji, pataki (fun sisọ lẹsẹkẹsẹ) ati ti kii ṣe pataki: 
    <style>
/* Inlined critical styles */
</style>

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

    Pẹlu ọna yii, awọn aza ti kii ṣe pataki yoo bẹrẹ ikojọpọ nikan nigbati JavaScript ba ṣiṣẹ, eyiti o le ṣẹlẹ ni iṣẹju diẹ lẹhin ṣiṣe. Dipo ti nduro JS lilo <link rel= "preload">lati bẹrẹ gbigba lati ayelujara tẹlẹ:

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

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

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

Maṣe lo iṣaju iṣaju. Ti o ba ṣajọ ohun gbogbo ni ọna kan, aaye naa kii yoo yara ni idan; ni ilodi si, yoo ṣe idiwọ aṣawakiri lati gbero iṣẹ rẹ ni deede.

Ko lati wa ni idamu pẹlu prefetching. Maṣe lo <link rel= "preload">, ti o ko ba nilo orisun lẹsẹkẹsẹ lẹhin awọn ẹru oju-iwe. Ti o ba nilo nigbamii, fun apẹẹrẹ fun oju-iwe ti o tẹle, lẹhinna lo <link rel= "prefetch">.

Awọn alaye

Eleyi jẹ a beere tag lati ṣiṣẹ nipasẹ ẹrọ aṣawakiri (ti o ba ṣe atilẹyin), ko dabi gbogbo awọn afi miiran jẹmọ si preloading. Ẹrọ aṣawakiri gbọdọ ṣe igbasilẹ orisun ti a sọ pato ninu <link rel="preload">. Ni awọn igba miiran o le foju iṣaju iṣaju, fun apẹẹrẹ ti o ba nṣiṣẹ lori asopọ ti o lọra.

Awọn ayo. Awọn aṣawakiri maa n fi awọn ohun pataki si oriṣiriṣi awọn orisun (awọn aza, awọn iwe afọwọkọ, awọn nkọwe, ati bẹbẹ lọ) lati le ṣaju awọn orisun pataki julọ akọkọ. Ni idi eyi, ẹrọ aṣawakiri ṣe ipinnu pataki nipasẹ abuda as. Fun aṣàwákiri Chrome o le wo full ayo tabili.

Ti kojọpọ tẹlẹ, ṣaju ati awọn afi miiran

prefetch

<link rel= "prefetch"> Beere ẹrọ aṣawakiri lati ṣe igbasilẹ ati kaṣe awọn orisun kan (gẹgẹbi iwe afọwọkọ tabi iwe ara) ni abẹlẹ. Ikojọpọ waye ni pataki kekere nitorina ko ṣe dabaru pẹlu awọn orisun pataki diẹ sii. Eyi wulo ti o ba nilo orisun naa ni oju-iwe ti o tẹle ati pe o fẹ lati kaṣe ni ilosiwaju.

Nibi, paapaa, ẹrọ aṣawakiri ko ṣe nkankan pẹlu orisun lẹhin ikojọpọ. Awọn iwe afọwọkọ ko ṣiṣẹ, awọn iwe aṣa ko lo. Awọn oluşewadi ti wa ni nìkan cache ati ki o lẹsẹkẹsẹ ṣe wa lori ìbéèrè.

Syntax

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

href ntokasi si awọn oluşewadi ti o fẹ lati gba lati ayelujara.

as le jẹ ohunkohun ti o le ṣe igbasilẹ ni ẹrọ aṣawakiri:

  • style fun awọn aṣọ-ikele ara,
  • script fun awọn iwe afọwọkọ,
  • font fun awọn fonti,
  • fetch fun oro kojọpọ lilo fetch() tabi XMLHttpRequest,
  • wo ni kikun akojọ lori MDN.

O ṣe pataki lati pato awọn abuda as - Eyi ṣe iranlọwọ fun ẹrọ aṣawakiri ni iṣaju deede ati ṣeto awọn igbasilẹ.

Nigbati lati lo

Lati kojọpọ awọn orisun lati awọn oju-iwe miiran, ti o ba nilo orisun kan lati oju-iwe miiran, ati pe o fẹ lati ṣaju rẹ tẹlẹ lati lẹhinna mu iṣẹ ṣiṣe ti oju-iwe yẹn yara. Fun apere:

  • O ni ile itaja ori ayelujara, ati 40% awọn olumulo lọ kuro ni oju-iwe ile fun oju-iwe ọja naa. Lo <link rel= "prefetch">, ikojọpọ CSS ati awọn faili JS lati ṣe awọn oju-iwe ọja.
  • O ni ohun elo oju-iwe kan ṣoṣo, ati awọn oju-iwe oriṣiriṣi gbe awọn akojọpọ oriṣiriṣi. Nigbati olumulo kan ba ṣabẹwo si oju-iwe kan, awọn akojọpọ fun gbogbo awọn oju-iwe ti o sopọ mọ le jẹ ti kojọpọ tẹlẹ.

O ṣeese pe aami yii le ṣee lo lailewu si eyikeyi iwọn.. Awọn aṣawakiri maa n ṣeto prefetch pẹlu pataki ti o kere julọ, nitorinaa ko ṣe wahala ẹnikẹni. O kan ni lokan pe o nlo ijabọ olumulo, eyiti o le jẹ owo.

Kii ṣe fun awọn ibeere iyara. Maṣe lo <link rel= "prefetch">, nigbati awọn oluşewadi nilo ni iṣẹju diẹ. Ni idi eyi, lo <link rel= "preload">.

Awọn alaye

Iyan tag. Aṣawari naa ko nilo lati tẹle ilana yii; o le foju rẹ, fun apẹẹrẹ, lori asopọ ti o lọra.

Ni ayo ni Chrome. Ninu Chrome <link rel= "prefetch"> nigbagbogbo ṣiṣẹ pẹlu ayo to kere julọ (wo full ayo tabili), iyẹn ni, lẹhin ikojọpọ ohun gbogbo miiran.

kọkọ sopọ mọ

<link rel= "preconnect"> Beere ẹrọ aṣawakiri lati sopọ si agbegbe ni ilosiwaju nigbati o ba fẹ lati mu iṣeto asopọ pọ si ni ọjọ iwaju.

Aṣàwákiri gbọdọ fi idi asopọ kan mulẹ ti o ba gba awọn orisun eyikeyi pada lati agbegbe ẹni-kẹta titun kan. Fun apẹẹrẹ, ti o ba kojọpọ Awọn Fonts Google, Awọn akọwe fesi lati CDN kan, tabi beere idahun JSON lati ọdọ olupin API kan.

Ṣiṣeto asopọ tuntun nigbagbogbo n gba to ọgọọgọrun milliseconds. O ti ṣe ni ẹẹkan, ṣugbọn tun gba akoko. Ti o ba ti fi idi asopọ kan mulẹ siwaju, iwọ yoo fi akoko pamọ ati ṣe igbasilẹ awọn orisun lati agbegbe yii ni iyara.

Syntax

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

href tọkasi orukọ ìkápá fun eyiti o fẹ lati pinnu adiresi IP naa. Le ṣe pato pẹlu ìpele kan (https://domain.com) tabi laisi rẹ (//domain.com).

Nigbati lati lo

Lo fun awọn ibugbe ti yoo nilo laipẹ lati ṣe igbasilẹ ara pataki, iwe afọwọkọ tabi aworan lati ibẹ, ṣugbọn iwọ ko mọ URL orisun sibẹsibẹ. Fun apere:

  • Ohun elo rẹ ti gbalejo lori my-app.com o si ṣe awọn ibeere AJAX lati api.my-app.com: Iwọ ko mọ awọn ibeere pataki ni ilosiwaju nitori wọn ṣe ni agbara lati JS. Nibi o jẹ deede lati lo aami kan lati ṣaju-isopọ si agbegbe naa.
  • Ohun elo rẹ ti gbalejo lori my-app.com o si nlo Google Fonts. Wọn ṣe igbasilẹ ni awọn igbesẹ meji: akọkọ, faili CSS ti wa ni igbasilẹ lati agbegbe fonts.googleapis.com, lẹhinna faili yii n beere awọn akọwe pẹlu fonts.gstatic.com. O ko le mọ iru awọn faili fonti kan pato wa lati fonts.gstatic.com iwọ yoo nilo titi ti o fi gbe faili CSS naa, nitorinaa a le ṣe asopọ alakoko nikan tẹlẹ.

Lo aami yii lati yara diẹ ninu iwe afọwọkọ ẹnikẹta tabi ara diẹ nitori asopọ ti a ti ṣeto tẹlẹ.

Maṣe lo pupọju. Ṣiṣeto ati mimu asopọ jẹ iṣẹ ṣiṣe gbowolori fun alabara mejeeji ati olupin naa. Lo tag yii fun o pọju awọn ibugbe 4-6.

Awọn alaye

Iyan tag. Aṣawari naa ko nilo lati tẹle ilana yii ati pe o le foju rẹ, fun apẹẹrẹ, ti ọpọlọpọ awọn asopọ ba ti fi idi mulẹ tẹlẹ tabi ni awọn ọran miiran.

Kini ilana asopọ pẹlu?. Lati sopọ si aaye kọọkan, ẹrọ aṣawakiri gbọdọ ṣe atẹle naa:

  • Ipinnu DNS. Wa adiresi IP olupin (216.58.215.78) fun orukọ ìkápá pàtó (google.com).
  • Ifọwọyi TCP. Awọn apo-iwe paṣipaarọ (alabara → olupin → alabara) lati pilẹṣẹ asopọ TCP kan pẹlu olupin naa.
  • Ifọwọyi TLS (awọn aaye HTTPS nikan). Awọn iyipo meji ti paṣipaarọ apo (alabara → olupin → alabara → olupin → alabara) lati pilẹṣẹ igba TLS to ni aabo.

Akiyesi: HTTP/3 yoo ni ilọsiwaju ati ki o yara sisẹ imudani, ṣugbọn o tun wa ni ọna pipẹ.

dns-prefetch

<link rel= "dns-prefetch"> Beere ẹrọ aṣawakiri lati ṣe ipinnu DNS fun agbegbe ni ilosiwaju ti o ba yoo sopọ si laipẹ ati pe o fẹ lati yara asopọ akọkọ.

Aṣàwákiri gbọdọ pinnu adiresi IP ti ìkápá naa ti yoo ba gba eyikeyi awọn orisun pada lati agbegbe ẹni-kẹta tuntun kan. Fun apẹẹrẹ, ikojọpọ Awọn Fonts Google, Awọn akọwe React lati CDN kan, tabi beere idahun JSON lati ọdọ olupin API kan.

Fun agbegbe tuntun kọọkan, ipinnu igbasilẹ DNS nigbagbogbo gba to 20-120 ms. Eyi nikan ni ipa lori ikojọpọ ti orisun akọkọ lati agbegbe ti a fun, ṣugbọn tun ṣafihan idaduro kan. Ti a ba ṣe ipinnu DNS ni ilosiwaju, a yoo fi akoko pamọ ati fifuye awọn orisun ni iyara.

Syntax

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

href tọkasi awọn ìkápá orukọ fun eyi ti o fẹ lati ṣeto awọn IP adirẹsi. Le ṣe pato pẹlu ìpele kan (https://domain.com) tabi laisi rẹ (//domain.com).

Nigbati lati lo

Lo fun awọn ibugbe ti yoo nilo laipẹ lati ṣe igbasilẹ awọn orisun lati ibẹ ti ẹrọ aṣawakiri ko mọ nipa ilosiwaju. Fun apere:

  • Ohun elo rẹ ti gbalejo lori my-app.com o si ṣe awọn ibeere AJAX lati api.my-app.com: Iwọ ko mọ awọn ibeere pataki ni ilosiwaju nitori wọn ṣe ni agbara lati JS. Nibi o jẹ deede lati lo aami kan lati ṣaju-isopọ si agbegbe naa.
  • Ohun elo rẹ ti gbalejo lori my-app.com, o si nlo Google Fonts. Wọn ṣe igbasilẹ ni awọn igbesẹ meji: akọkọ, faili CSS ti wa ni igbasilẹ lati agbegbe fonts.googleapis.com, lẹhinna faili yii n beere awọn akọwe pẹlu fonts.gstatic.com. O ko le mọ iru awọn faili fonti kan pato wa lati fonts.gstatic.com iwọ yoo nilo rẹ titi ti o fi gbe faili CSS naa, nitorinaa a le ṣe asopọ alakoko nikan ni ilosiwaju.

Lo aami yii lati yara diẹ ninu iwe afọwọkọ ẹnikẹta tabi ara diẹ nitori asopọ ti a ti ṣeto tẹlẹ.

Jọwọ ṣe akiyesi awọn abuda ti o jọra si <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Nigbagbogbo ko ni oye lati lo wọn papọ fun agbegbe kan: <link rel= "preconnect"> tẹlẹ pẹlu <link rel= "dns-prefetch"/> ati Elo siwaju sii. Eyi le ṣe idalare ni awọn ọran meji:

  • Ṣe o fẹ lati ṣe atilẹyin fun awọn aṣawakiri agbalagba bi?. <link rel= "dns-prefetch" /> ni atilẹyin nipasẹ niwon IE10 ati Safari 5. <link rel= "preconnect"> ni atilẹyin fun igba diẹ ni Chrome ati Firefox, ṣugbọn a ṣafikun Safari nikan ni 11.1 ati ko tun ṣe atilẹyin ni IE/Edge. Ti o ba nilo lati ṣe atilẹyin awọn aṣawakiri wọnyi, lo <link rel= "dns-prefetch" /> bi afẹyinti aṣayan fun <link rel= "preconnect">.
  • O fẹ lati yara awọn asopọ si diẹ sii ju awọn ibugbe 4-6. Tag <link rel= "preconnect"> Ko ṣe iṣeduro lati lo pẹlu diẹ ẹ sii ju awọn ibugbe 4-6, niwọn igba ti iṣeto ati mimu asopọ jẹ iṣẹ ṣiṣe gbowolori. <link rel= "dns-prefetch" /> n gba awọn orisun ti o dinku, nitorinaa lo ti o ba jẹ dandan.

Awọn alaye

Iyan tag. Aṣawari naa ko nilo lati tẹle itọnisọna yii, nitorinaa o le ma ṣe ipinnu DNS, fun apẹẹrẹ, ti ọpọlọpọ iru awọn afi bẹẹ ba wa ni oju-iwe tabi ni awọn ọran miiran.

Kini DNS. Olupin kọọkan lori Intanẹẹti ni adiresi IP alailẹgbẹ kan, eyiti o dabi 216.58.215.78. Orukọ aaye naa nigbagbogbo ni titẹ sii sinu ọpa adirẹsi ti ẹrọ aṣawakiri (fun apẹẹrẹ, google.com), ati awọn olupin DNS (Eto Orukọ Ibugbe) baamu rẹ pẹlu adiresi IP olupin naa (216.58.215.78).

Lati pinnu adiresi IP kan, ẹrọ aṣawakiri gbọdọ beere olupin DNS naa. Yoo gba 20-120 ms nigbati o ba n sopọ si agbegbe ẹni-kẹta titun kan.

DNS ti wa ni ipamọ, botilẹjẹpe kii ṣe igbẹkẹle pupọ. Diẹ ninu awọn OSes ati awọn aṣawakiri kaṣe awọn ibeere DNS: eyi yoo fi akoko pamọ sori awọn ibeere ti o leralera, ṣugbọn caching ko le gbarale. Lori Lainos o nigbagbogbo ko ṣiṣẹ ni gbogbo. Chrome ni kaṣe DNS, ṣugbọn o duro fun iṣẹju kan nikan. Windows caches DNS idahun fun marun ọjọ.

ṣaaju

<link rel= "prerender"> béèrè lọwọ ẹrọ aṣawakiri lati ṣe igbasilẹ URL naa ki o ṣafihan ni taabu alaihan. Nigbati olumulo ba tẹ ọna asopọ, oju-iwe yẹ ki o han lẹsẹkẹsẹ. Eyi wulo ti o ba ni idaniloju pe olumulo yoo ṣabẹwo si oju-iwe kan ati pe o fẹ lati yara ifihan rẹ.

Pelu (tabi nitori) imunadoko iyasọtọ ti aami yii, ni ọdun 2019 <link rel= "prerender"> ko dara ni atilẹyin ni pataki aṣàwákiri. Wo alaye diẹ sii. ni isalẹ.

Syntax

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

href tọka si URL ti o fẹ bẹrẹ ṣiṣe ni abẹlẹ.

Nigbati lati lo

Nigbati o ba ni idaniloju gaan pe olumulo yoo lọ si oju-iwe kan. Ti o ba ni “oju eefin” nipasẹ eyiti 70% awọn alejo si oju-iwe A lọ si oju-iwe B, lẹhinna <link rel= "prerender"> loju iwe A yoo ṣe iranlọwọ lati ṣafihan oju-iwe B ni iyara pupọ.

Maṣe lo pupọju. Ṣiṣe-ṣaaju jẹ gbowolori pupọ ni awọn ofin ti bandiwidi ati iranti. Maṣe lo <link rel= "prerender"> fun diẹ ẹ sii ju ọkan iwe.

Awọn alaye

Iyan tag. Aṣawari naa ko nilo lati tẹle ilana yii o le foju rẹ, fun apẹẹrẹ, lori asopọ ti o lọra tabi nigbati iranti ọfẹ ko to.

Lati fi iranti pamọ Chrome ko ṣe ni kikun, ati nikan ṣaju NoState. Eyi tumọ si pe Chrome gbe oju-iwe naa ati gbogbo awọn orisun rẹ, ṣugbọn ko ṣe tabi ṣiṣẹ JavaScript.

Firefox ati Safari ko ṣe atilẹyin tag yii rara. Eyi ko rú sipesifikesonu, nitori awọn aṣawakiri ko nilo lati tẹle ilana yii; sugbon si tun ìbànújẹ. Kokoro imuse Firefox ti ṣii fun ọdun meje. Awọn ijabọ wa ti Safari ko ni atilẹyin yi tag boya.

Akopọ

Lo:

  • <link rel= "preload"> - nigbati o ba nilo awọn oluşewadi ni iṣẹju diẹ
  • <link rel= "prefetch"> - nigbati o ba nilo awọn oluşewadi lori tókàn iwe
  • <link rel= "preconnect"> - nigbati o ba mọ pe iwọ yoo nilo orisun kan laipẹ, ṣugbọn iwọ ko iti mọ URL rẹ ni kikun
  • <link rel= "dns-prefetch"> Bakanna, nigbati o ba mọ pe iwọ yoo nilo orisun laipẹ, ṣugbọn iwọ ko tii mọ URL rẹ ni kikun (fun awọn aṣawakiri agbalagba)
  • <link rel= "prerender"> - nigbati o ba ni idaniloju pe awọn olumulo yoo lọ si oju-iwe kan, ati pe o fẹ lati yara ifihan rẹ

orisun: www.habr.com

Fi ọrọìwòye kun