Ho na le mekhoa e mengata ea ho ntlafatsa ts'ebetso ea webo. E 'ngoe ea tsona ke ho kenya litaba esale pele tse tla hlokahala hamorao. CSS pre-processing, leqephe le felletseng la tlhahiso ea pele kapa tharollo ea lebitso la domain. Re etsa ntho e 'ngoe le e' ngoe esale pele, ebe re bontša sephetho hang-hang! Ho utloahala ho pholile.

Ho khahlisang le ho feta ke hore e sebelisoa habonolo. Li-tag tse hlano fa sebatli taelo ea ho etsa liketso tsa pele:

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

A re hlalose ka bokhutšoanyane hore na li etsa eng le hore na li ka sebelisoa neng.

Tlolela ho: pele · esale pele · hokela pele · dns-prefetch · prerender

pele

<link rel= "preload"> e bolella sebatli ho kenya le ho boloka mohloli (joalo ka script kapa sheetsheet) kapele kamoo ho ka khonehang. Sena se na le thuso ha sesebelisoa se hlokahala metsotsoana e seng mekae ka mor'a hore leqephe le jale - 'me u batla ho potlakisa ts'ebetso.

Sebatli ha se etse letho ka sesebelisoa kamora ho kenya. Lingoliloeng ha li sebetse, maqephe a setaele ha a sebelisoe. Sesebelisoa se bolokiloe feela 'me hang-hang se fumaneha ha u se kopa.

hokahanngoang

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

href e supa mohloding oo o batlang ho o jarolla.

as e ka ba eng kapa eng e ka khoasolloang ho sebatli:

style bakeng sa maqephe a setaele,
script bakeng sa mangolo,
font bakeng sa mengolo,
fetch bakeng sa lisebelisoa tse kentsoeng ho sebelisoa fetch() kapa XMLHttpRequest,
bona lenane le felletseng ho MDN.

Ho bohlokoa ho totobatsa tšobotsi as - Sena se thusa sebatli ho beha pele hantle le ho hlophisa download.

U sebelisa neng

Sebelisa preloading ha mohlodi o hlokahala nakong e tlang e haufi haholo. Ka mohlala:

Mehala e sa tloaelehang ho tsoa faeleng ea kantle:
```

<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
ke default comic-sans.woff2 e tla qala ho kenya feela ka mor'a ho khoasolla le ho arola index.css. Ho qoba ho ema nako e telele hakana, o ka khoasolla fonte pele o sebelisa <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Haeba u arola mekhoa ea hau ho latela mokhoa oa ho atamela Bohlokoa CSS likarolo tse peli, tse bohlokoa (bakeng sa phetolelo ea hang-hang) le tse sa nyatseheng:
```
<style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>
```
Ka mokhoa ona, mekhoa e seng ea bohlokoa e tla qala ho kenya feela ha JavaScript e sebetsa, e ka etsahalang metsotsoana e seng mekae ka mor'a hore e fane. Sebakeng sa ho emela tšebeliso ea JS <link rel= "preload">ho qala ho khoasolla pejana:
```
<style>
/* Inlined critical styles */
</style>

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

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

U se ke ua sebelisa ho tlatsa ho feta tekano. Haeba u kenya ntho e 'ngoe le e' ngoe ka tatellano, sebaka sa marang-rang se ke ke sa potlakisa ka boselamose, ho fapana le hoo, se tla thibela sebatli ho rera mosebetsi oa sona ka nepo.

Ha ea lokela ho ferekanngoa le prefetching. U se ke ua sebelisa <link rel= "preload">, haeba u sa hloke sesebelisoa hang ka mor'a hore leqephe le jale. Haeba u e hloka hamorao, mohlala bakeng sa leqephe le latelang, joale sebelisa <link rel= "prefetch">.

Sheba lintlha

Ena ke tag e hlokahalang ho etsoa ke sebatli (haeba se e tšehetsa), ho fapana le li-tag tse ling kaofela e amanang le ho kenya pele. Sebatli se tlameha ho khoasolla sesebelisoa se boletsoeng ho <link rel="preload">. Maemong a mang, e ka iphapanyetsa ho kenya, ho etsa mohlala, haeba e sebelisa khokahano e butle.

