Accelerați încărcarea resurselor cu sfaturi prioritare și fetchpriority

Cât de repede se încarcă resursele tale cele mai critice?

Această întrebare exactă îi are pe proprietarii de site-uri web (și experți web experimentați) pe ace. Și se întâmplă că este ceea ce face sau distruge site-ul dvs. în primele milisecunde.

Când vine vorba de optimizarea încărcării resurselor, aveți două opțiuni:

1. Bazați-vă în întregime pe mecanismele browserelor pentru a descărca și prelua resurse într-o ordine optimă.
2. Încercați să-i ajutați implementând indicii de resurse.

Din păcate, pe cât de bune sunt browserele moderne, fiecare site/aplicație diferă ca configurație și context. Și deși sunt destul de buni la alocarea priorităților de resurse, în unele cazuri, asta nu este suficient.

Din păcate, indicii de resurse oferă o influență limitată asupra prioritizării resurselor.

Din fericire, există un nou indiciu pe care îl puteți adăuga la setul dvs. de instrumente de performanță web – Sfaturi prioritare.

Și în acest articol, veți afla mai multe despre:

• Ce sunt sugestiile prioritare;
• Când să le folosești;
• Cum să le implementați prin fetchpriority;
• Cum le puteți testa pe site-ul dvs.

Sa incepem!

Ce sunt sugestiile prioritare?

Sugestiile de prioritate sunt un semnal care permite proprietarilor și dezvoltatorilor de site-uri web să indice prioritatea resurselor (de exemplu, imagini, fonturi, CSS, scripturi și cadre iframe) atunci când browserele le încarcă.

Browserul trebuie să descarce tot felul de resurse în procesul de construire a unei pagini web. Ca resursă prioritară, solicită și descarcă mai întâi documentul HTML.

Dar cum stabilește un browser ce să încarce în continuare?

Ei bine, browserele au un set de priorități predeterminate pentru fiecare tip de resursă:

Aceste priorități implicite funcționează de obicei destul de bine, ceea ce are ca rezultat o performanță web bună.

Cu toate acestea, așa cum a menționat Addy Osmani în articolul său despre sfaturi de prioritate, browserele pot face ghiciri destul de bine educate despre ce să preia în continuare.

Dar ei nu-ți cunosc proiectul la fel de bine ca tine.

Prin urmare, ar putea fi necesară o mică reglare:

„Browsere precum Chrome au euristici pentru a încerca să preia resursele cu prioritatea adecvată pe baza semnalelor, cum ar fi dacă se află în fereastra de vizualizare. Acestea fiind spuse, fără sfaturi de prioritate, Chrome poate crește prioritatea imaginilor din fereastra doar odată cu aspectul a fost finalizat. Acest lucru este adesea prea târziu și, în acest moment, poate concura cu orice altceva. Un alt motiv pentru a lua în considerare utilizarea indicii este că, în calitate de autor de pagină, probabil știți ce este cel mai important pentru utilizatorii dvs. să vadă mai întâi și poate informa browserul astfel încât să se poată optimiza pentru cazul dvs. de utilizare."

Anterior, singurul lucru pe care îl puteai face era să folosești fie preîncărcare, fie preconectare.

Și, deși preîncărcarea este o directivă obligatorie pe care browserele trebuie să o respecte, în unele cazuri, resursa preîncărcată poate avea totuși o prioritate scăzută.

De exemplu, o imagine preîncărcată cu cea mai mare vopsea de conținut (LCP) poate obține o prioritate scăzută și poate fi respinsă de alte resurse cu prioritate ridicată. În astfel de cazuri, Sfaturile prioritare pot completa perfect preîncărcarea și pot ajuta cât de curând se încarcă resursele.

Iată un webinar despre Priority Hints, unde Pat Meenan vorbește despre Priority Hints în Chrome și chiar le numește „un cod cheat” pentru LCP:

Acesta este un prim exemplu al puterii Sugestiilor prioritare.

Acum, să vedem când ar trebui să implementați Sfaturi prioritare în strategia dvs. de performanță web.

Când să folosiți sfaturi prioritare

Există 5 scenarii principale în care Sfaturile prioritare ar putea ajuta, conform Google:

1. Aveți mai multe imagini deasupra pliului, dar toate nu trebuie să aibă aceeași prioritate. De exemplu, într-un carusel de imagini, doar prima imagine vizibilă are nevoie de o prioritate mai mare în comparație cu celelalte.
   
2. Imaginile eroi din fereastra de vizualizare încep cu o prioritate scăzută. După ce aspectul este complet, Chrome descoperă că sunt în fereastra de vizualizare și le crește prioritatea (din păcate, instrumentele de dezvoltare afișează doar prioritatea finală - WebPageTest le va afișa pe ambele). Acest lucru adaugă de obicei o întârziere semnificativă la încărcarea imaginii. Furnizarea indicii de prioritate în marcaj permite ca imaginea să înceapă cu o prioritate ridicată și să înceapă încărcarea mult mai devreme.

