Ir daudzi veidi, kā uzlabot tīmekļa veiktspēju. Viens no tiem ir satura iepriekšēja ielāde, kas būs nepieciešams vēlāk. CSS priekšapstrāde, pilnas lapas iepriekšēja renderēšana vai domēna vārda izšķirtspēja. Mēs visu darām iepriekš, un pēc tam uzreiz parādām rezultātu! Izklausās forši.

Vēl foršāk ir tas, ka tas ir ļoti vienkārši ieviests. Piecas atzīmes dodiet pārlūkprogrammai komandu, lai veiktu sākotnējās darbības:

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

Īsi paskaidrosim, ko viņi dara un kad tos izmantot.

Pāriet uz: pirmsielādēšana · iepriekšēja ielādēšana · pirms savienojuma · dns-ielādēt · priekšrenderēšana

pirmsielādēšana

<link rel= "preload"> liek pārlūkprogrammai pēc iespējas ātrāk ielādēt un saglabāt kešatmiņā resursu (piemēram, skriptu vai stila lapu). Tas ir noderīgi, ja resurss ir nepieciešams dažas sekundes pēc lapas ielādes — un jūs vēlaties paātrināt procesu.

Pēc ielādes pārlūkprogramma neko nedara ar resursu. Skripti netiek izpildīti, stila lapas netiek lietotas. Resurss tiek vienkārši saglabāts kešatmiņā un nekavējoties tiek darīts pieejams pēc pieprasījuma.

sintakse

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

href norāda uz resursu, kuru vēlaties lejupielādēt.

as var būt jebkas, ko var lejupielādēt pārlūkprogrammā:

style stila lapām,
script skriptiem,
font fontiem,
fetch resursiem, kas ielādēti, izmantojot fetch() vai XMLHttpRequest,
skatīt pilnu sarakstu MDN tīklā.

Ir svarīgi norādīt atribūtu as – tas palīdz pārlūkprogrammai pareizi noteikt prioritātes un ieplānot lejupielādes.

Kad lietot

Izmantojiet priekšielādēšanu, ja resurss būs nepieciešams tuvākajā nākotnē. Piemēram:

Nestandarta fonti no ārēja faila:
```

<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
Pēc noklusējuma comic-sans.woff2 sāks ielādēt tikai pēc lejupielādes un parsēšanas index.css. Lai izvairītos no tik ilgas gaidīšanas, varat lejupielādēt fontu agrāk, izmantojot <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```

Ja jūs nošķirat savus stilus atbilstoši pieejai Kritiskais CSS divās daļās: kritiskā (tūlītējai renderēšanai) un nekritiskajai:

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

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

Izmantojot šo pieeju, nekritisko stilu ielāde tiks sākta tikai tad, kad tiks palaists JavaScript, kas var notikt dažas sekundes pēc renderēšanas. Tā vietā, lai gaidītu JS izmantošanu <link rel= "preload">lai sāktu lejupielādi agrāk:

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

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

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

Pārmērīgi neizmantojiet iepriekšēju ielādi. Ielādējot visu pēc kārtas, vietne maģiski nepaātrināsies, gluži pretēji, tas neļaus pārlūkprogrammai pareizi plānot savu darbu.

Nejaukt ar iepriekšēju ielādi. Nelietojiet <link rel= "preload">, ja jums nav nepieciešams resurss uzreiz pēc lapas ielādes. Ja tas ir nepieciešams vēlāk, piemēram, nākamajai lapai, izmantojiet <link rel= "prefetch">.

Detaļas

Šī ir obligāta atzīme kas jāizpilda pārlūkprogrammai (ja tā to atbalsta), atšķirībā no visiem citiem tagiem kas saistīti ar iepriekšēju ielādi. Pārlūkprogrammai ir jālejupielādē norādītais resurss <link rel="preload">. Citos gadījumos tas var ignorēt iepriekšēju ielādi, piemēram, ja tas darbojas ar lēnu savienojumu.

Prioritātes. Pārlūkprogrammas parasti piešķir dažādas prioritātes dažādiem resursiem (stiliem, skriptiem, fontiem utt.), lai vispirms ielādētu svarīgākos resursus. Šajā gadījumā pārlūkprogramma nosaka prioritāti pēc atribūta as. Pārlūkam Chrome varat apskatīt pilna prioritāšu tabula.

iepriekšēja ielādēšana

<link rel= "prefetch"> prasa pārlūkprogrammai fonā lejupielādēt un saglabāt kešatmiņā resursu (piemēram, skriptu vai stila lapu). Ielāde notiek ar zemu prioritāti, tāpēc tā netraucē svarīgākiem resursiem. Tas ir noderīgi, ja resurss ir nepieciešams nākamajā lapā un vēlaties to iepriekš saglabāt kešatmiņā.

