ProHoster > Blogi > Haldamine > Eellaadimine, eellaadimine ja muud sildid

Eellaadimine, eellaadimine ja muud sildid

On palju võimalusi veebi jõudluse parandamiseks. Üks neist on sisu eellaadimine, mida hiljem vaja läheb. CSS-i eeltöötlus, kogu lehe eelrenderdus või domeeninime eraldusvõime. Teeme kõik ette ja näitame tulemust koheselt! Kõlab lahedalt.

Veelgi lahedam on see, et seda rakendatakse väga lihtsalt. Viis silti anna brauserile käsk eeltoimingute tegemiseks:

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


Selgitame lühidalt, mida nad teevad ja millal neid kasutada.

Hüppa: eelkoormus · eellaadimine · eelühendamine · dns-eellaadimine · eelrenderdamine

eelkoormus

<link rel= "preload"> käsib brauseril ressurss (nt skript või laaditabel) võimalikult kiiresti laadida ja vahemällu salvestada. See on kasulik, kui mõni sekund pärast lehe laadimist on vaja ressurssi – ja soovite protsessi kiirendada.

Brauser ei tee pärast laadimist ressursiga midagi. Skripte ei käivitata, laadilehti ei rakendata. Ressurss salvestatakse lihtsalt vahemällu ja tehakse taotluse korral kohe kättesaadavaks.

süntaks

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

href osutab ressursile, mida soovite alla laadida.

as võib olla midagi, mida saab brauseris alla laadida:

  • style stiililehtede jaoks,
  • script skriptide jaoks,
  • font fontide jaoks,
  • fetch kasutades laaditud ressursside jaoks fetch() või XMLHttpRequest,
  • vaata täielikku nimekirja MDN-is.

Oluline on atribuut täpsustada as – see aitab brauseril allalaadimisi õigesti prioritiseerida ja ajastada.

Millal kasutada

Kasutage eellaadimist, kui ressurssi on lähitulevikus vaja. Näiteks:

  • Mittestandardsed fondid välisest failist: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Vaikimisi comic-sans.woff2 hakkab laadima alles pärast allalaadimist ja sõelumist index.css. Nii kaua ootamise vältimiseks saate fondi varem alla laadida <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Kui eraldate oma stiilid lähenemise järgi Kriitiline CSS kaheks osaks, kriitiliseks (koheseks renderdamiseks) ja mittekriitiliseks: 
    <style>
/* Inlined critical styles */
</style>

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

    Selle lähenemisviisi korral alustatakse mittekriitiliste stiilide laadimist alles siis, kui JavaScripti käitatakse, mis võib juhtuda mõni sekund pärast renderdamist. Selle asemel, et oodata JS-i kasutamist <link rel= "preload">allalaadimise alustamiseks varem:

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

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

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

Ärge kasutage eellaadimist üle. Kui laadite kõik järjest, ei kiirenda sait võluväel, vaid vastupidi, takistab brauserit oma tööd õigesti planeerimast.

Mitte segi ajada eellaadimisega. Ära kasuta <link rel= "preload">, kui te ei vaja ressurssi kohe pärast lehe laadimist. Kui vajate seda hiljem, näiteks järgmise lehe jaoks, siis kasutage <link rel= "prefetch">.

Detailid

See on kohustuslik silt mida brauser käivitab (kui see seda toetab), erinevalt kõigist teistest siltidest seotud eellaadimisega. Brauser peab alla laadima punktis määratud ressursi <link rel="preload">. Muudel juhtudel võib see eellaadimist ignoreerida, näiteks kui see töötab aeglase ühendusega.

Prioriteedid. Tavaliselt määravad brauserid erinevatele ressurssidele (stiilid, skriptid, fondid jne) erinevad prioriteedid, et esmalt laadida kõige olulisemad ressursid. Sel juhul määrab brauser prioriteedi atribuudi järgi as. Chrome'i brauseri jaoks saate vaadata täielik prioriteetide tabel.

Eellaadimine, eellaadimine ja muud sildid

eellaadimine

