ProHoster > BLOG > administrare > Preîncărcare, preluare anticipată și alte etichete

Preîncărcare, preluare anticipată și alte etichete

Există multe moduri de a îmbunătăți performanța web. Una dintre ele este preîncărcarea conținutului care va fi necesar mai târziu. Preprocesare CSS, pre-randare a paginii întregi sau rezoluție nume de domeniu. Facem totul în avans și apoi afișăm instantaneu rezultatul! Suna bine.

Ceea ce este și mai tare este că este implementat foarte simplu. Cinci etichete dați browserului o comandă pentru a efectua acțiuni preliminare:

<link rel="prefetch" href="/ro/style.css" as="style" />
<link rel="preload" href="/ro/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ă explicăm pe scurt ce fac și când să le folosim.

Sari la: preîncărcare · prefetch · preconectare · dns-prefetch · predare

preîncărcare

<link rel= "preload"> spune browserului să încarce și să memoreze în cache o resursă (cum ar fi un script sau o foaie de stil) cât mai curând posibil. Acest lucru este util atunci când este necesară o resursă la câteva secunde după încărcarea paginii - și doriți să accelerați procesul.

Browserul nu face nimic cu resursa după încărcare. Scripturile nu sunt executate, nu sunt aplicate foile de stil. Resursa este pur și simplu stocată în cache și imediat disponibilă la cerere.

sintaxă

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

href indică resursa pe care doriți să o descărcați.

as poate fi orice ce poate fi descărcat în browser:

  • style pentru foi de stil,
  • script pentru scenarii,
  • font pentru fonturi,
  • fetch pentru resursele încărcate folosind fetch() sau XMLHttpRequest,
  • vezi lista completa pe MDN.

Este important să specificați atributul as – acest lucru ajută browserul să prioritizeze și să programeze corect descărcările.

Când să folosiți

Utilizați preîncărcarea atunci când resursa este necesară în viitorul foarte apropiat. De exemplu:

  • Fonturi non-standard dintr-un fișier extern: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    În mod implicit comic-sans.woff2 va începe să se încarce numai după descărcare și analizare index.css. Pentru a evita așteptarea atât de mult, puteți descărca fontul mai devreme folosind <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Dacă vă separați stilurile în funcție de abordare CSS critic în două părți, critice (pentru randare imediată) și non-critice: 
    <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 numai atunci când JavaScript rulează, ceea ce se poate întâmpla la câteva secunde după randare. În loc să așteptați, folosiți JS <link rel= "preload">pentru a începe descărcarea mai devreme:

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

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

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

Nu folosiți prea mult preîncărcarea. Dacă încărcați totul la rând, site-ul nu se va accelera în mod magic; dimpotrivă, va împiedica browserul să-și planifice corect funcționarea.

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

detalii

Aceasta este o etichetă obligatorie să fie executat de browser (dacă îl acceptă), spre deosebire de toate celelalte etichete legate de preîncărcare. Browserul trebuie să descarce resursa specificată în <link rel="preload">. În alte cazuri, poate ignora preîncărcarea, de exemplu dacă rulează pe o conexiune lentă.

Priorități. Browserele atribuie, de obicei, 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 după atribut as. Pentru browserul Chrome, puteți să vă uitați la tabel complet de priorități.

Preîncărcare, preluare anticipată și alte etichete

prefetch

<link rel= "prefetch"> solicită browserului să descarce și să memoreze în cache o resursă (cum ar fi un script sau o foaie de stil) în fundal. Încărcarea are loc cu prioritate scăzută, astfel încât să nu interfereze cu resurse mai importante. Acest lucru este util dacă resursa este necesară pe pagina următoare și doriți să o păstrați în cache în avans.

Și aici, browserul nu face nimic cu resursa după încărcare. Scripturile nu sunt executate, nu sunt aplicate foile de stil. Resursa este pur și simplu stocată în cache și imediat disponibilă la cerere.

sintaxă

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

href indică resursa pe care doriți să o descărcați.

as poate fi orice ce poate fi descărcat în browser:

  • style pentru foi de stil,
  • script pentru scenarii,
  • font pentru fonturi,
  • fetch pentru resursele încărcate folosind fetch() sau XMLHttpRequest,
  • vezi lista completa pe MDN.

Este important să specificați atributul as - acest lucru ajută browserul să prioritizeze și să programeze corect descărcările.

