ProHoster > blog > Amministrazzjoni > Preload, prefetch u tikketti oħra

Preload, prefetch u tikketti oħra

Hemm ħafna modi kif ittejjeb il-prestazzjoni tal-web. Waħda minnhom hija t-tagħbija minn qabel tal-kontenut li se jkun meħtieġ aktar tard. Ipproċessar minn qabel tas-CSS, paġna sħiħa minn qabel jew riżoluzzjoni tal-isem tad-dominju. Nagħmlu kollox bil-quddiem, u mbagħad istantanjament nuru r-riżultat! Ħsejjes jibred.

Dak li huwa saħansitra aktar frisk huwa li huwa implimentat b'mod sempliċi ħafna. Ħames tikketti agħti kmand lill-browser biex iwettaq azzjonijiet preliminari:

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


Ejja nispjegaw fil-qosor x'jagħmlu u meta jużawhom.

Aqbeż għal: preload · iġġib minn qabel · preconnect · dns-prefetch · prerender

preload

<link rel= "preload"> jgħid lill-browser biex jgħabbi u jaħkem riżorsa (bħal script jew stylesheet) kemm jista' jkun malajr. Dan huwa utli meta riżorsa tkun meħtieġa ftit sekondi wara li titgħabba l-paġna - u trid tħaffef il-proċess.

Il-browser ma jagħmel xejn bir-riżors wara t-tagħbija. L-iskripts mhumiex esegwiti, il-folji tal-istil mhumiex applikati. Ir-riżors huwa sempliċiment cache u immedjatament disponibbli fuq talba.

sintassi

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

href jindika r-riżors li trid tniżżel.

as jista' jkun xi ħaġa li tista' titniżżel fil-browser:

  • style għall-folji tal-istil,
  • script għall-iskripts,
  • font għal fonts,
  • fetch għar-riżorsi mgħobbija bl-użu fetch() jew XMLHttpRequest,
  • ara l-lista sħiħa fuq MDN.

Huwa importanti li jiġi speċifikat l-attribut as – dan jgħin lill-browser jipprijoritizza u jiskeda t-tniżżil kif suppost.

Meta tuża

Uża l-preloading meta r-riżors ikun meħtieġ fil-futur qrib ħafna. Pereżempju:

  • Fonts mhux standard minn fajl estern: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Permezz ta 'default comic-sans.woff2 se tibda t-tagħbija biss wara li tniżżel u teżamina index.css. Biex tevita li tistenna daqshekk, tista 'tniżżel it-tipa aktar kmieni bl-użu <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Jekk tissepara l-istili tiegħek skont l-approċċ CSS Kritika f'żewġ partijiet, kritiċi (għall-għoti immedjat) u mhux kritiċi: 
    <style>
/* Inlined critical styles */
</style>

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

    B'dan l-approċċ, stili mhux kritiċi se jibdew jitgħabbew biss meta jħaddem JavaScript, li jista 'jiġri ftit sekondi wara l-għoti. Minflok stennija JS użu <link rel= "preload">biex tibda tniżżel qabel:

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

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

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

Tużax iżżejjed il-preloading. Jekk tagħbija kollox wara xulxin, is-sit mhux se jħaffef b'mod maġiku; għall-kuntrarju, se jipprevjeni lill-browser milli jippjana x-xogħol tiegħu b'mod korrett.

M'għandux jiġi konfuż ma 'prefetching. Tużax <link rel= "preload">, jekk m'għandekx bżonn ir-riżors immedjatament wara li titgħabba l-paġna. Jekk ikollok bżonnha aktar tard, pereżempju għall-paġna li jmiss, imbagħad uża <link rel= "prefetch">.

Dettalji

Din hija tikketta meħtieġa biex jiġi esegwit mill-browser (jekk isostnih), b'differenza mit-tags l-oħra kollha relatati mat-tagħbija minn qabel. Il-browser irid tniżżel ir-riżors speċifikat fi <link rel="preload">. F'każijiet oħra tista 'tinjora t-tagħbija minn qabel, pereżempju jekk tkun qed taħdem fuq konnessjoni bil-mod.

