Optimizarea performanței cu sugestii de resurse

Publicat: 2022-03-10

Rezumat rapid ↬ Multe optimizări ale performanței pot fi făcute atunci când putem prezice ce ar putea face utilizatorii înainte să o facă efectiv. Sugestiile de resurse sunt o modalitate simplă, dar eficientă, prin care dezvoltatorii web pot ajuta browserul să rămână cu un pas înaintea utilizatorului și să mențină paginile rapide.

Browserele web moderne folosesc tot felul de tehnici pentru a ajuta la îmbunătățirea performanței de încărcare a paginii ghicind ce ar putea face utilizatorul în continuare. Cu toate acestea, browserul nu știe multe despre site-ul sau aplicația noastră în ansamblu și adesea cele mai bune informații despre ceea ce poate face un utilizator vin de la noi, dezvoltatorul.

Luați exemplul conținutului paginat, cum ar fi un album foto. Știm că, dacă utilizatorul se uită la o fotografie dintr-un album, șansa ca acesta să facă clic pe linkul „următorul” pentru a vedea următoarea imagine din album este destul de mare. Browserul, totuși, nu știe cu adevărat că dintre toate linkurile de pe pagină, acesta este cel pe care utilizatorul este cel mai probabil să facă clic. Pentru un browser, toate aceste link-uri au o greutate egală.

Ce se întâmplă dacă browserul ar putea ști cumva unde merge utilizatorul și ar putea prelua din timp următoarea pagină, astfel încât atunci când utilizatorul face clic pe link, încărcarea paginii este mult, mult mai rapidă? Acesta este în principal ceea ce sunt Resource Sugestii. Acestea reprezintă o modalitate prin care dezvoltatorul poate spune browserului despre ceea ce este probabil să se întâmple în viitor, astfel încât browserul să poată lua în considerare acest lucru în alegerile sale pentru modul în care încarcă resursele.

Toate aceste indicii de resurse folosesc atributul rel al elementului <link> pe care veți fi familiarizați să îl găsiți în <head> documentelor dvs. HTML. În acest articol, vom arunca o privire asupra principalelor tipuri de Sugestii de resurse și când și unde le putem folosi în paginile noastre. Vom trece de la indicii mici și subtile până la cele mari de la sfârșit.

Mai multe după săritură! Continuați să citiți mai jos ↓

Preluare DNS

O căutare DNS este procesul de transformare a unui nume de domeniu prietenos cu oamenii, cum ar fi example.com , într-o adresă IP prietenoasă cu mașina, cum ar fi 123.54.92.4 , care este de fapt necesară pentru a prelua o resursă.

De fiecare dată când introduceți o adresă URL în bara de adrese a browserului, urmați un link dintr-o pagină sau chiar încărcați o resursă, cum ar fi o imagine dintr-un domeniu diferit, browserul trebuie să facă o căutare DNS pentru a găsi serverul care deține resursa pe care o avem. solicitat. Pentru o pagină aglomerată cu multe resurse externe (cum ar fi, probabil, un site de știri cu o mulțime de reclame și trackere), ar putea fi necesare zeci de căutări DNS pe pagină.

Browserul memorează în cache rezultatele acestor căutări, dar acestea pot fi lente. O tehnică de optimizare a performanței este reducerea numărului de căutări DNS necesare prin organizarea resurselor pe mai puține domenii. Când acest lucru nu este posibil, puteți avertiza browserul despre domeniile pe care va trebui să le caute cu ajutorul indicației de resurse dns-prefetch .

 <link rel="dns-prefetch" href="https://images.example.com">

Când browserul întâlnește acest indiciu, poate începe să rezolve numele de domeniu images.example.com cât mai curând posibil, deși nu știe încă cum va fi utilizat. Acest lucru permite browserului să treacă înaintea jocului și să lucreze mai mult în paralel, scăzând timpul general de încărcare.

Când ar trebui să folosesc `dns-prefetch` ?

Utilizați dns-prefetch atunci când pagina dvs. utilizează resurse dintr-un domeniu diferit, pentru a oferi browserului un avans. Suportul pentru browser este cu adevărat grozav, dar dacă un browser nu îl acceptă, nu s-a făcut niciun rău - preluarea pur și simplu nu are loc.

Nu prelevați niciun domeniu pe care nu îl utilizați și, dacă doriți să prelevați un număr mare de domenii, ar fi mai bine să vă uitați de ce sunt necesare toate acele domenii și dacă se poate face ceva pentru a reduce numărul.

Preconectare

Un pas înainte de preluarea DNS este preconectarea la un server. Stabilirea unei conexiuni la un server care găzduiește o resursă necesită mai mulți pași:

Căutare DNS (după cum tocmai am discutat);
Strângere de mână TCP
O scurtă „conversație” între browser și server pentru a crea conexiunea.
Negociere TLS pe site-uri HTTPS
Aceasta verifică dacă informațiile certificatului sunt valide și corecte pentru conexiune.