Când să folosiți

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

  • Ai un magazin online, iar 40% dintre utilizatori părăsesc pagina de start pentru pagina produsului. Utilizare <link rel= "prefetch">, încărcând fișiere CSS și JS pentru a reda paginile de produse.
  • Aveți o aplicație cu o singură pagină și pagini diferite încarcă pachete diferite. Când un utilizator vizitează o pagină, pachetele pentru toate paginile la care se leagă pot fi preîncărcate.

Este probabil ca această etichetă să poată fi utilizată în siguranță în orice măsură.. Browserele programează de obicei preluare cu cea mai mică prioritate, așa că nu deranjează pe nimeni. Rețineți doar că consumă trafic de utilizatori, care poate costa bani.

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

detalii

Etichetă opțională. Browserul nu este obligat să urmeze această instrucțiune; o poate ignora, de exemplu, la o conexiune lentă.

Prioritate în Chrome. În Chrome <link rel= "prefetch"> de obicei executat cu prioritate minimă (vezi tabel complet de priorități), adică după încărcarea tuturor celorlalte.

preconectare

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

Browserul trebuie să stabilească o conexiune dacă preia orice resurse de pe un nou domeniu terță parte. De exemplu, dacă încarcă fonturi Google, fonturi React dintr-un CDN sau solicită un răspuns JSON de la un server API.

Stabilirea unei noi conexiuni durează de obicei câteva sute de milisecunde. Se face o dată, dar totuși necesită timp. Dacă ați stabilit o conexiune în avans, veți economisi timp și veți descărca resurse de pe acest domeniu mai rapid.

sintaxă

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