Notă: Declararea scripturilor ca asincrone sau amânate îi spune browserului să le încarce asincron. Cu toate acestea, după cum se vede în figura de mai sus, acestor scripturi li se atribuie și o prioritate „scăzută”. Poate doriți să creșteți prioritatea acestora, asigurând în același timp descărcarea asincronă, în special pentru orice scripturi care sunt critice pentru experiența utilizatorului.

Puteți utiliza API-ul JavaScript fetch() pentru a prelua resurse sau date în mod asincron. Preluarea are o prioritate ridicată de către browser. Pot exista situații în care nu doriți ca toate preluarile dvs. să fie executate cu prioritate ridicată și preferați să utilizați indicii de prioritate diferite. Acest lucru poate fi util atunci când rulați apeluri API în fundal și le amestecați cu apeluri API care răspund la intrarea utilizatorului, cum ar fi completarea automată. Apelurile API de fundal pot fi etichetate ca prioritate scăzută, iar apelurile API interactive pot fi marcate ca prioritate ridicată.

Browserul atribuie CSS și fonturilor o prioritate ridicată, dar este posibil ca toate aceste resurse să nu fie la fel de importante sau necesare pentru LCP. Puteți folosi indicii de prioritate pentru a reduce prioritatea unora dintre aceste resurse.

Aproape orice site web se încadrează în primele două scenarii. Pentru a determina dacă ar trebui să lucrați la oricare dintre celelalte, fie să aprofundați în codul dvs. (HTML/JS) fie să căutați ajutor de la un dezvoltator web.

Cum să implementați sugestii de prioritate: Atributul fetchpriority

Puteți implementa sugestii prioritare folosind atributul HTML fetchpriority.

Puteți folosi atributul cu:

• legătură
• img
• scenariu
• etichete iframe

Atributul fetchpriority acceptă una dintre cele trei valori:

• ridicat: indicând faptul că considerați resursa critică și doriți ca browserul să o acorde prioritate.
• scăzut: semnalând că considerați resursa mai puțin importantă și doriți ca browserul să o deprioritizeze.
• auto: o valoare implicită atunci când nu aveți o preferință și lăsați browserul să decidă prioritatea corespunzătoare.

Alternativ, puteți utiliza API-ul JavaScript Fetch:

Câteva lucruri de reținut atunci când utilizați atributul fetchpriority :

• fetchpriority nu asigură că o resursă cu prioritate mai mare va fi încărcată înaintea altor resurse (cu prioritate inferioară) de același tip.
• fetchpriority nu ar trebui folosit pentru a controla ordinea de încărcare în sine.
• fetchpriority nu este o directivă obligatorie și nu poate forța browserul să preia o resursă sau să împiedice preluarea acesteia. Depinde de browser dacă va prelua sau nu resursa.

Important: similar cu sugestiile pentru resurse, sugestiile prioritare trebuie folosite cu prudență, deoarece utilizarea excesivă poate duce la încetiniri mai degrabă decât la îmbunătățirea performanței.

Cum să vă testați site-ul cu sugestii prioritare

Înainte de a rula testele, ar trebui să știți că Sfaturile prioritare sunt disponibile numai în Chrome 101 (sau mai recent) și Edge 101 (sau mai recent):

Acum la întrebarea de față:

Cea mai ușoară modalitate ar fi să folosiți un instrument, astfel încât să nu trebuie să vă schimbați codul manual.

Din fericire, funcția Experimente a WebPageTest vă permite să testați funcții de performanță, cum ar fi Sfaturile prioritare, fără a vă schimba codul.

Cu toate acestea, caracteristica Experiment a WebPageTest face parte din abonamentul plătit, așa că trebuie să planificați unele cheltuieli suplimentare.

Dimpotrivă, dacă aveți abilități tehnologice, puteți ajusta singur codul site-ului și puteți testa impactul Priority Hints.

Asigurați-vă că efectuați teste după fiecare modificare pe care o faceți.

Recapitulare

Am parcurs mult teren, așa că iată o scurtă recapitulare a celor mai importante puncte:

• Sugestii de prioritate vă permit să indicați prioritatea resurselor site-ului dvs.
• Sfaturile prioritare vă pot ajuta să accelerați încărcarea imaginilor de deasupra paginii, a imaginilor eroe (element LCP), a scripturilor asincrone și amânate, a fișierelor CSS și a fonturilor.
• Sugestiile prioritare pot fi implementate prin atributul fetchpriority.
• Puteți utiliza atributul fetchpriority cu etichete link, img, script și iframe.
• Atributul fetchpriority acceptă una dintre cele trei valori: mare, scăzută și automată.
• Atenție: Sfaturile prioritare trebuie implementate cu moderație, deoarece utilizarea lor excesivă poate duce la scăderea performanței, mai degrabă decât la îmbunătățirea vitezei.
• fetchpriority nu este o directivă obligatorie și nu poate forța browserul să preia o resursă sau să împiedice preluarea acesteia. Depinde de browser dacă va prelua sau nu resursa.
• Sfaturile prioritare sunt disponibile în Chrome 101 sau o versiune ulterioară.

Pentru a măsura impactul Priority Hints asupra site-ului dvs., executați teste după fiecare modificare.

Instrumente de testare populare:

• PageSpeed ​​Insights
• GTMetrix
• WebPageTest
• Far
• Pingdom