ProHoster > Blog > Uprava > Prednalaganje, vnaprejšnje pridobivanje in druge oznake

Prednalaganje, vnaprejšnje pridobivanje in druge oznake

Obstaja veliko načinov za izboljšanje delovanja spleta. Eden od njih je vnaprejšnje nalaganje vsebine, ki bo potrebna pozneje. Predhodna obdelava CSS, predhodno upodabljanje celotne strani ali razrešitev imena domene. Vse naredimo vnaprej, nato pa takoj prikažemo rezultat! Sliši se kul.

Še bolj kul je, da je zelo preprosto implementirano. Pet oznak dajte brskalniku ukaz za izvedbo predhodnih dejanj:

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


Naj na kratko razložimo, kaj počnejo in kdaj jih uporabiti.

Pojdi k: preload · prednabiranje · vnaprej povežite · dns-prefetch · predupodabljanje

preload

<link rel= "preload"> pove brskalniku, naj čim prej naloži in shrani vir (kot je skript ali slogovna tabela). To je uporabno, ko je nekaj sekund po nalaganju strani potreben vir – in želite pospešiti postopek.

Brskalnik po nalaganju ne naredi ničesar z virom. Skripti se ne izvajajo, slogovne datoteke niso uporabljene. Vir je preprosto predpomnjen in takoj na voljo na zahtevo.

sintaksa

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

href kaže na vir, ki ga želite prenesti.

as je lahko karkoli, kar je mogoče prenesti v brskalnik:

  • style za slogovne liste,
  • script za skripte,
  • font za pisave,
  • fetch za vire, naložene z uporabo fetch() ali XMLHttpRequest,
  • glej celoten seznam na MDN.

Pomembno je določiti atribut as – to pomaga brskalniku, da pravilno določi prednost in načrtuje prenose.

Kdaj uporabiti

Uporabite vnaprejšnje nalaganje, ko bo vir potreben v zelo bližnji prihodnosti. Na primer:

  • Nestandardne pisave iz zunanje datoteke: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Privzeto comic-sans.woff2 se bo začel nalagati šele po prenosu in razčlenjevanju index.css. Da se izognete tako dolgemu čakanju, lahko pisavo prenesete prej z uporabo <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Če ločite svoje sloge glede na pristop Kritičen CSS na dva dela, kritičnega (za takojšnje upodabljanje) in nekritičnega: 
    <style>
/* Inlined critical styles */
</style>

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

    S tem pristopom se bodo nekritični slogi začeli nalagati šele, ko se bo zagnal JavaScript, kar se lahko zgodi nekaj sekund po upodabljanju. Namesto čakanja uporabite JS <link rel= "preload">za začetek prenosa prej:

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

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

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

Ne pretiravajte s prednalaganjem. Če nalagate vse po vrsti, se spletno mesto ne bo čarobno pospešilo, nasprotno, brskalniku bo preprečilo pravilno načrtovanje dela.

Ne sme se zamenjevati z vnaprejšnjim pridobivanjem. Ne uporabljajte <link rel= "preload">, če vira ne potrebujete takoj po nalaganju strani. Če ga potrebujete pozneje, na primer za naslednjo stran, uporabite <link rel= "prefetch">.

Podrobnosti

To je obvezna oznaka izvede brskalnik (če to podpira), za razliko od vseh drugih oznak povezane s prednalaganjem. Brskalnik mora prenesti vir, naveden v <link rel="preload">. V drugih primerih lahko prezre vnaprejšnje nalaganje, na primer, če deluje na počasni povezavi.

Prednostne naloge. Brskalniki običajno dodelijo različne prioritete različnim virom (slogom, skriptom, pisavam itd.), da najprej naložijo najpomembnejše vire. V tem primeru brskalnik določi prednost po atributu as. Za brskalnik Chrome si lahko ogledate polna prednostna tabela.

Prednalaganje, vnaprejšnje pridobivanje in druge oznake

prednabiranje