href indică numele de domeniu pentru care doriți să determinați adresa IP. Poate fi specificat cu un prefix (https://domain.com) sau fără ea (//domain.com).

Când să folosiți

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

  • Aplicația dvs. este găzduită pe my-app.com și face cereri AJAX către api.my-app.com: Nu cunoașteți interogările specifice în avans, deoarece acestea sunt făcute dinamic din JS. Aici este destul de potrivit să folosiți o etichetă pentru a vă preconecta la domeniu.
  • Aplicația dvs. este găzduită pe my-app.com și utilizează fonturi Google. Acestea sunt descărcate în doi pași: în primul rând, fișierul CSS este descărcat de pe domeniu fonts.googleapis.com, atunci acest fișier solicită fonturi cu fonts.gstatic.com. Nu puteți ști din ce fișiere de font specifice provin fonts.gstatic.com veți avea nevoie până când încărcați fișierul CSS, așa că putem face doar o conexiune preliminară în prealabil.

Folosiți această etichetă pentru a accelera un pic un script sau un stil terță parte datorită conexiunii prestabilite.

Nu folosiți în exces. Stabilirea și menținerea unei conexiuni este o operațiune costisitoare atât pentru client, cât și pentru server. Utilizați această etichetă pentru maximum 4-6 domenii.

detalii

Etichetă opțională. Browserul nu este obligat să urmeze această instrucțiune și o poate ignora, de exemplu, dacă au fost deja stabilite multe conexiuni sau într-un alt caz.

Ce include procesul de conectare?. Pentru a se conecta la fiecare site, browserul trebuie să facă următoarele:

  • Rezoluție DNS. Găsiți adresa IP a serverului (216.58.215.78) pentru numele de domeniu specificat (google.com).
  • Strângere de mână TCP. Schimbați pachete (client → server → client) pentru a iniția o conexiune TCP cu serverul.
  • Strângere de mână TLS (numai 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 va accelera mecanismul de strângere de mână, dar este încă departe.

dns-prefetch

<link rel= "dns-prefetch"> solicită browserului să efectueze rezoluția DNS pentru domeniu în avans dacă vă veți conecta la acesta în curând și doriți să accelerați conexiunea inițială.

Browserul trebuie să determine adresa IP a domeniului dacă va prelua orice resurse de la un nou domeniu terță parte. De exemplu, încărcarea fonturilor Google, fonturile React dintr-un CDN sau solicitarea unui răspuns JSON de la un server API.

Pentru fiecare domeniu nou, rezoluția înregistrării DNS durează de obicei aproximativ 20-120 ms. Acest lucru afectează doar încărcarea primei resurse dintr-un anumit domeniu, dar introduce totuși o întârziere. Dacă efectuăm rezoluția DNS în avans, vom economisi timp și vom încărca resursa mai repede.

sintaxă

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

href indică numele domeniului pentru care doriți să setați adresa IP. Poate fi specificat cu un prefix (https://domain.com) sau fără ea (//domain.com).

Când să folosiți

Utilizați pentru domeniile care vor fi necesare în curând pentru a descărca resurse de acolo despre care browserul nu știe în prealabil. De exemplu:

  • Aplicația dvs. este găzduită pe my-app.com și face cereri AJAX către api.my-app.com: Nu cunoașteți interogările specifice în avans, deoarece acestea sunt făcute dinamic din JS. Aici este destul de potrivit să folosiți o etichetă pentru a vă preconecta la domeniu.
  • Aplicația dvs. este găzduită pe my-app.comși utilizează fonturi Google. Acestea sunt descărcate în doi pași: în primul rând, fișierul CSS este descărcat de pe domeniu fonts.googleapis.com, atunci acest fișier solicită fonturi cu fonts.gstatic.com. Nu puteți ști din ce fișiere de font specifice provin fonts.gstatic.com veți avea nevoie de el până când încărcați fișierul CSS, așa că putem face doar o conexiune preliminară în avans.

Folosiți această etichetă pentru a accelera un pic un script sau un stil terță parte datorită conexiunii prestabilite.

Vă rugăm să rețineți caracteristicile similare cu <link rel= "dns-prefetch"/> и <link rel= "preconnect">. De obicei, nu are sens să le folosiți împreună pentru un singur domeniu: <link rel= "preconnect"> include deja <link rel= "dns-prefetch"/> și mult mai mult. Acest lucru poate fi justificat în două cazuri:

  • Doriți să acceptați browsere mai vechi?. <link rel= "dns-prefetch" /> susținută de din IE10 și Safari 5. <link rel= "preconnect"> a fost suportat o vreme în Chrome și Firefox, dar a fost adăugat la Safari doar în 11.1 și încă nu este acceptat în IE/Edge. Dacă trebuie să acceptați aceste browsere, utilizați <link rel= "dns-prefetch" /> ca opțiune de rezervă pentru <link rel= "preconnect">.
  • Doriți să accelerați conexiunile la mai mult de 4-6 domenii. Etichetă <link rel= "preconnect"> Nu se recomandă utilizarea 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ă folosește-l dacă este necesar.

detalii

Etichetă opțională. Browserul nu este obligat să urmeze această instrucțiune, așa că este posibil să nu efectueze rezoluție DNS, de exemplu, dacă există multe astfel de etichete pe pagină sau într-un alt caz.

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

Pentru a determina o adresă IP, browserul trebuie să interogheze serverul DNS. Este nevoie de 20-120 ms atunci când vă conectați la un nou domeniu terță parte.

DNS este stocat în cache, deși nu foarte fiabil. Unele sisteme de operare și browsere memorează în cache interogările DNS: acest lucru va economisi timp la interogările repetate, dar nu se poate baza pe stocarea în cache. Pe Linux, de obicei, nu funcționează deloc. Chrome are un cache DNS, dar durează doar un minut. Windows memorează în cache răspunsurile DNS timp de cinci zile.

predare

<link rel= "prerender"> solicită browserului să descarce adresa URL și să o afișeze într-o filă invizibilă. Când utilizatorul face clic pe link, pagina ar trebui să fie afișată imediat. Acest lucru este util dacă sunteți sigur că utilizatorul va vizita o anumită pagină și dorește să accelereze afișarea acesteia.

În ciuda (sau din cauza) eficienței excepționale a acestei etichete, în 2019 <link rel= "prerender"> slab acceptat în browserele majore. Vezi mai multe detalii. de mai jos.

sintaxă

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

href indică adresa URL pe care doriți să o începeți redarea în fundal.

Când să folosiți

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

Nu folosiți în exces. Pre-randarea este extrem de costisitoare din punct de vedere al lățimii de bandă și al memoriei. Nu folosi <link rel= "prerender"> pentru mai mult de o pagină.

detalii

Etichetă opțională. Browserul nu este obligat să urmeze această instrucțiune și poate să o ignore, de exemplu, la o conexiune lentă sau când nu există suficientă memorie liberă.

Pentru a salva memorie Chrome nu face randare completăȘi preîncărcați numai NoState. Aceasta înseamnă că Chrome încarcă pagina și toate resursele acesteia, dar nu redă și nu execută JavaScript.

Firefox și Safari nu acceptă deloc această etichetă. Acest lucru nu încalcă specificația, deoarece browserele nu sunt obligate să urmeze această instrucțiune; dar tot trist. Bug de implementare Firefox este deschis de șapte ani. Există rapoarte că Safari nici nu acceptă această etichetă.

Rezumat

Utilizare:

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

Sursa: www.habr.com

Adauga un comentariu