Lintho tse tlang pele. Hangata libatli li fana ka lintho tse tlang pele tse fapaneng ho lisebelisoa tse fapaneng (mekhoa, mengolo, lifonti, joalo-joalo) molemong oa ho kenya lisebelisoa tsa bohlokoa pele. Tabeng ena, sebatli se etsa qeto ea hore na ke lintho life tse tlang pele ka tšobotsi as. Bakeng sa sebatli sa Chrome u ka sheba tafole e feletseng ea bohlokoa.

esale pele

<link rel= "prefetch"> e kopa sebatli ho khoasolla le ho boloka mohlodi (jwalo ka mongolo kapa leqephe la setaele) bokamoraong. Ho kenya lintho ka mokhoa o tlase, kahoo ha ho kena-kenane le lisebelisoa tsa bohlokoa. Sena se na le thuso haeba sesebelisoa se hlokahala leqepheng le latelang 'me u batla ho se boloka esale pele.

Mona, hape, sebatli ha se etse letho ka sesebelisoa ka mor'a ho kenya. Lingoliloeng ha li sebetse, maqephe a setaele ha a sebelisoe. Sesebelisoa se bolokiloe feela 'me hang-hang se fumaneha ha u se kopa.

hokahanngoang

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

href e supa mohloding oo o batlang ho o jarolla.

as e ka ba eng kapa eng e ka khoasolloang ho sebatli:

style bakeng sa maqephe a setaele,
script bakeng sa mangolo,
font bakeng sa mengolo,
fetch bakeng sa lisebelisoa tse kentsoeng ho sebelisoa fetch() kapa XMLHttpRequest,
bona lenane le felletseng ho MDN.

Ho bohlokoa ho totobatsa tšobotsi as - Sena se thusa sebatli ho beha pele ka nepo le ho hlophisa download.

U sebelisa neng

Ho kenya lisebelisoa maqepheng a mang, haeba u hloka mohloli o tsoang leqepheng le leng, 'me u batla ho o kenya pele ho potlakisa phetolelo ea leqephe leo. Ka mohlala:

U na le lebenkele la marang-rang, 'me 40% ea basebelisi ba tlohela leqephe la lehae bakeng sa leqephe la sehlahisoa. Sebelisa <link rel= "prefetch">, ho kenya lifaele tsa CSS le JS ho fana ka maqephe a sehlahisoa.
U na le ts'ebeliso ea leqephe le le leng, 'me maqephe a fapaneng a kenya liphutheloana tse fapaneng. Ha mosebelisi a etela leqephe, liphutheloana tsa maqephe ohle ao e li hokahantseng le tsona li ka kenngoa esale pele.

Ho ka etsahala hore tag ena e ka sebelisoa ka mokhoa o sireletsehileng ho isa tekanyong efe kapa efe.. Hangata libatli li hlophisa ho lata esale pele ka maemo a tlase, kahoo ha li tšoenyehe. Hopola feela hore e ja sephethephethe sa basebelisi, se ka bitsang chelete.

Eseng bakeng sa likopo tse potlakileng. U se ke ua sebelisa <link rel= "prefetch">, ha sesebelisoa se hlokahala ka metsotsoana e seng mekae. Tabeng ena, sebelisa <link rel= "preload">.

Sheba lintlha

Theke ea boikhethelo. Sebatli ha se hlokahale hore se latele taelo ena; se ka iphapanyetsa eona, mohlala, ha e hokahane butle.

E tlang pele ho Chrome. Ka Chrome <link rel= "prefetch"> hangata e etsoa ka maemo a tlang pele (bona tafole e feletseng ea bohlokoa), ke hore, ka mor'a ho kenya tsohle tse ling.

hokela pele

<link rel= "preconnect"> e kopa sebatli ho hokela domain name esale pele ha o batla ho potlakisa ho seta khokahano nakong e tlang.