<link rel= "prefetch"> od brskalnika zahteva, da v ozadju prenese in predpomni vir (kot je skript ali slogovni list). Nalaganje poteka pri nizki prioriteti, tako da ne moti pomembnejših virov. To je uporabno, če je vir potreben na naslednji strani in ga želite predpomniti vnaprej.

Tudi tukaj brskalnik po nalaganju ne naredi ničesar z virom. Skripti se ne izvajajo, slogovni listi niso uporabljeni. Vir je preprosto predpomnjen in takoj na voljo na zahtevo.

sintaksa

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

href kaže na vir, ki ga želite prenesti.

as je lahko karkoli, kar je mogoče prenesti v brskalnik:

  • style za slogovne liste,
  • script za skripte,
  • font za pisave,
  • fetch za vire, naložene z uporabo fetch() ali XMLHttpRequest,
  • glej celoten seznam na MDN.

Pomembno je določiti atribut as - to brskalniku pomaga pri pravilnem določanju prioritet in načrtovanju prenosov.

Kdaj uporabiti

Za nalaganje virov z drugih strani, če potrebujete vir z druge strani in ga želite vnaprej naložiti, da nato pospešite upodabljanje te strani. Na primer:

  • Imate spletno trgovino in 40% uporabnikov zapusti domačo stran za stran izdelka. Uporaba <link rel= "prefetch">, nalaganje datotek CSS in JS za upodabljanje strani izdelkov.
  • Imate enostransko aplikacijo in različne strani nalagajo različne pakete. Ko uporabnik obišče stran, se lahko vnaprej naložijo paketi za vse strani, na katere se povezuje.

Verjetno je to oznako mogoče varno uporabljati v katerem koli obsegu.. Brskalniki običajno načrtujejo vnaprejšnje pridobivanje z najnižjo prioriteto, tako da nikogar ne moti. Upoštevajte le, da porabi promet uporabnikov, kar lahko stane.

Ne za nujne zahteve. Ne uporabljajte <link rel= "prefetch">, ko je vir potreben v nekaj sekundah. V tem primeru uporabite <link rel= "preload">.

Podrobnosti

Izbirna oznaka. Brskalniku ni treba upoštevati tega navodila; lahko ga prezre, na primer pri počasni povezavi.

Prednost v Chromu. V Chromu <link rel= "prefetch"> običajno se izvaja z minimalno prioriteto (glej polna prednostna tabela), torej po nalaganju vsega ostalega.

vnaprej povežite

<link rel= "preconnect"> zahteva, da se brskalnik vnaprej poveže z domeno, ko želite v prihodnosti pospešiti nastavitev povezave.

Brskalnik mora vzpostaviti povezavo, če pridobi vire iz nove domene tretje osebe. Na primer, če naloži pisave Google Fonts, pisave React iz CDN ali zahteva odgovor JSON od strežnika API.

Vzpostavitev nove povezave običajno traja nekaj sto milisekund. To se naredi enkrat, vendar še vedno traja. Če ste povezavo vzpostavili vnaprej, boste prihranili čas in hitreje prenašali vire s te domene.

sintaksa

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