Prijoritajiet. Il-browsers normalment jassenjaw prijoritajiet differenti għal riżorsi differenti (stili, skripts, fonts, eċċ.) sabiex jillowdja l-aktar riżorsi importanti l-ewwel. F'dan il-każ, il-browser jiddetermina prijorità skond l-attribut as. Għall-browser Chrome tista' tħares lejn tabella ta' prijorità sħiħa.

Preload, prefetch u tikketti oħra

iġġib minn qabel

<link rel= "prefetch"> jitlob lill-browser biex iniżżel u jżomm fil-cache riżorsa (bħal kitba jew folja ta' stil) fl-isfond. It-tagħbija ssir bi prijorità baxxa u għalhekk ma tfixkilx riżorsi aktar importanti. Dan huwa utli jekk ir-riżorsa tkun meħtieġa fil-paġna li jmiss u trid taqbadha fil-cache minn qabel.

Hawnhekk ukoll, il-browser ma jagħmel xejn bir-riżors wara t-tagħbija. L-iskripts mhumiex esegwiti, il-folji tal-istil mhumiex applikati. Ir-riżors huwa sempliċiment cache u immedjatament disponibbli fuq talba.

sintassi

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

href jindika r-riżors li trid tniżżel.

as jista' jkun xi ħaġa li tista' titniżżel fil-browser:

  • style għall-folji tal-istil,
  • script għall-iskripts,
  • font għal fonts,
  • fetch għar-riżorsi mgħobbija bl-użu fetch() jew XMLHttpRequest,
  • ara l-lista sħiħa fuq MDN.

Huwa importanti li jiġi speċifikat l-attribut as - dan jgħin lill-browser jipprijoritizza u jiskeda t-tniżżil b'mod korrett.

Meta tuża

Biex tagħbija riżorsi minn paġni oħra, jekk għandek bżonn riżors minn paġna oħra, u trid tgħabbiha minn qabel biex imbagħad tħaffef ir-rendi ta' dik il-paġna. Pereżempju:

  • Għandek ħanut online, u 40% tal-utenti jħallu l-home page għall-paġna tal-prodott. Użu <link rel= "prefetch">, tagħbija fajls CSS u JS biex tirrendi paġni tal-prodott.
  • Għandek applikazzjoni ta' paġna waħda, u paġni differenti jgħabbu pakketti differenti. Meta utent iżur paġna, il-pakketti għall-paġni kollha li jgħaqqad magħhom jistgħu jitgħabbew minn qabel.

Huwa probabbli li din it-tikketta tista 'tintuża b'mod sikur fi kwalunkwe punt.. Il-browsers normalment jippjanaw prefetch bl-inqas prijorità, u għalhekk ma jolqot lil ħadd. Żomm f'moħħok li tikkonsma traffiku tal-utenti, li jista 'jiswa l-flus.

Mhux għal talbiet urġenti. Tużax <link rel= "prefetch">, meta r-riżors ikun meħtieġ fi ftit sekondi. F'dan il-każ, uża <link rel= "preload">.

Dettalji

Tikketta fakultattiva. Il-browser mhuwiex meħtieġ li jsegwi din l-istruzzjoni; jista' jinjoraha, pereżempju, fuq konnessjoni bil-mod.

Prijorità fil-Chrome. Fi Chrome <link rel= "prefetch"> normalment esegwiti bi prijorità minima (ara tabella ta' prijorità sħiħa), jiġifieri, wara li tgħabbi kull ħaġa oħra.

preconnect

<link rel= "preconnect"> jitlob lill-browser biex jgħaqqad mad-dominju bil-quddiem meta trid tħaffef is-setup tal-konnessjoni fil-futur.

Il-browser għandu jistabbilixxi konnessjoni jekk jirkupra xi riżorsi minn dominju ġdid ta 'parti terza. Pereżempju, jekk jgħabbi Google Fonts, React fonts minn CDN, jew titlob rispons JSON minn server API.

L-istabbiliment ta 'konnessjoni ġdida normalment jieħu ftit mijiet ta' millisekondi. Dan isir darba, iżda xorta jieħu ż-żmien. Jekk stabbilejt konnessjoni minn qabel, se tiffranka l-ħin u tniżżel ir-riżorsi minn dan id-dominju aktar malajr.

sintassi

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

href jindika l-isem tad-dominju li għalih trid tiddetermina l-indirizz IP. Jista' jiġi speċifikat bi prefiss (https://domain.com) jew mingħajrha (//domain.com).

Meta tuża

Uża għal oqsma li se jkunu meħtieġa dalwaqt biex tniżżel stil, skript jew immaġni importanti minn hemm, imma għadek ma tafx il-URL tar-riżorsi. Pereżempju:

  • L-applikazzjoni tiegħek hija ospitata fuq my-app.com u jagħmel talbiet AJAX biex api.my-app.com: Ma tafx il-mistoqsijiet speċifiċi bil-quddiem għaliex huma magħmula b'mod dinamiku minn JS. Hawnhekk huwa pjuttost xieraq li tuża tikketta biex tikkonnettja minn qabel mad-dominju.
  • L-applikazzjoni tiegħek hija ospitata fuq my-app.com u juża Google Fonts. Dawn jitniżżlu f'żewġ passi: l-ewwel, il-fajl CSS jitniżżel mid-dominju fonts.googleapis.com, allura dan il-fajl jitlob fonts ma fonts.gstatic.com. Ma tistax tkun taf minn liema fajls tat-tipa speċifiċi huma fonts.gstatic.com ser ikollok bżonn sakemm tagħbija l-fajl CSS, sabiex inkunu nistgħu nagħmlu biss konnessjoni preliminari minn qabel.

Uża din it-tikketta biex tħaffef xi skript jew stil ta 'parti terza xi ftit minħabba konnessjoni stabbilita minn qabel.

Tużax iżżejjed. L-istabbiliment u ż-żamma ta 'konnessjoni hija operazzjoni għalja kemm għall-klijent kif ukoll għas-server. Uża din it-tikketta għal massimu ta' 4-6 dominji.

Dettalji

Tikketta fakultattiva. Il-browser mhuwiex meħtieġ li jsegwi din l-istruzzjoni u jista 'jinjoraha, pereżempju, jekk diġà ġew stabbiliti ħafna konnessjonijiet jew f'xi każ ieħor.

X'jinkludi l-proċess ta' konnessjoni?. Biex tikkonnettja ma' kull sit, il-browser irid jagħmel dan li ġej:

  • Riżoluzzjoni DNS. Sib l-indirizz IP tas-server (216.58.215.78) għall-isem tad-dominju speċifikat (google.com).
  • TCP handshake. Skambju ta' pakketti (klijent → server → klijent) biex tibda konnessjoni TCP mas-server.
  • TLS handshake (siti HTTPS biss). Żewġ rawnds ta 'skambju ta' pakketti (klijent → server → klijent → server → klijent) biex tibda sessjoni TLS sigura.

Nota: HTTP/3 se jtejjeb u jħaffef il-mekkaniżmu tal-handshake, iżda għadu 'l bogħod.

dns-prefetch

<link rel= "dns-prefetch"> jitlob lill-browser biex iwettaq riżoluzzjoni tad-DNS għad-dominju bil-quddiem jekk se tkun qed tikkonnettja miegħu dalwaqt u trid tħaffef il-konnessjoni inizjali.

Il-browser irid jiddetermina l-indirizz IP tad-dominju jekk jirkuprax xi riżorsi minn dominju ġdid ta’ parti terza. Per eżempju, it-tagħbija Google Fonts, React fonts minn CDN, jew titlob tweġiba JSON minn server API.

Għal kull dominju ġdid, ir-riżoluzzjoni tar-rekord DNS tipikament tieħu madwar 20-120 ms. Dan jaffettwa biss it-tagħbija tal-ewwel riżorsa minn dominju partikolari, iżda xorta jintroduċi dewmien. Jekk inwettqu riżoluzzjoni tad-DNS bil-quddiem, aħna niffrankaw il-ħin u tagħbija r-riżors aktar malajr.

sintassi

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

href jindika l-isem tad-dominju li għalih trid tissettja l-indirizz IP. Jista' jiġi speċifikat bi prefiss (https://domain.com) jew mingħajrha (//domain.com).

Meta tuża

Uża għal oqsma li se jkunu meħtieġa dalwaqt biex tniżżel minn hemm riżorsi li l-browser ma jkunx jaf bihom minn qabel. Pereżempju:

  • L-applikazzjoni tiegħek hija ospitata fuq my-app.com u jagħmel talbiet AJAX biex api.my-app.com: Ma tafx il-mistoqsijiet speċifiċi bil-quddiem għaliex huma magħmula b'mod dinamiku minn JS. Hawnhekk huwa pjuttost xieraq li tuża tikketta biex tikkonnettja minn qabel mad-dominju.
  • L-applikazzjoni tiegħek hija ospitata fuq my-app.com, u juża Google Fonts. Dawn jitniżżlu f'żewġ passi: l-ewwel, il-fajl CSS jitniżżel mid-dominju fonts.googleapis.com, allura dan il-fajl jitlob fonts ma fonts.gstatic.com. Ma tistax tkun taf minn liema fajls tat-tipa speċifiċi huma fonts.gstatic.com ikollok bżonnha sakemm tagħbija l-fajl CSS, sabiex inkunu nistgħu nagħmlu biss konnessjoni preliminari bil-quddiem.

Uża din it-tikketta biex tħaffef xi skript jew stil ta 'parti terza xi ftit minħabba konnessjoni stabbilita minn qabel.

Jekk jogħġbok innota karatteristiċi simili għal <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Normalment ma jagħmilx sens li tużahom flimkien għal dominju wieħed: <link rel= "preconnect"> diġà jinkludi <link rel= "dns-prefetch"/> u ħafna aktar. Dan jista' jiġi ġġustifikat f'żewġ każijiet:

  • Trid tappoġġja browsers anzjani?. <link rel= "dns-prefetch" /> appoġġjat minn peress IE10 u Safari 5. <link rel= "preconnect"> kien appoġġjat għal xi żmien fil-Chrome u Firefox, iżda kien miżjud biss ma 'Safari f'11.1 u għadu mhux appoġġjat fl-IE/Edge. Jekk għandek bżonn tappoġġja dawn il-browsers, uża <link rel= "dns-prefetch" /> bħala għażla backup għal <link rel= "preconnect">.
  • Trid tħaffef il-konnessjonijiet għal aktar minn 4-6 oqsma. Tag <link rel= "preconnect"> Mhux rakkomandat li tuża b'aktar minn 4-6 oqsma, peress li l-istabbiliment u ż-żamma ta 'konnessjoni hija operazzjoni għalja. <link rel= "dns-prefetch" /> jikkonsma inqas riżorsi, għalhekk użah jekk meħtieġ.

Dettalji

Tikketta fakultattiva. Il-browser mhuwiex meħtieġ li jsegwi din l-istruzzjoni, għalhekk jista 'ma jwettaqx riżoluzzjoni DNS, pereżempju, jekk ikun hemm ħafna tikketti bħal dawn fil-paġna jew f'xi każ ieħor.

X'inhu DNS. Kull server fuq l-Internet għandu indirizz IP uniku, li jidher qisu 216.58.215.78. L-isem tas-sit normalment jiddaħħal fil-bar tal-indirizz tal-browser (per eżempju, google.com), u s-servers DNS (Domain Name System) iqabbluha mal-indirizz IP tas-server (216.58.215.78).

Biex jiddetermina indirizz IP, il-browser għandu jfittex lis-server DNS. Huwa jieħu 20−120 ms meta tikkonnettja ma 'dominju ġdid ta' parti terza.

DNS huwa cached, għalkemm mhux b'mod affidabbli ħafna. Xi OSs u browsers jaħtfu l-mistoqsijiet tad-DNS fil-cache: dan se jiffranka l-ħin fuq mistoqsijiet ripetuti, iżda l-caching ma jistax jiġi invokat. Fuq Linux normalment ma jaħdimx xejn. Chrome għandu DNS cache, iżda jdum biss għal minuta. Il-Windows jaħbat ir-risponsi tad-DNS għal ħamest ijiem.

prerender

<link rel= "prerender"> jitlob lill-browser biex tniżżel il-URL u juriha f'tab inviżibbli. Meta l-utent jikklikkja fuq il-link, il-paġna għandha tintwera immedjatament. Dan huwa utli jekk inti żgur li l-utent se jżur ċerta paġna u trid tħaffef il-wiri tagħha.

Minkejja (jew minħabba) l-effettività eċċezzjonali ta 'din it-tikketta, fl-2019 <link rel= "prerender"> appoġġjat ħażin fil-browsers ewlenin. Ara aktar dettalji. hawn taħt.

sintassi

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

href jindika l-URL li trid tibda tirrendi fl-isfond.

Meta tuża

Meta tkun verament ċert li l-utent se jmur f'ċerta paġna. Jekk għandek "mina" li minnha 70% tal-viżitaturi għal paġna A jmorru fil-paġna B, allura <link rel= "prerender"> fuq paġna A tgħin biex turi l-paġna B malajr ħafna.

Tużax iżżejjed. Ir-rendi minn qabel jiswa ħafna flus f'termini ta 'bandwidth u memorja. Tużax <link rel= "prerender"> għal aktar minn paġna waħda.

Dettalji

Tikketta fakultattiva. Il-browser mhuwiex meħtieġ li jsegwi din l-istruzzjoni u jista 'jinjoraha, pereżempju, fuq konnessjoni bil-mod jew meta ma jkunx hemm biżżejjed memorja ħielsa.

Biex tiffranka l-memorja Chrome ma jagħmilx rendering sħiħU preload biss NoState. Dan ifisser li Chrome jgħabbi l-paġna u r-riżorsi kollha tagħha, iżda ma jirrendix jew jesegwixxi JavaScript.

Firefox u Safari ma jappoġġjawx din it-tikketta xejn. Dan ma jiksirx l-ispeċifikazzjoni, peress li l-browsers mhumiex meħtieġa li jsegwu din l-istruzzjoni; imma xorta imdejjaq. Bug implimentazzjoni Firefox ilu miftuħ għal seba' snin. Hemm rapporti li Safari lanqas ma jappoġġja din it-tikketta.

Sommarju

Użu:

  • <link rel= "preload"> - meta jkollok bżonn riżors fi ftit sekondi
  • <link rel= "prefetch"> - meta jkollok bżonn ir-riżors fil-paġna li jmiss
  • <link rel= "preconnect"> - meta tkun taf li ser ikollok bżonn riżors dalwaqt, iżda għad ma tafx il-URL sħiħ tagħha
  • <link rel= "dns-prefetch"> - bl-istess mod, meta tkun taf li ser ikollok bżonn riżors dalwaqt, iżda għad ma tafx l-URL sħiħ tagħha (għal browsers anzjani)
  • <link rel= "prerender"> — meta tkun ċert li l-utenti se jmorru f'ċerta paġna, u trid tħaffef il-wiri tagħha

Sors: www.habr.com

Żid kumment