Acest lucru se întâmplă de obicei o dată pe server și ocupă timp prețios - mai ales dacă serverul este foarte îndepărtat de browser și latența rețelei este mare. (Aici este locul în care CDN-urile distribuite la nivel global ajută cu adevărat!) În același mod în care preluarea prealabilă a DNS-ului poate ajuta browserul să înainteze jocul înainte de a vedea ce urmează, preconectarea la un server poate asigura că atunci când browserul ajunge la partea a paginii unde este nevoie de o resursă, munca lentă de stabilire a conexiunii a avut deja loc și linia este deschisă și gata de plecare.

 <link rel="preconnect" href="https://scripts.example.com">

Când ar trebui să folosesc `preconnect` ?

Din nou, suportul pentru browser este puternic și nu este rău dacă un browser nu acceptă preconectarea - rezultatul va fi exact ca înainte. Luați în considerare utilizarea preconectării atunci când știți sigur că veți accesa o resursă și doriți să mergeți mai departe.

Aveți grijă să nu vă preconectați și apoi să nu utilizați conexiunea, deoarece acest lucru vă va încetini pagina și va limita și o cantitate mică de resurse de pe serverul la care vă conectați.

Preaducerea paginii următoare

Cele două indicii pe care le-am analizat până acum sunt concentrate în principal pe resursele din pagina care se încarcă. Ele ar putea fi utile pentru a ajuta browserul să avanseze în privința imaginilor, scripturilor sau fonturilor, de exemplu. Următoarele câteva sugestii se referă mai mult la navigare și la prezicerea unde ar putea merge utilizatorul după pagina care este în curs de încărcare.

Prima dintre acestea este preîncărcarea, iar eticheta de link ar putea arăta astfel:

 <link rel="prefetch" href="https://example.com/news/?page=2" as="document">

Acest lucru îi spune browserului că poate merge mai departe și poate prelua o pagină în fundal, astfel încât să fie gata de funcționare atunci când este solicitat. Există un pic de noroc aici, deoarece trebuie să anticipați unde credeți că utilizatorul va naviga în continuare. Faceți-o corect și pagina următoare ar putea părea să se încarce foarte repede. Găsiți greșit și ați pierdut timp și resurse pentru a descărca ceva care nu va fi folosit. Dacă utilizatorul se află pe o conexiune cu contorizare, cum ar fi un plan limitat de telefonie mobilă, s-ar putea să-i coste de fapt bani reali.

Când are loc o preluare preliminară, browserul face căutarea DNS și face conexiunea la server pe care am văzut-o în cele două tipuri de indicii anterioare, dar apoi face un pas mai departe și de fapt solicită și descarcă fișierele. Totuși, se oprește în acel moment și fișierele nu sunt analizate sau executate și nu sunt în niciun fel aplicate paginii curente. Sunt doar solicitate și ținute gata.

S-ar putea să vă gândiți la o preluare preliminară ca fiind un pic ca adăugarea unui fișier în memoria cache a browserului. În loc să fie nevoie să mergeți la server și să îl descărcați atunci când utilizatorul face clic pe link, fișierul poate fi scos din memorie și utilizat mult mai rapid.

Atributul `as`

În exemplul de mai sus, puteți vedea că setăm atributul as la as="document" . Acesta este un atribut opțional care îi spune browserului că ceea ce preluăm ar trebui să fie tratat ca un document (adică o pagină web). Acest lucru permite browserului să seteze același tip de anteturi de solicitare și politici de securitate ca și cum tocmai am fi urmat un link către o pagină nouă.

Există o mulțime de valori posibile pentru atributul as , permițând browserului să gestioneze diferite tipuri de preluare în mod corespunzător.

Valoarea `as`	Tipul de resursă
`audio`	Fișiere de sunet și muzică
`video`	Video
`Track`	Melodii WebVTT video sau audio
`script`	Fișiere JavaScript
`style`	Foi de stil CSS
`font`	Fonturi web
`image`	Imagini
`fetch`	Solicitări XHR și Fetch API
`worker`	Lucrători web
`embed`	Solicitări multimedia `<embed>`
`object`	Solicitări multimedia `<object>`
`document`	pagini web

Diferitele valori care pot fi utilizate pentru a specifica tipuri de resurse cu atributul as .

Când ar trebui să folosesc `prefetch` ?

Din nou, prefetch are un suport excelent pentru browser. Ar trebui să îl utilizați atunci când aveți o siguranță rezonabilă că utilizatorul ar putea urmări site-ul dvs. dacă credeți că accelerarea navigării va avea un impact pozitiv asupra experienței utilizatorului. Acest lucru ar trebui să fie cântărit în raport cu riscul de irosire a resurselor, eventual prin preluarea unei resurse care nu este apoi utilizată.

Predarea paginii următoare

