Există multe metode de îmbunătățire a performanței web. Una dintre ele este preîncărcarea conținutului necesar mai târziu. Prefetching CSS, randarea preliminară a întregii pagini sau rezolvarea numelui de domeniu. Facem totul dinainte, iar apoi afișăm rezultatul instantaneu! Sună bine.

Și mai bine, că este foarte simplu de implementat. Cinci etichete <link rel> dau browserului comanda de a efectua acțiuni preliminare:

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

Să vorbim pe scurt despre ce fac și când să le folosești.

Mergi la: preload · prefetch · preconnect · dns-prefetch · prerender

preload

<link rel="preload"> spune browserului să descarce și să cacheze resursa cât mai curând posibil (de exemplu, un script sau o foaie de stil). Este util atunci când resursa va fi necesară în câteva secunde după ce pagina a fost încărcată — și vrei să accelerezi procesul.

Browserul nu face nimic cu resursa după descărcare. Scripturile nu sunt executate, foile de stil nu sunt aplicate. Resursa este pur și simplu cache-ată și pusă la dispoziție imediat la cerere.

Sintaxa

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

href indică resursa pe care vrei să o descarci.

as poate fi orice fel de resursă care poate fi descărcată în browser:

style pentru foile de stil,
script pentru scripturi,
font pentru fonturi,
fetch pentru resurse descărcate folosind fetch() sau XMLHttpRequest,
lista completă vezi pe MDN.

Este important să specifici atributul as — ajută browserul să prioritizeze corect și să planifice descărcarea.

Când să folosești

Folosește preîncărcarea atunci când resursa va fi necesară foarte curând. De exemplu:

Fonturi personalizate dintr-un fișier extern:
```

<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
Implicit comic-sans.woff2 va începe să se încarce doar după ce a fost încărcată și analizată index.css. Pentru a nu aștepta atât de mult, poți încărca fontul mai devreme folosind <link rel="preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Dacă îți împărți stilurile conform abordării Critical CSS în două părți, critică (pentru randarea imediată) și non-critică:
```
<style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>
```
Cu această abordare, stilurile non-critice vor începe să se încarce doar atunci când JavaScript-ul este executat, ceea ce poate avea loc după câteva secunde de la randare. În loc să așteptați JS, folosiți <link rel="preload">, pentru a începe încărcarea mai devreme:
```
/* Stiluri critice încorporate */
```

Nu abuzati de preîncărcare. Dacă încărcați totul, site-ul nu va accelera magic, dimpotrivă, va împiedica browserul să planifice corect sarcinile.

Nu confundați cu prefetching-ul. Nu utilizați <link rel="preload">, dacă nu aveți nevoie de resursă imediat după încărcarea paginii. Dacă va fi necesară mai târziu, de exemplu, pentru pagina următoare, atunci folosiți <link rel= "prefetch">.

Detalii

Aceasta este o etichetă obligatorie pentru executarea de către browser (dacă o suportă), spre deosebire de toate celelalte etichete legate de preîncărcare. Browserul trebuie să încarce resursa specificată în <link rel="preload">. În alte cazuri, acesta poate ignora preîncărcarea, de exemplu, dacă lucrează pe o conexiune lentă.

Prioritățile. Browserul atribuie, în mod obișnuit, diferite priorități diferitelor resurse (stiluri, scripturi, fonturi etc.) pentru a încărca mai întâi cele mai importante resurse. În acest caz, browserul determină prioritatea pe baza atributului as. Pentru browserul Chrome, puteți consulta tabela completă a priorităților.

prefetch

<link rel= "prefetch"> cere browserului să încarce și să cacheze resursa (de exemplu, un script sau o foaie de stil) în fundal. Încărcarea se face cu o prioritate scăzută, astfel încât să nu interfereze cu resursele mai importante. Este util dacă resursa va fi necesară pe pagina următoare și doriți să o cacheați în avans.

Între timp, browserul nu face nimic cu resursa după descărcare. Scripturile nu sunt executate, foile de stil nu sunt aplicate. Resursa este pur și simplu cache-uită și oferită imediat la cerere.

Sintaxa

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

href indică resursa pe care vrei să o descarci.

as poate fi orice fel de resursă care poate fi descărcată în browser:

style pentru foile de stil,
script pentru scripturi,
font pentru fonturi,
fetch pentru resurse descărcate folosind fetch() sau XMLHttpRequest,
lista completă vezi pe MDN.

Este important să specifici atributul as — aceasta ajută browserul să stabilească corect prioritățile și să planifice încărcarea.

Când să folosești

Pentru a încărca resurse din alte pagini, dacă aveți nevoie de o resursă de pe o altă pagină și doriți să o preîncărcați pentru a accelera randarea acelei pagini. De exemplu:

Aveți un magazin online și 40% din utilizatori pleacă de pe pagina principală pe pagina produsului. Folosiți <link rel= "prefetch">, încărcând fișiere CSS și JS pentru redarea paginilor cu produsul.
Aveți o aplicație pe o singură pagină, iar paginile diferite încarcă pachete diferite. Când utilizatorul accesează o pagină, puteți încărca în avans pachetele pentru toate paginile la care aceasta se referă.

Este probabil ca această etichetă să poată fi utilizată în siguranță în orice volum. Browserele, de obicei, planifică prefetch cu prioritate mai mică, astfel încât să nu deranjeze pe nimeni. Ridicați-vă doar că se consumă traficul utilizatorului, ceea ce poate costa bani.

Nu pentru cereri urgente. Nu utilizați <link rel= "prefetch">, când resursa va fi necesară în câteva secunde. În acest caz, aplicați <link rel="preload">.

Detalii

O etichetă opțională. Browserul nu este obligat să urmeze această instrucțiune, poate să o ignore, de exemplu, pe un conexiune lentă.

Prioritate în Chrome. În Chrome <link rel= "prefetch"> de obicei se execută cu prioritate minimă (vezi tabela completă a priorităților), adică după ce a încărcat tot ce este altceva.

preconnect

<link rel= "preconnect"> solicită browserului să se conecteze în avans la domeniu atunci când doriți să accelerați stabilirea conexiunii în viitor.

Browserul ar trebui să stabilească o conexiune dacă extrage resurse de la un nou domeniu extern. De exemplu, dacă încarcă fonturi Google, React din CDN sau solicită un răspuns JSON de la serverul API.

Stabilirea unei noi conexiuni durează de obicei câteva sute de milisecunde. Aceasta se face o singură dată, dar, cu toate acestea, durează timp. Dacă ați stabilit conexiunea în avans, veți economisi timp și veți încărca mai repede resursele de la acest domeniu.

Sintaxa

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

href arată spre numele domeniului pentru care trebuie să determinați adresa IP. Poate fi specificat cu prefix (https://domain.com) sau fără acesta (//domain.com).

Când să folosești

Utilizați pentru domeniile care vor fi necesare în curând pentru a încărca de acolo un stil, script sau imagine importantă, dar încă nu știți URL-ul resursei. De exemplu:

Aplicația dvs. este găzduită pe my-app.com și face cereri AJAX către api.my-app.com: nu știți dinainte cererile specifice, deoarece acestea sunt făcute dinamic din JS. Aici utilizarea etichetei pentru conectarea în avans la domeniu este absolut adecvată.
Aplicația dvs. este găzduită pe my-app.com și utilizează fonturi Google Fonts. Acestea sunt încărcate în două etape: mai întâi, fișierul CSS din domeniul fonts.googleapis.com, apoi acest fișier solicită fonturile de la fonts.gstatic.com. Nu puteți ști care fișiere specifice de fonturi sunt fonts.gstatic.com vei avea nevoie, până nu încarci fișierul CSS, așa că din timp putem doar să stabilim o conexiune preliminară.

Folosește această etichetă pentru a accelera puțin un script sau un stil de terță parte datorită stabilirii conexiunii preliminare.

Nu abuza. Stabilirea și menținerea conexiunii este o operațiune costisitoare atât pentru client, cât și pentru server. Folosește această etichetă maximum pentru 4-6 domenii.

Detalii

O etichetă opțională. Browser-ul nu este obligat să urmeze această instrucțiune și poate ignora, de exemplu, dacă sunt deja stabilite multe conexiuni sau în alt caz.

Ce include procesul de conectare. Pentru a se conecta la fiecare site, browser-ul trebuie să execute următoarele acțiuni:

Rezolvarea DNS. Găsește adresa IP a serverului (216.58.215.78) pentru numele de domeniu specificat (google.com).
Handshake TCP. Schimb de pachete (client → server → client) pentru a iniția o conexiune TCP cu serverul.
Handshake TLS (numai pentru site-uri HTTPS). Două runde de schimb de pachete (client → server → client → server → client) pentru a iniția o sesiune TLS sigură.

Notă: HTTP/3 va îmbunătăți și accelera mecanismul de handshake, dar este încă departe.

dns-prefetch

<link rel= "dns-prefetch"> solicită browser-ului să rezolve anticipat DNS pentru domeniu, dacă te vei conecta curând la el și vrei să accelerezi conexiunea inițială.

Browser-ul trebuie să determine adresa IP a domeniului dacă va extrage resurse de la un nou domeniu terț. De exemplu, să încarce fonturi Google Fonts, React de la CDN sau să solicite un răspuns JSON de la serverul API.

Pentru fiecare nou domeniu, rezolvarea înregistrării DNS durează de obicei între 20-120 ms. Aceasta afectează doar încărcarea primei resurse de pe acest domeniu, dar reprezintă totuși o întârziere. Dacă rezolvăm DNS anticipat, economisim timp și vom încărca resursa mai repede.

Sintaxa

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

href indică numele domeniului pentru care trebuie să se stabilească adresa IP. Poate fi specificat cu prefix (https://domain.com) sau fără acesta (//domain.com).

Când să folosești

Utilizați pentru domeniile care vor fi necesare în curând pentru a încărca de acolo resurse de care browser-ul nu știe din timp. De exemplu:

Aplicația dvs. este găzduită pe my-app.com și face cereri AJAX către api.my-app.com: nu știți dinainte cererile specifice, deoarece acestea sunt făcute dinamic din JS. Aici utilizarea etichetei pentru conectarea în avans la domeniu este absolut adecvată.
Aplicația dvs. este găzduită pe my-app.com, și folosește fonturi Google Fonts. Acestea sunt încărcate în două etape: mai întâi se încarcă fișierul CSS de pe domeniu fonts.googleapis.com, apoi acest fișier solicită fonturile de la fonts.gstatic.com. Nu puteți ști care fișiere specifice de fonturi sunt fonts.gstatic.com vei avea nevoie, până nu încarci fișierul CSS, așa că din timp putem doar să stabilim o conexiune preliminară.

Folosește această etichetă pentru a accelera puțin un script sau un stil de terță parte datorită stabilirii conexiunii preliminare.

Observați caracteristicile similare pe <link rel= "dns-prefetch"/> și <link rel= "preconnect">. Utilizarea lor împreună pentru un singur domeniu de obicei nu are sens: <link rel= "preconnect"> deja include <link rel= "dns-prefetch"/> și multe altele. Acesta poate fi justificat în două cazuri:

Doriți să susțineți browserele mai vechi. <link rel= "dns-prefetch" /> susținută începând cu IE10 și Safari 5. <link rel= "preconnect"> a fost susținut o anumită perioadă în Chrome și Firefox, dar a fost adăugat în Safari doar în 11.1 și încă nu este susținut în IE/Edge. Dacă trebuie să susțineți aceste browsere, utilizați <link rel= "dns-prefetch" /> ca alternativă pentru <link rel= "preconnect">.

Doriți să accelerați conexiunea la mai mult de 4-6 domenii. Eticheta <link rel= "preconnect"> nu este recomandat să fie utilizată cu mai mult de 4-6 domenii, deoarece stabilirea și menținerea unei conexiuni este o operațiune costisitoare. <link rel= "dns-prefetch" /> consumă mai puține resurse, așa că folosiți-l dacă este necesar.

Detalii

O etichetă opțională. Browserul nu este obligat să urmeze această instrucțiune, așa că poate să nu efectueze rezolvarea DNS, de exemplu, dacă există multe astfel de etichete pe pagină sau în alt caz.

Ce este DNS. Fiecare server de pe internet are o adresă IP unică, care arată ca 216.58.215.78. În bara de adrese a browserului se introduce de obicei numele site-ului (de exemplu, google.com), iar serverele DNS (Domain Name System) îl corelează cu adresa IP a serverului (216.58.215.78).

Pentru a determina adresa IP, browserul trebuie să facă o solicitare către un server DNS. Aceasta durează 20-120 ms când se conectează la un domeniu străin nou.

DNS este cache-uit, deși nu foarte fiabil. Unele sistemele de operare și browserele cache-uiesc solicitările DNS: acest lucru economisește timp la solicitările repetate, dar nu trebuie să te bazezi pe cache. În Linux, de obicei nu funcționează deloc. Chrome are un cache DNS, dar acesta există doar timp de un minut. Windows cache-uiește răspunsurile DNS timp de cinci zile.

prerender

<link rel= "prerender"> cere browserului să încarce URL-ul și să-l afișeze pe un tab invizibil. Când utilizatorul face clic pe link, pagina ar trebui să se afișeze imediat. Acest lucru este util dacă ești sigur că utilizatorul va vizita o anumită pagină și dorești să accelerezi afișarea acesteia.

În ciuda eficienței excepționale a acestei etichete (sau din cauza ei), în 2019 <link rel= "prerender"> este slab susținut de browserele principale. Mai multe detalii la mai jos.

Sintaxa

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

href indică URL-ul pentru care dorești să rulezi randarea în fundal.

Când să folosești

Când ești cu adevărat sigur că utilizatorul va merge pe o anumită pagină. Dacă aveți un „tunel” prin care 70% din vizitatorii paginii A trec pe pagina B, atunci <link rel= "prerender"> pe pagina A va ajuta să afişați foarte rapid pagina B.

Nu abuza. Pre-randarea este extrem de costisitoare din punct de vedere al traficului și memoriei. Nu folosiți <link rel= "prerender"> mai mult de o pagină.

Detalii

O etichetă opțională. Browserul nu este obligat să urmeze această instrucțiune și o poate ignora, de exemplu, pe o conexiune lentă sau cu memorie insuficientă.

Pentru a economisi memorie Chrome nu efectuează o randare completă, iar ci doar o preîncărcare NoState. Aceasta înseamnă că Chrome încarcă pagina și toate resursele sale, dar nu face randarea și nu execută JavaScript.

Firefox și Safari nu suportă deloc acest etichetă. Nu încalcă specificația, deoarece browserele nu sunt obligate să execute această instrucțiune; dar este în continuare trist. Un bug de implementare în Firefox a fost raportat timp de șapte ani. Există informații că Safari de asemenea, nu suportă acest etichetă.

Rezumat

Utilizați:

<link rel="preload"> — când aveți nevoie de resursă în câteva secunde
<link rel= "prefetch"> — când aveți nevoie de resursă pe pagina următoare
<link rel= "preconnect"> — când știți că veți avea nevoie de resursă în curând, dar nu știți încă URL-ul complet
<link rel= "dns-prefetch"> — similar, când știți că veți avea nevoie de resursă în curând, dar nu știți încă URL-ul complet (pentru browserele mai vechi)
<link rel= "prerender"> — când sunteți sigur că utilizatorii vor naviga pe o anumită pagină și doriți să accelerați afișarea acesteia

Sursa: habr.com