Sebatli se tlameha ho theha khokahanyo haeba se fumana lisebelisoa ho tsoa sebakeng se secha sa motho oa boraro. Mohlala, haeba e jarisa Google Fonts, React fonts ho tsoa ho CDN, kapa e kopa karabo ea JSON ho tsoa ho seva sa API.

Ho theha khokahano e ncha hangata ho nka makholo a 'maloa a milliseconds. E etsoa hang, empa e ntse e nka nako. Haeba u thehile khokahano esale pele, u tla boloka nako le ho jarolla lisebelisoa ho tsoa sebakeng sena kapele.

hokahanngoang

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

href e bonts'a domain name eo u batlang ho tseba hore na aterese ea IP ke efe. E ka hlalosoa ka sehlongwapele (https://domain.com) kapa ntle le eona (//domain.com).

U sebelisa neng

Sebelisa bakeng sa libaka tse tla hlokahala haufinyane ho khoasolla setaele sa bohlokoa, mongolo kapa setšoantšo ho tsoa moo, empa ha u e-so tsebe URL ea lisebelisoa. Ka mohlala:

Kopo ea hau e laoloa ke my-app.com le ho etsa likopo tsa AJAX ho api.my-app.com: Ha u tsebe lipotso tse tobileng esale pele hobane li entsoe ka matla ho tsoa ho JS. Mona ho loketse haholo ho sebelisa tag ho hokahanya le domain.
Kopo ea hau e laoloa ke my-app.com 'me e sebelisa Google Fonts. Li kopitsoa ka mehato e 'meli: ea pele, faele ea CSS e jarolloa ho tsoa sebakeng sa marang-rang fonts.googleapis.com, ebe faele ena e kopa lifonte ka fonts.gstatic.com. U ke ke ua tseba hore na lifaele tsa fonte tse khethehileng li tsoa hokae fonts.gstatic.com o tla hloka ho fihlela o kenya faele ea CSS, kahoo re ka etsa khokahano ea pele pele.

Sebelisa theke ena ho potlakisa mongolo oa motho oa boraro kapa setaele hanyane ka lebaka la khokahano e seng e thehilwe.

Se ke oa sebelisa hampe. Ho theha le ho boloka khokahano ke ts'ebetso e theko e boima bakeng sa moreki le seva. Sebelisa tag ena bakeng sa boholo ba libaka tse 4-6.

Sheba lintlha

Theke ea boikhethelo. Sebatli ha se hlokehe ho latela taelo ena mme e ka iphapanyetsa eona, mohlala, haeba likhokahano tse ngata li se li thehiloe kapa maemong a mang.

Mokhoa oa ho hokahanya o kenyelletsa eng?. Ho hokela saeteng ka 'ngoe, sebatli se tlameha ho etsa se latelang:

Qeto ea DNS. Fumana aterese ea IP ea seva (216.58.215.78) bakeng sa lebitso la domain le boletsoeng (google.com).
TCP ho ts'oarana ka letsoho. Phapanyetsana lipakete (moreki → seva → moreki) ho qala khokahano ea TCP le seva.
TLS handshake (libaka tsa HTTPS feela). Mekhahlelo e 'meli ea phapanyetsano ea liphutheloana (moreki → seva → moreki → seva → moreki) ho qala seboka se sireletsehileng sa TLS.

Tlhokomeliso: HTTP/3 e tla ntlafatsa le ho potlakisa mochini oa ho ts'oarana ka matsoho, empa o sa le hole haholo.

dns-prefetch

<link rel= "dns-prefetch"> e kopa sebatli ho etsa qeto ea DNS bakeng sa domain pele haeba o tla hokela ho eona haufinyane mme o batla ho potlakisa khokahano ea pele.

Sebatli se tlameha ho fumana aterese ea IP ea domain hore na se tla fumana lisebelisoa life kapa life ho tsoa sebakeng se secha sa motho oa boraro. Mohlala, ho kenya Google Fonts, React fonts ho tsoa ho CDN, kapa ho kopa karabo ea JSON ho tsoa ho seva sa API.