Arī šeit pārlūkprogramma pēc ielādes neko nedara ar resursu. Skripti netiek izpildīti, stila lapas netiek lietotas. Resurss tiek vienkārši saglabāts kešatmiņā un nekavējoties tiek darīts pieejams pēc pieprasījuma.

sintakse

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

href norāda uz resursu, kuru vēlaties lejupielādēt.

as var būt jebkas, ko var lejupielādēt pārlūkprogrammā:

style stila lapām,
script skriptiem,
font fontiem,
fetch resursiem, kas ielādēti, izmantojot fetch() vai XMLHttpRequest,
skatīt pilnu sarakstu MDN tīklā.

Ir svarīgi norādīt atribūtu as - tas palīdz pārlūkprogrammai pareizi noteikt prioritātes un ieplānot lejupielādes.

Kad lietot

Lai ielādētu resursus no citām lapām, ja jums ir nepieciešams resurss no citas lapas un vēlaties to iepriekš ielādēt, lai paātrinātu šīs lapas renderēšanu. Piemēram:

Jums ir tiešsaistes veikals, un 40% lietotāju atstāj produkta lapas sākumlapu. Izmantot <link rel= "prefetch">, ielādējot CSS un JS failus, lai renderētu produktu lapas.
Jums ir vienas lapas lietojumprogramma, un dažādas lapas ielādē dažādas pakotnes. Kad lietotājs apmeklē lapu, var iepriekš ielādēt pakotnes visām lapām, uz kurām tas ir saistīts.

Visticamāk, šo tagu var droši izmantot jebkādā mērā.. Pārlūkprogrammas parasti ieplāno sākotnējo ielādi ar zemāko prioritāti, tāpēc tas nevienu netraucē. Vienkārši paturiet prātā, ka tas patērē lietotāju trafiku, kas var maksāt naudu.

Nav paredzēts steidzamiem pieprasījumiem. Nelietojiet <link rel= "prefetch">, kad resurss ir nepieciešams dažu sekunžu laikā. Šajā gadījumā izmantojiet <link rel= "preload">.

Detaļas

Izvēles atzīme. Pārlūkprogrammai šī instrukcija nav jāievēro; tā var to ignorēt, piemēram, ja savienojums ir lēns.

Prioritāte pārlūkā Chrome. Pārlūkā Chrome <link rel= "prefetch"> parasti tiek izpildīts ar minimālu prioritāti (sk pilna prioritāšu tabula), tas ir, pēc visa pārējā ielādes.

pirms savienojuma

<link rel= "preconnect"> lūdz pārlūkprogrammai iepriekš izveidot savienojumu ar domēnu, ja vēlaties paātrināt savienojuma izveidi nākotnē.

Pārlūkprogrammai ir jāizveido savienojums, ja tā izgūst resursus no jauna trešās puses domēna. Piemēram, ja tas ielādē Google fontus, React fontus no CDN vai pieprasa JSON atbildi no API servera.

Jauna savienojuma izveide parasti aizņem dažus simtus milisekundes. Tas tiek darīts vienu reizi, bet joprojām prasa laiku. Ja esat izveidojis savienojumu iepriekš, ietaupīsiet laiku un ātrāk lejupielādēsiet resursus no šī domēna.

sintakse

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

