On palju viise veebitootlikkuse tõstmiseks. Üks neist on sisule eelnevalt laadimine, mis on hiljem vajalik. CSS-i eelne laadimine, täiesti lehe eelne renderdamine või domeeninime lahendamine. Teeme kõik ette ära ja seejärel näitame tulemust koheselt! Kõlab hästi.

Veelgi paremad uudised on see, et see on väga lihtne teostada. Viis sildi saadavad brauserile käsu eeltöödeks:

Koheselt tutvustame, mida need teevad ja millal neid kasutada.

Mine juurde: preload · prefetch · preconnect · dns-prefetch · prerender

preload

<link rel= "preload"> ütleb brauserile, et laadida ja vahemälu varakult ressurssi (nt skripti või stiililehte). See on kasulik, kui resurssi on vaja mõne sekundi pärast lehe laadimisest — ja soovite protsessi kiirendada.

Brauser ei tee pärast ressurssi laadimist selle kanssa midagi. Skripte ei käivitata, stiililehti ei rakendata. Ressurss lihtsalt salvestatakse ja antakse kohe nõudmisel.

Süntaks

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

href osutab ressursile, mille soovite alla laadida.

as võib olla mis tahes, mida brauser suudab alla laadida:

style stiililehtede jaoks,
script skriptide jaoks,
font fontide jaoks,
fetch ressursside jaoks, mis on alla laaditud fetch() või XMLHttpRequest,
täielik nimekiri vt. MDN-is.

Oluline on määrata atribuudi as – see aitab brauseril õigesti määrata prioriteete ja laadimisplaneerimist.

Millal kasutada

Kasutage eelnevat laadimist, kui resurssi on varsti vaja. Näiteks:

Kohandatud fondid välisest failist:
```
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
Vaikimisi comic-sans.woff2 alustab laadimist alles pärast lehe laadimist ja parsimist index.css. Et mitte nii kaua oodata, saab fondi eelnevalt laadida <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Kui jagate oma stiile lähenemisega Critical CSS kaheks osaks, kriitiliseks (kohese renderdamise jaoks) ja mitte kriitiliseks:
```
/* Inlineeritud kriitilised stiilid */
```
Selle lähenemisega hakkavad mitte-kriitilised stiilid laadima alles siis, kui JavaScript käivitub, mis võib toimuda mõne sekundi pärast renderdamisest. Selle asemel, et oodata JS, kasutage <link rel= "preload">, et alustada laadimist varakult:
```
/* Inlineeritud kriitilised stiilid */
```

Ärge kuritarvitage eelnevat laadimist. Kui laadida kõike järjest, ei kiirenda see saiti maagiliselt, vastupidi, see takistab brauseril korralikku tööplaneerimist.

Ärge segage seda eelnerimisega. Ärge kasutage <link rel= "preload">, kui te ei vaja ressurssi kohe pärast lehe laadimist. Kui see on hiljem vajalik, näiteks järgmise lehe jaoks, kasutage <link rel= "prefetch">.

Üksikasjad

See on kohustuslik silt brauseri täitmiseks (kui see selle toetab), erinevalt teistest siltidest, mis on seotud eelneva laadimisega. Brauser peab laadima ressurssi, mis on määratud <link rel="preload">. Muudel juhtudel võib see eelmise laadimise ignoreerida, näiteks kui see töötab aeglasel ühendusel.

Prioriteedid. Erinevatele ressurssidele (stiilid, skripti, fondid jne) määravad brauserid tavaliselt erinevad prioriteedid, et laadida kõige olulisemad ressursid kõigepealt. Sel juhul määrab brauser prioriteedi atribuudi järgi as. Chrome'i brauseri puhul saate vaadata täielikku prioriteetide tabelit.

prefetch

<link rel= "prefetch"> palub brauseril laadida ja vahemälu ressursse (nt skripti või stiililehte) taustal. Laadimine toimub madala prioriteediga, seetõttu ei sega see olulisemaid ressursse. See on kasulik, kui resurssi on vajalik järgmisel lehel ja soovite seda eelnevalt vahemälu salvestada.

Siin ei tee brauser pärast ressurssi laadimist sellekaudu ka midagi. Skripte ei käivitata, stiililehti ei rakendata. Ressurss lihtsalt salvestatakse ja antakse kohe nõudmisel.

Süntaks

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

href osutab ressursile, mille soovite alla laadida.

as võib olla mis tahes, mida brauser suudab alla laadida:

style stiililehtede jaoks,
script skriptide jaoks,
font fontide jaoks,
fetch ressursside jaoks, mis on alla laaditud fetch() või XMLHttpRequest,
täielik nimekiri vt. MDN-is.

Oluline on määrata atribuudi as — see aitab brauseril õigesti määrata prioriteete ja laadimisplaneerimist.

Millal kasutada

Ressursside laadimiseks teistelt lehtedelt, kui soovite, et resurss teiselt lehelt laaditaks eelnevalt, et seejärel kiirendada selle lehe renderdamist. Näiteks:

Teie e-poes lahkub 40% kasutajatest peamise lehelt tootelehe peale. Kasutage <link rel= "prefetch">, laadides CSS-i ja JS-failid tootelehtede renderdamiseks.
Teil on ühekpleheline rakendus, kus erinevad lehed laadivad erinevaid pakette. Kui kasutaja külastab mõnda lehte, on võimalik eelaadida pakette kõigist nendest lehtedest, millele ta viitab.

Seda märgendit võib tõenäoliselt kasutada ohutult mis tahes mahus.Pangad plaanivad tavaliselt eelaadimist madalaima prioriteediga, mistõttu ei häiri see kedagi. Kuid pidage meeles, et see kasutab kasutaja andmesidekoguseid, mis võib maksma minna.

Ei sobi kiirete päringute jaoks.. Ärge kasutage <link rel= "prefetch">kui ressurssi on vaja mõne sekundi jooksul. Sel juhul kasutage. <link rel= "preload">.

Üksikasjad

Valikuline märgend.Brauser ei pea järgima neid juhiseid, ta võib need ignoreerida, näiteks aeglase ühenduse korral.

Prioriteet Chrome'is.Chrome'is. <link rel= "prefetch"> tavaliselt täidetakse minimaalse prioriteediga (vt. täielikku prioriteetide tabelit), see tähendab, et pärast muu sisu laadimist.

preconnect

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

Brauser peab looma ühenduse, kui ta tõmbab ressursse uue kolmanda osapoole domeenilt. Näiteks, kui laadib Google Fontsi fonte, React'i CDN-ist või küsib JSON vastust API serverilt.

Uue ühenduse loomine võtab tavaliselt paar sada millisekundit. See toimub ühe korra, kuid võtab siiski aega. Kui te loote ühenduse eelnevalt, säästate aega ja laadite selle domeeni ressursse kiiremini.

Süntaks

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

href osutab domeeninimele, mille jaoks IP-aadress tuleb kindlaks teha. Saate esitada selle prefiksiga (https://domain.com) või ilma selleta (//domain.com).

Millal kasutada

Kasutage domeenide jaoks, mis võivad varsti vajalikud olla sealstyli, skripti või pildi laadimiseks, kuid te ei tea veel ressursi URL-i. Näiteks:

Teie rakendus asub aadressil my-app.com ja teeb AJAX-päringud api.my-app.com: te ei tea ette konkreetseid päringuid, kuna need tehakse dünaamiliselt JS-st. Siin on täiesti sobiv kasutada märgendit domeeniga eelneva ühenduse loomiseks.
Teie rakendus asub aadressil my-app.com ja kasutab Google Fontsi fonte. Need laaditakse kahes etapis: esmalt laaditakse CSS-fail domeenilt fonts.googleapis.com, seejärel küsib see fail fonte aadressilt fonts.gstatic.com.Te ei saa teada, milliseid konkreetseid fonte teilt fonts.gstatic.com. vajate, kuni ei ole laaditud CSS-faili, seega saame eelnevaid ühendusi luua ainult ette.

Kasutage seda märgendit, et veidi kiirendada mõnda kolmandat skripti või stiili eelneva ühenduse loomise kaudu.

Ärge üle pingutage.Ühenduse loomine ja hoidmine on kulukas kui kliendile, nii ka serverile. Kasutage seda märgendit maksimaalselt 4-6 domeeni jaoks.

Üksikasjad

Valikuline märgend.Brauser ei pea järgima seda juhist ja võib selle ignoreerida, näiteks kui on juba loodud liiga palju ühendusi või muudel juhtudel.

Mida hõlmab ühenduse loomise protsess.Selleks, et iga saidiga ühendust luua, peab brauser täitma järgmised toimingud:

DNS-i lahendamine.Leida IP-aadress serveri (216.58.215.78) jaoks, mis on antud domeeninime (google.com).
TCP käepigistus.Pakettide vahetus (kliendilt → serverile → kliendile), et alustada TCP-ühendust serveriga.
TLS käepigistus (ainult HTTPS-i saitidel).Kaks pakettide vahetuse ringi (kliendilt → serverile → kliendile → serverile → kliendile), et alustada turvalist TLS-seanssi.

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

dns-prefetch

<link rel= "dns-prefetch"> palub brauseril eelnevalt teostada DNS-i lahendamise domeenile, kui te varsti ühendate ja soovite kiirendada algset ühendust.

Brauser peab kindlaks tegema domeeni IP-aadressi, kui ta tõmbab mõned ressursid uue kolmanda osapoole domeenilt. Näiteks, laadides Google Fontsi fonte, Reacti CDN-ist või küsides JSON vastust API serverilt.

Iga uue domeeni jaoks võtab DNS-i kirje lahendamine tavaliselt aega 20−120 ms. See mõjutab ainult selle domeeni esimest ressursi laadimist, kuid siiski esitades viivituse. Kui lahendus täidetakse eelnevalt, säästame aega ja laadime ressursse kiiremini.

Süntaks

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

href osutab domeeninimele, mille jaoks IP-aadress tuleb kindlaks teha. Saate määrata selle prefiksiga (https://domain.com) või ilma selleta (//domain.com).

Millal kasutada

Kasutage domeenide jaoks, mis võivad varsti vajalikud olla ressursside laadimiseks, millest brauser ei tea ette. Näiteks:

Teie rakendus asub aadressil my-app.com ja teeb AJAX-päringud api.my-app.com: te ei tea ette konkreetseid päringuid, kuna need tehakse dünaamiliselt JS-st. Siin on täiesti sobiv kasutada märgendit domeeniga eelneva ühenduse loomiseks.
Teie rakendus asub aadressil my-app.com, ja kasutab Google Fontsi fonte. Need laaditakse kahes etapis: esmalt laaditakse CSS-fail domeenilt fonts.googleapis.com, seejärel küsib see fail fonte aadressilt fonts.gstatic.com.Te ei saa teada, milliseid konkreetseid fonte teilt fonts.gstatic.com. te vajate, kuni ei ole laaditud CSS-faili, seega saame eelnevaid ühendusi luua ainult ette.

Kasutage seda märgendit, et veidi kiirendada mõnda kolmandat skripti või stiili eelneva ühenduse loomise kaudu.

Pange tähele, et sarnased omadused on <link rel= "dns-prefetch"/> ja <link rel= "preconnect">. Nende kasutamine koos ühe domeeniga ei ole tavaliselt mõistlik: <link rel= "preconnect"> juba sisaldab. <link rel= "dns-prefetch"/> ja palju muud. See on põhjendatud kahes olukorras:

Soovite toetada vanu brauserite. <link rel= "dns-prefetch" /> toetatakse alates IE10 ja Safari 5. <link rel= "preconnect"> oli mõnda aega toetatud Chrome'is ja Firefoxis, kuid lisati Safari'sse alles versioonis 11.1 ja ei ole endiselt toetatud IE/Edge. Kui pead toetama neid brausereid, kasuta <link rel= "dns-prefetch" /> varuvõimalusena <link rel= "preconnect">.

Soovite kiirendada ühendust rohkem kui 4–6 domeeniga. Tagi <link rel= "preconnect"> ei soovitata kasutada rohkem kui 4–6 domeeni, kuna ühenduse loomine ja hoidmine on kulukas protsess. <link rel= "dns-prefetch" /> kasutab vähem ressursse, seega kasuta seda vajadusel.

Üksikasjad

Valikuline märgend.. Brauser ei ole kohustatud järgima seda juhist, seega võib see mitte teostada DNS-i lahendamist, kui lehel on palju selliseid tage või mõnes muus olukorras.

Mis on DNS. Igal serveril internetis on ainulaadne IP-aadress, mis näeb välja nagu 216.58.215.78. Brauseri aadressivälja sisestatakse tavaliselt veebisaidi nimi (nt google.com), ja DNS-serverid (domeeninime süsteem) seostavad selle serveri IP-aadressiga (216.58.215.78).

Brauser peab IP-aadressi määramiseks tegema päringu DNS-serverile. See võtab aega 20–120 ms, kui ühendate uue kolmanda osapoole domeeniga.

DNS-i vahemälu, kuigi mitte väga usaldusväärselt. Mõned opsüsteemid ja brauserid vahemäletavad DNS-päringud: see säästab aega korduvate päringute korral, kuid vahemälu pole usaldusväärne. Linuxis see tavaliselt ei toimi. Chrome'il on DNS-i vahemälu, kuid see kestab vaid minuti. Windows vahemäletab DNS-vastuseid viie päeva jooksul.

prerender

<link rel= "prerender"> palub brauseril laadida URL-i ja kuvada see nähtamatul vahekaardil. Kui kasutaja klõpsab lingil, peaks leht ilmuma kohe. See on kasulik, kui oled kindel, et kasutaja külastab kindlat lehte ja soovid selle kuvamist kiirendada.

Hoolimata selle sildi erakordsest tõhususest (või seetõttu), ei olnud see 2019. aastal <link rel= "prerender"> peamiseks brauserite poolt halvasti toetatud. Lisainformatsioon vaata. allpool.

Süntaks

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

href osutab URL-ile, mille jaoks soovite taustal renderdamist käivitada.

Millal kasutada

Kui oled tõeliselt kindel, et kasutaja liigub kindlale lehele. Kui sul on 'tunnel', kus 70% külastajatest lehelt A lähevad lehele B, siis <link rel= "prerender"> lehel A aitab väga kiiresti kuvada lehte B.

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

Üksikasjad

Valikuline märgend.. Brauser ei ole kohustatud järgima seda juhist ja võib selle ignoreerida, näiteks aeglases ühenduses või mäluruumi ebapiisava suuruse korral.

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

Firefox ja Safari ei toeta seda sildi üldse. See ei rikku spetsifikatsiooni, kuna brauserid ei ole kohustatud seda juhist järgima; kuid siiski on see kahju. Implementatsiooni tõrge Firefoxis oli avastatud seitsme aasta jooksul. On teateid, et Safari ei toeta ka seda sildi.

Kokkuvõte

Kasutage:

<link rel= "preload"> — kui sul on vaja ressurssi paari sekundi jooksul
<link rel= "prefetch"> — kui sul on vaja ressurssi järgmise lehe jaoks
<link rel= "preconnect"> — kui tead, et sul on peagi vaja ressurssi, kuid sa ei tea veel selle täpset URL-i
<link rel= "dns-prefetch"> — sarnaselt, kui tead, et sul on peagi vaja ressurssi, kuid sa ei tea veel selle täpset URL-i (vana brauserite jaoks)
<link rel= "prerender"> — kui oled kindel, et kasutajad liiguvad kindlale lehele, ja soovid selle kuvamist kiirendada

Allikas: habr.com