Bakeng sa sebaka se seng le se seng se secha, qeto ea rekoto ea DNS hangata e nka hoo e ka bang 20-120 ms. Sena se ama feela ho kengoa ha sesebelisoa sa pele ho tsoa sebakeng se fanoeng, empa se ntse se hlahisa tieho. Haeba re etsa qeto ea DNS esale pele, re tla boloka nako le ho kenya sesebelisoa kapele.

hokahanngoang

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

href e bonts'a lebitso la domain leo u batlang ho seta aterese ea IP bakeng sa lona. E ka hlalosoa ka sehlongwapele (https://domain.com) kapa ntle le eona (//domain.com).

U sebelisa neng

Sebelisa bakeng sa libaka tse tla hlokahala haufinyane ho jarolla lisebelisoa ho tloha moo tseo sebatli se sa tsebeng esale pele. Ka mohlala:

Kopo ea hau e laoloa ke my-app.com le ho etsa likopo tsa AJAX ho api.my-app.com: Ha u tsebe lipotso tse tobileng esale pele hobane li entsoe ka matla ho tsoa ho JS. Mona ho loketse haholo ho sebelisa tag ho hokahanya le domain.
Kopo ea hau e laoloa ke my-app.com, 'me e sebelisa Google Fonts. Li kopitsoa ka mehato e 'meli: ea pele, faele ea CSS e jarolloa ho tsoa sebakeng sa marang-rang fonts.googleapis.com, ebe faele ena e kopa lifonte ka fonts.gstatic.com. U ke ke ua tseba hore na lifaele tsa fonte tse khethehileng li tsoa hokae fonts.gstatic.com o tla e hloka ho fihlela o kenya faele ea CSS, kahoo re ka etsa khokahano ea pele esale pele.

Sebelisa theke ena ho potlakisa mongolo oa motho oa boraro kapa setaele hanyane ka lebaka la khokahano e seng e thehilwe.

Ka kopo hlokomela litšobotsi tse tšoanang le <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Hangata ha ho utloahale ho li sebelisa hammoho sebakeng se le seng: <link rel= "preconnect"> e se e kenyelletsa <link rel= "dns-prefetch"/> le tse ling tse ngata. Sena se ka lokafatsoa maemong a mabeli:

Na u batla ho tšehetsa libatli tsa khale?. <link rel= "dns-prefetch" /> tšehetsoa ke ho tloha ho IE10 le Safari 5. <link rel= "preconnect"> e ne e tšehetsoa ka nakoana ho Chrome le Firefox, empa e ile ea eketsoa feela ho Safari ka 11.1 le e ntse e sa tšehetsoe ho IE/Edge. Haeba o hloka ho ts'ehetsa libatli tsena, sebelisa <link rel= "dns-prefetch" /> e le khetho ea bekapo bakeng sa <link rel= "preconnect">.

U batla ho potlakisa likhokahano ho libaka tse fetang 4-6. Tag <link rel= "preconnect"> Ha e khothalletsoe ho e sebelisa le libaka tse fetang 4-6, kaha ho theha le ho boloka khokahano ke ts'ebetso e theko e boima. <link rel= "dns-prefetch" /> e sebelisa lisebelisoa tse fokolang, kahoo e sebelise ha ho hlokahala.

Sheba lintlha

Theke ea boikhethelo. Sebatli ha se hlokehe ho latela taelo ena, ka hona se kanna sa se etse qeto ea DNS, mohlala, haeba ho na le li-tag tse joalo leqepheng kapa maemong a mang.

DNS ke eng. Seva e 'ngoe le e' ngoe Inthaneteng e na le aterese e ikhethang ea IP, e shebahalang joaloka 216.58.215.78. Hangata lebitso la sebaka sa marang-rang le kenngoa kahare ea aterese ea sebatli (mohlala, google.com), le li-server tsa DNS (Domain Name System) li e bapisa le aterese ea IP ea seva (216.58.215.78).

Ho fumana aterese ea IP, sebatli se tlameha ho botsa seva sa DNS. Ho nka 20−120 ms ha o hokela sebakeng se secha sa motho oa boraro.