Cu prefetch , am văzut cum browserul poate descărca fișierele în fundal gata de utilizare, dar am observat și că nu s-a mai făcut nimic cu ele în acel moment. Pre-rendarea face un pas mai departe și execută fișierele, făcând aproape toată munca necesară pentru afișarea paginii, cu excepția afișării efective a acesteia.

Aceasta poate include analizarea resursei pentru orice subresurse , cum ar fi fișierele și imaginile JavaScript, precum și preluarea acestora în prealabil.

 <link rel="prerender" href="https://example.com/news/?page=2">

Acest lucru poate face ca următoarea încărcare a paginii să se simtă instantanee, cu un fel de performanță de încărcare rapidă pe care o puteți vedea când apăsați butonul înapoi al browserului. Totuși, pariul este și mai mare aici, deoarece nu doar petreci timp solicitând și descarcând fișierele, ci și executându-le împreună cu orice JavaScript și altele asemenea. Acest lucru ar putea consuma memorie și procesor (și, prin urmare, baterie) pentru care utilizatorul nu va vedea beneficii dacă ajunge să nu solicite pagina.

Când ar trebui să folosesc `prerender` ?

Suportul pentru browser pentru prerender este în prezent foarte limitat, cu adevărat doar Chrome și vechiul IE (nu Edge) oferind suport pentru opțiune. Acest lucru i-ar putea limita utilitatea, cu excepția cazului în care se întâmplă să vizați în mod specific Chrome. Din nou, este un caz de „fără rău, fără greșeală”, deoarece utilizatorul nu va vedea beneficiul, dar nu le va cauza probleme dacă nu.

Utilizarea sugestiilor de resurse

Am văzut deja cum pot fi folosite sugestii de resurse în <head> unui document HTML folosind eticheta <link> . Acesta este probabil cel mai convenabil mod de a face acest lucru, dar puteți obține același lucru și cu antetul Link: HTTP.

De exemplu, pentru a prelua în avans cu un antet HTTP:

 Link: <https://example.com/logo.png>; rel=prefetch; as=image;

De asemenea, puteți utiliza JavaScript pentru a aplica în mod dinamic indicii de resurse, poate ca răspuns la utilizarea interacțiunii. Pentru a folosi un exemplu din documentul cu specificațiile W3C:

 var hint = document.createElement("link"); hint.rel = "prefetch"; hint.as = "document"; hint.href = "/article/part3.html"; document.head.appendChild(hint);

Acest lucru deschide câteva posibilități interesante, deoarece este potențial mai ușor de prezis unde ar putea naviga în continuare utilizatorul, în funcție de modul în care interacționează cu pagina.

Lucruri de remarcat

Am analizat patru moduri din ce în ce mai agresive de preîncărcare a resurselor, de la cea mai ușoară atingere de rezolvare a DNS-ului până la redarea unei pagini complete gata să fie pusă în fundal. Este important să ne amintim că aceste indicii sunt doar atât; sunt indicii despre moduri în care browserul ar putea optimiza performanța . Nu sunt directive. Browserul poate lua sugestiile noastre și poate folosi cea mai bună judecată pentru a decide cum să răspundă.

Acest lucru ar putea însemna că pe un dispozitiv ocupat sau supraîntindet, browserul nu încearcă deloc să răspundă la indicii. Dacă browserul știe că se află pe o conexiune măsurată, ar putea prelua DNS în prealabil, dar nu resurse întregi, de exemplu. Dacă memoria este scăzută, browserul ar putea decide din nou că nu merită să preia următoarea pagină până când cea actuală nu este descărcată.

Realitatea este că pe un browser desktop, toate sugestiile vor fi urmate probabil, așa cum sugerează dezvoltatorul, dar rețineți că depinde de browser în fiecare caz.

Importanța întreținerii

Dacă ați lucrat cu web mai mult de câțiva ani, veți fi familiarizat cu faptul că, dacă ceva de pe o pagină este nevăzut, atunci poate fi adesea neglijat. Metadatele ascunse (cum ar fi descrierile paginilor) sunt un bun exemplu în acest sens. Dacă persoanele care se îngrijesc de site-ul nu pot vedea cu ușurință datele, atunci acestea pot fi ușor neglijate și depășite.

Acesta este un risc real cu indicii de resurse. Deoarece codul este ascuns și rămâne aproape nedetectat în timpul utilizării, ar fi foarte ușor ca pagina să se schimbe și orice sugestii de resurse să nu fie actualizate. Consecința de a spune, preîncărcarea unei pagini pe care nu o utilizați, înseamnă că instrumentele pe care le-ați pus în aplicare pentru a îmbunătăți performanța site-ului dvs. îi dăunează în mod activ. Așadar, a avea proceduri bune pentru a-ți cheia indicii de resurse actualizate devine cu adevărat, cu adevărat important.

Resurse

„Specificație Resource Hints”, W3C
„Accelerează navigarea în pagina următoare cu preîncărcarea”, Addy Osmani