<link rel= "prefetch"> palub brauseril taustal ressurss (nt skript või stiilileht) alla laadida ja vahemällu salvestada. Laadimine toimub madala prioriteediga, nii et see ei sega olulisemate ressursside kasutamist. See on kasulik, kui ressurssi on vaja järgmisel lehel ja soovite selle eelnevalt vahemällu salvestada.

Ka siin ei tee brauser pärast laadimist ressursiga midagi. Skripte ei käivitata, laadilehti ei rakendata. Ressurss salvestatakse lihtsalt vahemällu ja tehakse taotluse korral kohe kättesaadavaks.

süntaks

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

href osutab ressursile, mida soovite alla laadida.

as võib olla midagi, mida saab brauseris alla laadida:

  • style stiililehtede jaoks,
  • script skriptide jaoks,
  • font fontide jaoks,
  • fetch kasutades laaditud ressursside jaoks fetch() või XMLHttpRequest,
  • vaata täielikku nimekirja MDN-is.

Oluline on atribuut täpsustada as - see aitab brauseril allalaadimisi õigesti prioritiseerida ja ajastada.

Millal kasutada

Ressursside laadimiseks teistelt lehtedelt, kui vajate ressurssi teiselt lehelt ja soovite selle eellaadida, et kiirendada selle lehe renderdamist. Näiteks:

  • Teil on veebipood ja 40% kasutajatest lahkub tootelehe avalehelt. Kasuta <link rel= "prefetch">, laadides tootelehtede renderdamiseks CSS- ja JS-faile.
  • Teil on ühe lehe rakendus ja erinevad lehed laadivad erinevaid pakette. Kui kasutaja külastab lehte, saab eellaadida paketid kõikidele lehtedele, millele see lingib.

Tõenäoliselt saab seda silti igal määral ohutult kasutada.. Tavaliselt ajastavad brauserid eellaadimise madalaima prioriteediga, nii et see ei häiri kedagi. Pidage lihtsalt meeles, et see tarbib kasutajaliiklust, mis võib maksta raha.

Mitte kiireloomuliste taotluste jaoks. Ära kasuta <link rel= "prefetch">, kui ressurssi vajatakse mõne sekundi pärast. Sel juhul kasutage <link rel= "preload">.

Detailid

Valikuline silt. Brauser ei pea seda juhist järgima, ta võib seda ignoreerida näiteks aeglase ühenduse korral.

Prioriteet Chrome'is. Chrome'is <link rel= "prefetch"> tavaliselt täidetakse minimaalse prioriteediga (vt täielik prioriteetide tabel), see tähendab pärast kõige muu laadimist.

eelühendamine

<link rel= "preconnect"> palub brauseril eelnevalt domeeniga ühenduse luua, kui soovite edaspidi ühenduse loomist kiirendada.

Brauser peab looma ühenduse, kui ta hangib ressursse uuest kolmanda osapoole domeenist. Näiteks kui see laadib Google'i fonte, reageerib CDN-ist fonte või taotleb API-serverist JSON-vastust.

Uue ühenduse loomine võtab tavaliselt paarsada millisekundit. Seda tehakse üks kord, kuid see võtab aega. Kui olete eelnevalt ühenduse loonud, säästate aega ja laadite sellelt domeenilt ressursse kiiremini alla.

süntaks

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