DNS e bolokiloe, leha e sa tšepahale haholo. Li-OS tse ling le li-browser li boloka lipotso tsa DNS: sena se tla boloka nako lipotsong tse pheta-phetoang, empa caching e ke ke ea tšeptjoa. Ho Linux hangata ha e sebetse ho hang. Chrome e na le cache ea DNS, empa e nka motsotso feela. Windows e boloka likarabo tsa DNS ka matsatsi a mahlano.

prerender

<link rel= "prerender"> e kopa sebatli ho khoasolla URL le ho e hlahisa ho tab e sa bonahaleng. Ha mosebelisi a tobetsa sehokelo, leqephe le lokela ho hlahisoa hanghang. Sena se na le thuso haeba o na le bonnete ba hore mosebelisi o tla etela leqephe le itseng mme a batla ho potlakisa ponts'o ea lona.

Leha (kapa ka lebaka la) katleho e ikhethang ea tag ena, ka 2019 <link rel= "prerender"> e sa tšehetsoeng hantle ho libatli tse kholo. Sheba lintlha tse ling. ka tlase.

hokahanngoang

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

href e supa URL eo u batlang ho qala ho e fana ka morao.

U sebelisa neng

Ha o na le bonnete ba hore mosebelisi o tla ea leqepheng le itseng. Haeba u na le "tunnel" eo ka eona 70% ea baeti ba kenang leqepheng la A e eang leqepheng la B, joale <link rel= "prerender"> leqepheng la A ho tla thusa ho hlahisa leqephe la B kapele haholo.

Se ke oa sebelisa hampe. Ho fana ka pele ho theko e boima haholo mabapi le bandwidth le memori. U se ke ua sebelisa <link rel= "prerender"> bakeng sa maqephe a fetang bonngoe.

Sheba lintlha

Theke ea boikhethelo. Sebatli ha se hlokehe hore se latele taelo ena, 'me se ka iphapanyetsa eona, ho etsa mohlala, ka khokahanyo e liehang kapa ha ho na le memori e sa lekaneng ea mahala.

Ho boloka memori Chrome ha e fane ka tlhahiso e felletsengle kenya feela NoState pele. Sena se bolela hore Chrome e kenya leqephe le lisebelisoa tsohle tsa eona, empa ha e fane kapa e sebelisa JavaScript.

Firefox le Safari ha li tšehetse tag ena ho hang. Sena ha se tlole se boletsoeng, kaha libatli ha li hloke ho latela taelo ena; empa ke ntse ke hloname. Phoso ea ts'ebetsong Firefox e butsoe lilemo tse supileng. Ho na le litlaleho tsa hore Safari le eona ha e tšehetse tag ena.

Kakaretso

Sebelisa:

<link rel= "preload"> - ha o hloka sesebelisoa ka metsotsoana e seng mekae
<link rel= "prefetch"> - ha o hloka sesebelisoa leqepheng le latelang
<link rel= "preconnect"> - ha o tseba hore o tla hloka sesebelisoa haufinyane, empa ha o so tsebe URL e felletseng
<link rel= "dns-prefetch"> - ka mokhoa o ts'oanang, ha u tseba hore u tla hloka sesebelisoa haufinyane, empa ha u e-so tsebe URL ea eona e felletseng (bakeng sa libatli tsa khale)
<link rel= "prerender"> - ha o na le bonnete ba hore basebelisi ba tla ea leqepheng le itseng, 'me u batla ho potlakisa pontšo ea eona

Source: www.habr.com

Kenya esale pele, kenya le li-tag tse ling

pele

hokahanngoang

U sebelisa neng

Sheba lintlha

esale pele

hokahanngoang

U sebelisa neng

Sheba lintlha

hokela pele

hokahanngoang

U sebelisa neng

Sheba lintlha

dns-prefetch

hokahanngoang

U sebelisa neng

Sheba lintlha

prerender

hokahanngoang

U sebelisa neng

Sheba lintlha

Kakaretso

Eketsa ka tlhaloso hlakola karabo