href norāda domēna nosaukumu, kuram vēlaties noteikt IP adresi. Var norādīt ar prefiksu (https://domain.com) vai bez tā (//domain.com).

Kad lietot

Izmantojiet domēniem, kas drīzumā būs nepieciešami lai no turienes lejupielādētu svarīgu stilu, skriptu vai attēlu, taču jūs vēl nezināt resursa URL. Piemēram:

Jūsu pieteikums tiek mitināts vietnē my-app.com un veic AJAX pieprasījumus api.my-app.com: Jūs iepriekš nezināt konkrētus pieprasījumus, jo tie tiek veikti dinamiski no JS. Šeit ir diezgan pareizi izmantot tagu, lai iepriekš izveidotu savienojumu ar domēnu.
Jūsu pieteikums tiek mitināts vietnē my-app.com un izmanto Google fontus. Tie tiek lejupielādēti divos posmos: vispirms no domēna tiek lejupielādēts CSS fails fonts.googleapis.com, tad šis fails pieprasa fontus ar fonts.gstatic.com. Jūs nevarat zināt, no kuriem konkrētiem fontu failiem ir fonts.gstatic.com jums būs nepieciešams līdz CSS faila ielādei, tāpēc mēs varam tikai iepriekš izveidot savienojumu.

Izmantojiet šo tagu, lai nedaudz paātrinātu trešās puses skriptu vai stilu iepriekš izveidota savienojuma dēļ.

Nelietojiet pārmērīgi. Savienojuma izveide un uzturēšana ir dārga darbība gan klientam, gan serverim. Izmantojiet šo tagu ne vairāk kā 4–6 domēniem.

Detaļas

Izvēles atzīme. Pārlūkam nav jāievēro šī instrukcija, un tā var to ignorēt, piemēram, ja jau ir izveidoti daudzi savienojumi vai kādā citā gadījumā.

Ko ietver savienojuma process?. Lai izveidotu savienojumu ar katru vietni, pārlūkprogrammai ir jāveic šādas darbības:

DNS izšķirtspēja. Atrast servera IP adresi (216.58.215.78) norādītajam domēna vārdam (google.com).
TCP rokasspiediens. Apmaiņas paketes (klients → serveris → klients), lai uzsāktu TCP savienojumu ar serveri.
TLS rokasspiediens (tikai HTTPS vietnēm). Divas pakešu apmaiņas kārtas (klients → serveris → klients → serveris → klients), lai uzsāktu drošu TLS sesiju.

Piezīme: HTTP/3 uzlabos un paātrinās rokasspiediena mehānismu, taču tas vēl ir tālu.

dns-ielādēt

<link rel= "dns-prefetch"> prasa pārlūkprogrammai iepriekš veikt domēna DNS izšķirtspēju, ja drīz izveidosit savienojumu ar to un vēlaties paātrināt sākotnējo savienojumu.

Pārlūkprogrammai ir jānosaka domēna IP adrese, ja tā izgūs resursus no jauna trešās puses domēna. Piemēram, Google fontu ielāde, React fonti no CDN vai JSON atbildes pieprasīšana no API servera.

Katram jaunam domēnam DNS ieraksta izšķirtspēja parasti aizņem apmēram 20–120 ms. Tas ietekmē tikai pirmā resursa ielādi no dotā domēna, taču joprojām rada aizkavi. Ja DNS atrisināšanu veiksim iepriekš, ietaupīsim laiku un ātrāk ielādēsim resursu.

sintakse

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

href norāda domēna nosaukumu, kuram vēlaties iestatīt IP adresi. Var norādīt ar prefiksu (https://domain.com) vai bez tā (//domain.com).

Kad lietot

Izmantojiet domēniem, kas drīzumā būs nepieciešami lai lejupielādētu no turienes resursus, par kuriem pārlūkprogramma iepriekš nezina. Piemēram:

Jūsu pieteikums tiek mitināts vietnē my-app.com un veic AJAX pieprasījumus api.my-app.com: Jūs iepriekš nezināt konkrētus pieprasījumus, jo tie tiek veikti dinamiski no JS. Šeit ir diezgan pareizi izmantot tagu, lai iepriekš izveidotu savienojumu ar domēnu.
Jūsu pieteikums tiek mitināts vietnē my-app.com, un izmanto Google fontus. Tie tiek lejupielādēti divos posmos: vispirms no domēna tiek lejupielādēts CSS fails fonts.googleapis.com, tad šis fails pieprasa fontus ar fonts.gstatic.com. Jūs nevarat zināt, no kuriem konkrētiem fontu failiem ir fonts.gstatic.com jums tas būs nepieciešams līdz CSS faila ielādei, tāpēc mēs varam izveidot tikai iepriekšēju savienojumu.

Izmantojiet šo tagu, lai nedaudz paātrinātu trešās puses skriptu vai stilu iepriekš izveidota savienojuma dēļ.

Lūdzu, ņemiet vērā līdzīgas īpašības <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Parasti nav jēgas tos izmantot kopā vienam domēnam: <link rel= "preconnect"> jau ietver <link rel= "dns-prefetch"/> un daudz vairāk. To var attaisnot divos gadījumos:

Vai vēlaties atbalstīt vecākas pārlūkprogrammas?. <link rel= "dns-prefetch" /> atbalsta kopš IE10 un Safari 5. <link rel= "preconnect"> kādu laiku tika atbalstīts pārlūkprogrammās Chrome un Firefox, taču pārlūkprogrammai Safari tika pievienots tikai 11.1 un joprojām netiek atbalstīts IE/Edge. Ja jums ir jāatbalsta šīs pārlūkprogrammas, izmantojiet <link rel= "dns-prefetch" /> kā rezerves opcija <link rel= "preconnect">.

Jūs vēlaties paātrināt savienojumus ar vairāk nekā 4-6 domēniem. Tag <link rel= "preconnect"> Nav ieteicams lietot ar vairāk nekā 4-6 domēniem, jo savienojuma izveide un uzturēšana ir dārga darbība. <link rel= "dns-prefetch" /> patērē mazāk resursu, tāpēc izmantojiet to, ja nepieciešams.

Detaļas

Izvēles atzīme. Pārlūkam nav jāievēro šī instrukcija, tāpēc tā var neveikt DNS izšķirtspēju, piemēram, ja lapā ir daudz šādu tagu vai kādā citā gadījumā.

Kas ir DNS. Katram serverim internetā ir unikāla IP adrese, kas izskatās kā 216.58.215.78. Vietnes nosaukums parasti tiek ievadīts pārlūkprogrammas adreses joslā (piemēram, google.com), un DNS (domēna nosaukumu sistēma) serveri to saskaņo ar servera IP adresi (216.58.215.78).

Lai noteiktu IP adresi, pārlūkprogrammai ir jājautā DNS serverim. Izveidojot savienojumu ar jaunu trešās puses domēnu, tas aizņem 20–120 ms.

DNS ir kešatmiņā, lai gan ne pārāk uzticamiDažas operētājsistēmas un pārlūkprogrammas kešatmiņā saglabā DNS pieprasījumus: tas ietaupīs laiku, atkārtojot pieprasījumus, taču uz kešatmiņu nevar paļauties. Linux Parasti tas vispār nedarbojas. Pārlūkam Chrome ir DNS kešatmiņa, taču tā darbojas tikai minūti. Windows Kešatmiņā saglabā DNS atbildes piecas dienas.

priekšrenderēšana

<link rel= "prerender"> prasa pārlūkprogrammai lejupielādēt URL un parādīt to neredzamā cilnē. Kad lietotājs noklikšķina uz saites, lapa nekavējoties tiek parādīta. Tas ir noderīgi, ja esat pārliecināts, ka lietotājs apmeklēs noteiktu lapu un vēlaties paātrināt tās attēlošanu.

Neskatoties uz šīs atzīmes izcilo efektivitāti (vai tāpēc), 2019. gadā <link rel= "prerender"> vāji atbalstīts lielākajās pārlūkprogrammās. Skatīt sīkāku informāciju. zemāk.

sintakse

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

href norāda uz URL, kuru vēlaties sākt renderēt fonā.

Kad lietot

Kad esat patiešām pārliecināts, ka lietotājs dosies uz noteiktu lapu. Ja jums ir “tunelis”, caur kuru 70% lapas A apmeklētāju dodas uz lapu B, tad <link rel= "prerender"> lapā A palīdzēs ļoti ātri parādīt lapu B.

Nelietojiet pārmērīgi. Iepriekšēja renderēšana ir ārkārtīgi dārga joslas platuma un atmiņas ziņā. Nelietojiet <link rel= "prerender"> vairāk nekā vienai lapai.

Detaļas

Izvēles atzīme. Pārlūkprogrammai šī instrukcija nav jāievēro, un tā var to ignorēt, piemēram, ja savienojums ir lēns vai ja nav pietiekami daudz brīvas atmiņas.

Lai saglabātu atmiņu Chrome neveic pilnu renderēšanuUn tikai priekšielādēt NoState. Tas nozīmē, ka Chrome ielādē lapu un visus tās resursus, bet nerenderē un neizpilda JavaScript.

Firefox un Safari šo tagu neatbalsta vispār. Tas nepārkāpj specifikāciju, jo pārlūkprogrammām šī instrukcija nav jāievēro; bet tomēr skumji. Ieviešanas kļūda Firefox ir atvērts septiņus gadus. Ir ziņojumi, ka Safari neatbalsta arī šo tagu.

Kopsavilkums

Izmantojiet:

<link rel= "preload"> - kad jums ir nepieciešams resurss dažu sekunžu laikā
<link rel= "prefetch"> - kad jums ir nepieciešams resurss nākamajā lapā
<link rel= "preconnect"> - ja zināt, ka jums drīz būs nepieciešams resurss, bet vēl nezināt tā pilno URL
<link rel= "dns-prefetch"> - līdzīgi, ja zināt, ka jums drīz būs nepieciešams resurss, bet vēl nezināt tā pilno URL (vecākām pārlūkprogrammām)
<link rel= "prerender"> — ja esat pārliecināts, ka lietotāji dosies uz noteiktu lapu, un vēlaties paātrināt tās attēlošanu

Avots: www.habr.com