href tähistab domeeninime, mille IP-aadressi soovite määrata. Saab määrata eesliitega (https://domain.com) või ilma selleta (//domain.com).

Millal kasutada

Kasutage domeenide jaoks, mida varsti vaja läheb et sealt alla laadida mõni oluline stiil, skript või pilt, kuid te ei tea veel ressursi URL-i. Näiteks:

  • Teie rakendus on hostitud saidil my-app.com ja teeb AJAX-i päringuid api.my-app.com: Te ei tea konkreetseid päringuid ette, kuna need tehakse JS-ist dünaamiliselt. Siin on täiesti asjakohane kasutada domeeniga eelühendamiseks silti.
  • Teie rakendus on hostitud saidil my-app.com ja kasutab Google Fontsi. Need laaditakse alla kahes etapis: esmalt laaditakse domeenist alla CSS-fail fonts.googleapis.com, siis see fail taotleb fonte koos fonts.gstatic.com. Te ei saa teada, millistest konkreetsetest fondifailidest pärit on fonts.gstatic.com vajate kuni CSS-faili laadimiseni, nii et saame eelnevalt luua ainult esialgse ühenduse.

Kasutage seda silti mõne kolmanda osapoole skripti või stiili pisut kiirendamiseks eelnevalt loodud ühenduse tõttu.

Ärge kasutage üle. Ühenduse loomine ja säilitamine on kallis toiming nii kliendile kui serverile. Kasutage seda silti maksimaalselt 4–6 domeeni jaoks.

Detailid

Valikuline silt. Brauser ei pea seda juhist järgima ja võib seda ignoreerida, näiteks kui palju ühendusi on juba loodud või mõnel muul juhul.

Mida ühendamisprotsess sisaldab?. Iga saidiga ühenduse loomiseks peab brauser tegema järgmist.

  • DNS-i eraldusvõime. Leia serveri IP-aadress (216.58.215.78) määratud domeeninime jaoks (google.com).
  • TCP käepigistus. Vahetage pakette (klient → server → klient), et alustada TCP-ühendust serveriga.
  • TLS-i käepigistus (ainult HTTPS-saidid). Kaks pakettvahetusringi (klient → server → klient → server → klient) turvalise TLS-seansi algatamiseks.

Märkus. HTTP/3 parandab ja kiirendab käepigistuse mehhanismi, kuid see on veel kaugel.

dns-eellaadimine

<link rel= "dns-prefetch"> palub brauseril domeeni DNS-i eraldusvõime eelnevalt läbi viia, kui loote sellega varsti ühenduse ja soovite esialgset ühendust kiirendada.

Brauser peab määrama domeeni IP-aadressi, kui ta hangib ressursse uuelt kolmanda osapoole domeenilt. Näiteks Google'i fontide laadimine, CDN-ist Reacti fontide laadimine või API-serverist JSON-vastuse taotlemine.

Iga uue domeeni puhul võtab DNS-kirje eraldusvõime tavaliselt umbes 20–120 ms. See mõjutab ainult antud domeeni esimese ressursi laadimist, kuid toob siiski kaasa viivituse. Kui teostame DNS-i lahenduse eelnevalt, säästame aega ja laadime ressurssi kiiremini.

süntaks

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

href tähistab domeeninime, mille IP-aadressi soovite määrata. Saab määrata eesliitega (https://domain.com) või ilma selleta (//domain.com).

Millal kasutada

Kasutage domeenide jaoks, mida varsti vaja läheb sealt alla laadida ressursse, millest brauser ette ei tea. Näiteks:

  • Teie rakendus on hostitud saidil my-app.com ja teeb AJAX-i päringuid api.my-app.com: Te ei tea konkreetseid päringuid ette, kuna need tehakse JS-ist dünaamiliselt. Siin on täiesti asjakohane kasutada domeeniga eelühendamiseks silti.
  • Teie rakendus on hostitud saidil my-app.comja kasutab Google Fontsi. Need laaditakse alla kahes etapis: esmalt laaditakse domeenist alla CSS-fail fonts.googleapis.com, siis see fail taotleb fonte koos fonts.gstatic.com. Te ei saa teada, millistest konkreetsetest fondifailidest pärit on fonts.gstatic.com vajate seda kuni CSS-faili laadimiseni, nii et saame eelnevalt luua ainult esialgse ühenduse.

Kasutage seda silti mõne kolmanda osapoole skripti või stiili pisut kiirendamiseks eelnevalt loodud ühenduse tõttu.

Pange tähele sarnaseid omadusi <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Tavaliselt ei ole mõtet neid ühes domeenis koos kasutada: <link rel= "preconnect"> sisaldab juba <link rel= "dns-prefetch"/> ja palju muud. Seda saab õigustada kahel juhul:

  • Kas soovite toetada vanemaid brausereid?. <link rel= "dns-prefetch" /> toetab alates IE10-st ja Safari 5-st. <link rel= "preconnect"> toetati mõnda aega Chrome'is ja Firefoxis, kuid lisati Safarisse alles 11.1 ja IE/Edge ikka veel ei toeta. Kui teil on vaja neid brausereid toetada, kasutage <link rel= "dns-prefetch" /> tagavaravalikuna <link rel= "preconnect">.
  • Soovite kiirendada ühendust rohkem kui 4-6 domeeniga. Tag <link rel= "preconnect"> Ei ole soovitatav kasutada rohkem kui 4-6 domeeniga, kuna ühenduse loomine ja säilitamine on kulukas toiming. <link rel= "dns-prefetch" /> kulutab vähem ressursse, seega kasuta seda vajadusel.

Detailid

Valikuline silt. Brauser ei pea seda juhist järgima, seega ei pruugi see DNS-i lahutust teostada, näiteks kui selliseid silte on lehel palju või mõnel muul juhul.

Mis on DNS. Igal Interneti-serveril on kordumatu IP-aadress, mis näeb välja selline 216.58.215.78. Saidi nimi sisestatakse tavaliselt brauseri aadressiribale (näiteks google.com) ja DNS (domeeninimede süsteem) serverid vastavad selle serveri IP-aadressiga (216.58.215.78).

IP-aadressi määramiseks peab brauser esitama päringu DNS-serverist. Uue kolmanda osapoole domeeniga ühenduse loomisel kulub 20–120 ms.

DNS on vahemällu salvestatud, kuigi mitte väga usaldusväärselt. Mõned OS-id ja brauserid salvestavad DNS-päringuid vahemällu: see säästab aega korduvate päringute puhul, kuid vahemällu ei saa loota. Linuxis see tavaliselt üldse ei tööta. Chrome'il on DNS-i vahemälu, kuid see kestab vaid minuti. Windows salvestab DNS-i vastused vahemällu viis päeva.

eelrenderdamine

<link rel= "prerender"> palub brauseril URL alla laadida ja seda nähtamatul vahekaardil kuvada. Kui kasutaja lingil klõpsab, peaks leht kohe kuvama. See on kasulik, kui olete kindel, et kasutaja külastab teatud lehte ja soovib selle kuvamist kiirendada.

Vaatamata selle sildi erakordsele tõhususele (või selle tõttu) 2019. aastal <link rel= "prerender"> suuremates brauserites halvasti toetatud. Vaata täpsemalt. allpool.

süntaks

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

href osutab URL-ile, mida soovite taustal renderdama hakata.

Millal kasutada

Kui olete tõesti kindel, et kasutaja läheb teatud lehele. Kui teil on tunnel, mille kaudu 70% lehe A külastajatest läheb lehele B, siis <link rel= "prerender"> leheküljel A aitab lehekülge B väga kiiresti kuvada.

Ärge kasutage üle. Eelrenderdamine on ribalaiuse ja mälu osas äärmiselt kallis. Ära kasuta <link rel= "prerender"> rohkem kui ühe lehe jaoks.

Detailid

Valikuline silt. Brauser ei pea seda juhist järgima ja võib seda ignoreerida näiteks aeglase ühenduse korral või kui vaba mälu pole piisavalt.

Mälu säästmiseks Chrome ei tee täielikku renderdamistJa ainult eellaadimine NoState. See tähendab, et Chrome laadib lehe ja kõik selle ressursid, kuid ei renderda ega käivita JavaScripti.

Firefox ja Safari ei toeta seda silti üldse. See ei riku spetsifikatsiooni, kuna brauserid ei pea seda juhist järgima; aga kurb ikkagi. Rakendusviga Firefox on olnud avatud seitse aastat. On teateid, et Safari ei toeta ka seda silti.

Kokkuvõte

Kasuta:

  • <link rel= "preload"> - kui vajate ressurssi mõne sekundi pärast
  • <link rel= "prefetch"> - kui vajate järgmisel lehel olevat ressurssi
  • <link rel= "preconnect"> - kui teate, et vajate varsti ressurssi, kuid te ei tea veel selle täielikku URL-i
  • <link rel= "dns-prefetch"> - samamoodi, kui teate, et vajate varsti ressurssi, kuid te ei tea veel selle täielikku URL-i (vanemate brauserite jaoks)
  • <link rel= "prerender"> — kui olete kindel, et kasutajad lähevad teatud lehele, ja soovite selle kuvamist kiirendada

Allikas: www.habr.com

Lisa kommentaar