Jah Palju viise veebitootlikkuse parandamiseks. Üks neist on sisu eelkoormamine, mis on vajalik hiljem. CSS-i eelteenindamine, kogu lehe eelrenderdamine või domeeninime lahendamine. Teeme kõik ette, et näidata tulemust kohe! Kõlab ägedalt.

Veelgi ägedam on see, et see on väga lihtne ellu viia. Viis märgendit annavad brauserile käskluse eelteenindamiseks:

Räägime lühidalt, mida need teevad ja millal neid kasutada.

Liikuge edasi: preload · prefetch · preconnect · dns-prefetch · prerender

preload

<link rel= "preload"> ütleb brauserile, et laadida ja mälustada ressurss (nt skript või stiilileht) võimalikult kiiresti. See on kasulik, kui ressursse vajatakse paar sekundit pärast lehe laadimist — ja soovite protsessi kiirendada.

Brauser ei tee ressursiga midagi pärast laadimist. Skripte ei täideta, stiililehti ei rakendata. Ressursse lihtsalt mälustatakse ja antakse kohe nõudmisel.

Süntaks

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

href näitab ressursi asukohta, mida soovite alla laadida.

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

style stiililehtede jaoks,
script skriptide jaoks,
font fontide jaoks,
fetch resursside jaoks, mis on alla laaditud kasutades fetch() või käivitatakse,
täielik nimekiri vt. MDN-l.

Oluline on määrata atribuut as — see aitab brauseril õigesti prioriteete seadistada ja laadimist planeerida.

Millal kasutada

Kasutage eelkoormamist, kui ressursse vajatakse kohe. Näiteks:

Kohandatud fondid välisest failist:
```
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
Vaikimisi comic-sans.woff2 hakkab laadima alles pärast laadimist ja tõlgendamist index.css. Et mitte oodata nii kaua, saab fondi laadida varem kasutades <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Kui jagate oma stiile lähenemise alusel Kriitiline CSS kahte ossa, kriitiline (vahetuks renderdamiseks) ja mitte kriitiline:
```
/* Inline kriitilised stiilid */
```
Selle lähenemisega hakkavad mitte-kriitilised stiilid laadima alles pärast JavaScripti käivitamist, mis võib juhtuda mitu sekundit pärast renderdamist. Kasutage <link rel= "preload">, et alustada laadimist varem:
```
/* Manustatud kriitilised stiilid */
```

Ärge kuritarvitage eelkoormamist. Kui laadite kõike järele, ei kiirenda see veebilehte maagiliselt, vastupidi, see takistab brauserit töö korralikult planeerimast.

Ärge segage seda eelkoormamisega. Ärge kasutage <link rel= "preload">, kui te ei vaja ressurssi kohe pärast lehe laadimist. Kui see on hiljem vajalik, näiteks järgmisele leheküljele, siis kasutage <link rel= "prefetch">.

Üksikasjad

See on kohustuslik silt brauseri töötlemiseks (kui see seda toetab), erinevalt kõigist muudest siltidest , mis on seotud eelkoormamisega. Brauser peab laadima ressursi, mis on näidatud <link rel="preload">. Teistel juhtudel võib see eelkoormamise tähelepanuta jätta, näiteks kui ta töötab aeglasel ühendusel.

Prioriteedid. Erinevatele ressurssidele (stiilid, skriptid, fondid jne) määravad brauserid tavaliselt erinevad prioriteedid, et esmalt laadida kõige olulisemad ressursid. Antud juhul määrab brauseri prioriteedi atribuut as. Chrome'i brauseris 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, mistõttu see ei sega olulisemaid ressursse. See on kasulik, kui ressurssi on järgmise lehe peal vaja ja soovite selle eelnevalt vahemällu salvestada.

Siin ei tee brauser pärast laadimist ressursiga midagi. Skripte ei käivitata, stiililehti ei rakendata. Ressurss salvestatakse lihtsalt vahemällu ja antakse kohe pärast nõudmist.

Süntaks

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

href näitab ressursi asukohta, mida soovite alla laadida.

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

style stiililehtede jaoks,
script skriptide jaoks,
font fontide jaoks,
fetch resursside jaoks, mis on alla laaditud kasutades fetch() või käivitatakse,
täielik nimekiri vt. MDN-l.

Oluline on määrata atribuut as — see aitab brauseril õigesti prioritiseerida ja laadimist planeerida.

Millal kasutada

Teistele lehtedele ressursside laadimiseks, kui teil on vajalik ressurss teisest lehelt, ja soovite eelnevalt laadida, et seejärel selle lehe renderdamist kiirendada. Näiteks:

Teil on veebipood ja 40% kasutajatest lahkub avalehelt tootelehe poole. Kasutage <link rel= "prefetch">, laadides CSS- ja JS-faile toote lehtede renderdamiseks.
Teie rakendus on ühe lehega ja erinevad lehed laadivad erinevaid pakette. Kui kasutaja külastab teatud lehte, saate eelnevalt laadida pakette kõigilt lehtedelt, millele see viitab.

Tõenäoliselt saab seda silti ohutult kasutada mis tahes mahus. Brauserid plaanivad tavaliselt prefetch'i väikese prioriteediga, nii et see ei häiri kedagi. Pea siiski meeles, et see kasutab kasutaja andmeid, mis võivad olla kulukad.

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

Üksikasjad

Valikuline silt. Brauser ei ole kohustatud järgima seda juhist; ta võib selle näiteks aeglases ühenduses ignoreerida.

Prioriteet Chrome'is. Chrome <link rel= "prefetch"> tavaliselt täidab minimaalsete prioriteetidega (vt. täielikku prioriteetide tabelit), st pärast kogu muu laadimist.

preconnect

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

Brauser peaks ühenduse looma, kui ta laadib mingeid ressursse uue kolmanda osapoole domeenilt. Näiteks kui ta laadib Google Fontse, React'i CDN-ilt või küsib JSON vastust API-serverilt.

Uue ühenduse loomine võtab tavaliselt mitusada millisekundit. Seda tehakse üks kord, kuid see võtab ikkagi aega. Kui olete eelnevalt ühenduse loonud, siis säästate aega ja laadite selle domeeni ressursse kiiremini.

Süntaks

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

href näitab domeeninime, mille jaoks tuleb määrata IP-aadress. Seda võib anda eelneva tähisega (https://domain.com) või ilma selleta (//domain.com).

Millal kasutada

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

Teie rakendus asub my-app.com ja teeb AJAX-päringuid api.my-app.com: te ei tea ette täpseid päringuid, kuna need tehakse dünaamiliselt JS-ist. Siin on täiesti kohane kasutada sildi kasutamist domeeniga eelnevalt ühendamiseks.
Teie rakendus asub my-app.com ja kasutab Google Fontse. Need laaditakse kahes etapis: kõigepealt laaditakse CSS-fail domeenilt fonts.googleapis.com, seejärel küsib see fail fonte fonts.gstatic.com. Te ei saa teada, millised konkreetsed fonte failid on fonts.gstatic.com te peate, kuni laadite CSS-faili, seega saame enne vaid eelühenduse seadistada.

Kasutage seda sildi, et veidi kiirendada mõnda kolmandat osalist skripti või stiili. eelnevalt ühenduse seadistamise kaudu.

Ärge kuritarvitage.Ühenduse seadistamine ja hoidmine on kulukas nii kliendile kui ka serverile. Kasutage seda silti maksimaalselt 4-6 domeeni jaoks.

Üksikasjad

Valikuline siltBrauserid ei pruugi järgida seda juhist ja võivad selle ignoreerida, näiteks kui on juba loodud palju ühendusi või mõnes muus olukorras.

Mida hõlmab ühenduse loomise protsess.Küljest ühenduse loomiseks peab brauser tegema järgmised toimingud:

DNS-i lahendamine.Leidke serveri IP-aadress (216.58.215.78) määratud domeeninime jaoks (google.com).
TCP-käepigistus.Pakettide vahetus (kliendist → serverisse → kliendisse), et alustada TCP-ühendust serveriga.
TLS-i käepigistus (ainult HTTPS-i saitide jaoks).Kaks ringi paketivahetust (kliendist → serverisse → klient → serverisse → kliendisse), et alustada turvalist TLS-seanssi.

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

dns-prefetch

<link rel= "dns-prefetch"> palub brauseril eelnevalt domeeni DNS-i lahendada, kui kavatsete sellele peagi ühenduda ja soovite algset ühendust kiirendada.

Brauser peab määrama domeeni IP-aadressi, kui see tõmbab uusi ressursse kolmandast osalisest domeenist. Näiteks Google Fonts'i fonte, React'i CDN-ist või küsides JSON-vastust API-serverilt.

Iga uue domeeni DNS-kirje lahendamine kestab tavaliselt umbes 20–120 ms. See mõjutab vaid selle domeeni esimest ressursi laadimist, kuid esindab ikkagi viivitust. Kui DNS lahendatakse ette, siis säästame aega ja laadime ressursi kiiremini.

Süntaks

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

href osutab domeeninimele, mille jaoks tuleb määrata IP-aadress. Saate anda koos eellühi (https://domain.com) või ilma selleta (//domain.com).

Millal kasutada

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

Teie rakendus asub my-app.com ja teeb AJAX-päringuid api.my-app.com: te ei tea ette täpseid päringuid, kuna need tehakse dünaamiliselt JS-ist. Siin on täiesti kohane kasutada sildi kasutamist domeeniga eelnevalt ühendamiseks.
Teie rakendus asub my-app.com, ja kasutab Google Fonts'i fonte. Need laaditakse kahes etapis: esmalt laaditakse CSS-fail domeenilt. fonts.googleapis.com, seejärel küsib see fail fonte fonts.gstatic.com. Te ei saa teada, millised konkreetsed fonte failid on fonts.gstatic.com te peate, kuni laadite CSS-faili, seega saame enne vaid eelühenduse seadistada.

Kasutage seda sildi, et veidi kiirendada mõnda kolmandat osalist skripti või stiili. eelnevalt ühenduse seadistamise kaudu.

Pange tähele sarnaseid omadusi. <link rel= "dns-prefetch"/> ja <link rel= "preconnect">. Ühes domääris nende kasutamine tavaliselt ei ole mõistlik: <link rel= "preconnect"> juba sisaldab <link rel= "dns-prefetch"/> ja palju muud. Seda võib õigustada kahes olukorras:

Soovite toetada vanu brausereid. <link rel= "dns-prefetch" /> toetatud 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 toeta endiselt IE/Edge. Kui vajate nende brauserite toetamist, kasutage <link rel= "dns-prefetch" /> varuvõttena <link rel= "preconnect">.

Soovite kiirendada ühendust enam kui 4-6 domeeniga. Sildi <link rel= "preconnect"> kasutamine rohkem kui 4-6 domeeni puhul ei ole soovitatav, kuna ühenduse loomine ja toetamine on kulukas operatsioon. <link rel= "dns-prefetch" /> kasutab vähem ressursse, seega kasutage seda vajadusel.

Üksikasjad

Valikuline silt. Brauseril ei ole kohustust järgida seda juhist, seega ei pruugi see DNS-i lahendamist teostada, näiteks juhul, kui lehel on palju selliseid silte või mingil muul juhul.

Mis on DNS. Igal serveril internetis on ainulaadne IP-aadress, mis näeb välja nagu 216.58.215.78. Brauserid sisestavad tavaliselt aadressiribale saidi nime (nt google.com), ja DNS-serverid (Domeeninime süsteem) seostavad selle serveri IP-aadressiga (216.58.215.78).

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

DNS on vahemälus, kuigi mitte väga usaldusväärselt. Mõned opsüsteemid ja brauserid salvestavad DNS-i päringud: see säästab aega korduvate päringute puhul, kuid vahemälule ei saa toetuda. Linuxis see tavaliselt ei tööta. Chrome'il on DNS-i vahemälu, kuid see kehtib ainult minuti. Windows salvestab DNS-i vastuseid viis päeva.

prerender

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

Hoolimata selle sildi erakordsest tõhususest (või just selle tõttu), on 2019. aastal <link rel= "prerender"> peamiselt brauserites halvasti toetatud. Lisateavet leiate allpool.

Süntaks

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

href näitab URL-i, mille jaoks soovite renderdamise käivitada taustal.

Millal kasutada

Kui olete tõeliselt kindel, et kasutaja läheb teatud leheleKui teil on "tunnel", mille kaudu 70% lehe A külastajatest liiguvad lehele B, siis <link rel= "prerender"> aitab lehe A peal lehe B kiiresti kuvada.

Ärge kuritarvitage.Eelrenderdamine on väga kulukas liikluse ja mälu osas. Ärge kasutage <link rel= "prerender"> rohkem kui ühe lehe jaoks.

Üksikasjad

Valikuline siltBrauser ei ole kohustatud seda juhist järgima ja võib selle näiteks aeglases ühenduses või vabade mälukohtade puudumise tõttu tähelepanuta jätta.

Mälu säästmise huvides Chrome ei tee täiendavat renderdamist, vaid ainult NoState eelkoormust. See tähendab, et Chrome laadib lehe ja kõik selle ressursid, kuid ei tee renderdamist ega täida JavaScripti.

Firefox ja Safari ei toeta seda sildi üldse. See ei riku spetsifikatsiooni, kuna brauserid ei ole kohustatud seda juhist täitma; kuid see on siiski kahetsusväärne. Firefoxi teostuse bug oli avastatud seitsme aasta jooksul. On teateid, et Safari ka ei toeta seda sildi.

Elulookirjeldus

Kasutage:

<link rel= "preload"> — kui vajate ressurssi mõne sekundi jooksul
<link rel= "prefetch"> — kui vajate ressurssi järgmisele lehele
<link rel= "preconnect"> — kui teate, et vajate varsti ressurssi, kuid ei tea veel selle täielikku URL-i
<link rel= "dns-prefetch"> — sarnaselt, kui teate, et vajate varsti ressurssi, kuid ei tea veel selle täielikku URL-i (vana brauseri jaoks)
<link rel= "prerender"> — kui olete kindel, et kasutajad liiguvad kindlale lehele ja soovite kiirendada selle kuvamist

Allikas: habr.com