href označuje ime domene, za katero želite določiti naslov IP. Lahko se določi s predpono (https://domain.com) ali brez njega (//domain.com).

Kdaj uporabiti

Uporabite za domene, ki bodo kmalu potrebne da od tam prenesete pomemben slog, skript ali sliko, vendar še ne poznate URL-ja vira. Na primer:

  • Vaša aplikacija gostuje na my-app.com in pošilja zahteve AJAX api.my-app.com: Specifičnih poizvedb ne poznate vnaprej, ker so narejene dinamično iz JS. Tukaj je povsem primerno uporabiti oznako za predhodno povezavo z domeno.
  • Vaša aplikacija gostuje na my-app.com in uporablja Google Fonts. Prenesejo se v dveh korakih: najprej se z domene prenese datoteka CSS fonts.googleapis.com, potem ta datoteka zahteva pisave z fonts.gstatic.com. Ne morete vedeti, iz katere določene datoteke pisave so fonts.gstatic.com boste potrebovali, dokler ne naložite datoteke CSS, zato lahko predhodno vzpostavimo le predhodno povezavo.

Uporabite to oznako, da nekoliko pospešite skript ali slog tretje osebe zaradi vnaprej vzpostavljene povezave.

Ne pretiravajte. Vzpostavljanje in vzdrževanje povezave je draga operacija tako za odjemalca kot za strežnik. Uporabite to oznako za največ 4-6 domen.

Podrobnosti

Izbirna oznaka. Brskalniku ni treba slediti tem navodilom in ga lahko prezre, na primer, če je že vzpostavljenih veliko povezav ali v kakšnem drugem primeru.

Kaj vključuje postopek povezave?. Za povezavo z vsakim spletnim mestom mora brskalnik storiti naslednje:

  • DNS resolucija. Poišči naslov IP strežnika (216.58.215.78) za določeno ime domene (google.com).
  • TCP rokovanje. Izmenjajte pakete (odjemalec → strežnik → odjemalec), da vzpostavite povezavo TCP s strežnikom.
  • Rokovanje TLS (samo spletna mesta HTTPS). Dva kroga izmenjave paketov (odjemalec → strežnik → odjemalec → strežnik → odjemalec) za začetek varne seje TLS.

Opomba: HTTP/3 bo izboljšal in pospešil mehanizem rokovanja, vendar je še daleč.

dns-prefetch

<link rel= "dns-prefetch"> zahteva od brskalnika, da vnaprej izvede razrešitev DNS za domeno, če se boste kmalu povezali z njo in želite pospešiti začetno povezavo.

Brskalnik mora določiti naslov IP domene, če bo pridobil vire iz nove domene tretje osebe. Na primer nalaganje pisav Google Fonts, pisav React iz CDN ali zahtevanje odgovora JSON s strežnika API.

Za vsako novo domeno razrešitev zapisa DNS običajno traja približno 20–120 ms. To vpliva le na nalaganje prvega vira iz dane domene, vendar še vedno povzroči zamudo. Če DNS razrešitev izvedemo vnaprej, bomo prihranili čas in hitreje naložili vir.

sintaksa

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

href označuje ime domene, za katero želite nastaviti naslov IP. Lahko se določi s predpono (https://domain.com) ali brez njega (//domain.com).

Kdaj uporabiti

Uporabite za domene, ki bodo kmalu potrebne da od tam prenesete vire, za katere brskalnik vnaprej ne ve. Na primer:

  • Vaša aplikacija gostuje na my-app.com in pošilja zahteve AJAX api.my-app.com: Specifičnih poizvedb ne poznate vnaprej, ker so narejene dinamično iz JS. Tukaj je povsem primerno uporabiti oznako za predhodno povezavo z domeno.
  • Vaša aplikacija gostuje na my-app.com, in uporablja Google Fonts. Prenesejo se v dveh korakih: najprej se z domene prenese datoteka CSS fonts.googleapis.com, potem ta datoteka zahteva pisave z fonts.gstatic.com. Ne morete vedeti, iz katere določene datoteke pisave so fonts.gstatic.com potrebovali ga boste, dokler ne naložite datoteke CSS, zato lahko vnaprej vzpostavimo le predhodno povezavo.

Uporabite to oznako, da nekoliko pospešite skript ali slog tretje osebe zaradi vnaprej vzpostavljene povezave.

Upoštevajte podobne značilnosti <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Običajno jih ni smiselno uporabljati skupaj za eno domeno: <link rel= "preconnect"> že vključuje <link rel= "dns-prefetch"/> in veliko več. To je mogoče upravičiti v dveh primerih:

  • Ali želite podpirati starejše brskalnike?. <link rel= "dns-prefetch" /> podpira od IE10 in Safarija 5. <link rel= "preconnect"> je bil nekaj časa podprt v Chromu in Firefoxu, vendar je bil dodan v Safari šele v 11.1 in še vedno ni podprt v IE/Edge. Če potrebujete podporo za te brskalnike, uporabite <link rel= "dns-prefetch" /> kot rezervna možnost za <link rel= "preconnect">.
  • Želite pospešiti povezave z več kot 4-6 domenami. Oznaka <link rel= "preconnect"> Ni priporočljivo uporabljati z več kot 4-6 domenami, saj je vzpostavljanje in vzdrževanje povezave draga operacija. <link rel= "dns-prefetch" /> porabi manj virov, zato ga po potrebi uporabite.

Podrobnosti

Izbirna oznaka. Brskalniku ni treba slediti tem navodilom, zato morda ne bo izvedel razrešitve DNS, na primer, če je na strani veliko takih oznak ali v kakšnem drugem primeru.

Kaj je DNS. Vsak strežnik v internetu ima edinstven naslov IP, ki je videti kot 216.58.215.78. Ime spletnega mesta se običajno vnese v naslovno vrstico brskalnika (npr. google.com), strežniki DNS (Domain Name System) pa ga ujemajo z naslovom IP strežnika (216.58.215.78).

Če želite določiti naslov IP, mora brskalnik opraviti poizvedbo pri strežniku DNS. Pri povezovanju z novo domeno tretje osebe traja 20−120 ms.

DNS je predpomnjen, čeprav ni zelo zanesljiv. Nekateri operacijski sistemi in brskalniki predpomnijo poizvedbe DNS: to bo prihranilo čas pri ponavljajočih se poizvedbah, vendar se na predpomnjenje ni mogoče zanesti. V Linuxu običajno sploh ne deluje. Chrome ima predpomnilnik DNS, vendar traja le minuto. Windows pet dni predpomni odgovore DNS.

predupodabljanje

<link rel= "prerender"> od brskalnika zahteva, da prenese URL in ga prikaže v nevidnem zavihku. Ko uporabnik klikne na povezavo, se mora stran takoj prikazati. To je uporabno, če ste prepričani, da bo uporabnik obiskal določeno stran in želite pospešiti njen prikaz.

Kljub (ali prav zaradi) izjemne učinkovitosti te oznake je v letu 2019 <link rel= "prerender"> slabo podprt v večjih brskalnikih. Oglejte si več podrobnosti. Spodaj.

sintaksa

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

href kaže na URL, ki ga želite začeti upodabljati v ozadju.

Kdaj uporabiti

Ko ste res prepričani, da bo uporabnik šel na določeno stran. Če imate "tunel", skozi katerega gre 70% obiskovalcev strani A na stran B, potem <link rel= "prerender"> na strani A bo pomagal zelo hitro prikazati stran B.

Ne pretiravajte. Vnaprejšnje upodabljanje je izjemno drago v smislu pasovne širine in pomnilnika. Ne uporabljajte <link rel= "prerender"> za več kot eno stran.

Podrobnosti

Izbirna oznaka. Brskalniku ni treba slediti tem navodilom in ga lahko prezre, na primer pri počasni povezavi ali ko ni dovolj prostega pomnilnika.

Za shranjevanje spomina Chrome ne izvaja popolnega upodabljanjaIn samo vnaprej naloži NoState. To pomeni, da Chrome naloži stran in vse njene vire, vendar ne upodablja ali izvaja JavaScripta.

Firefox in Safari te oznake sploh ne podpirata. To ne krši specifikacije, saj brskalnikom ni treba slediti tem navodilom; ampak še vedno žalosten. Izvedbena napaka Firefox je odprt sedem let. Obstajajo poročila, da Safari tudi ne podpira te oznake.

Povzetek

Uporaba:

  • <link rel= "preload"> - ko potrebujete vir v nekaj sekundah
  • <link rel= "prefetch"> - ko potrebujete vir na naslednji strani
  • <link rel= "preconnect"> - ko veste, da boste kmalu potrebovali vir, vendar še ne poznate njegovega celotnega URL-ja
  • <link rel= "dns-prefetch"> - podobno, ko veste, da boste kmalu potrebovali vir, vendar še ne poznate njegovega celotnega URL-ja (za starejše brskalnike)
  • <link rel= "prerender"> — ko ste prepričani, da bodo uporabniki šli na določeno stran, in želite pospešiti njen prikaz

Vir: www.habr.com

Dodaj komentar