Ce face fetchpriority
Browserul dă fiecărei descărcări o prioritate: CSS-ul și scripturile din <head> sunt mari, imaginile pornesc de obicei cu prioritate mică. Atributul fetchpriority îți permite să corectezi această ordine când știi ceva ce browserul nu știe.
Cazul cel mai des întâlnit este imaginea principală din partea de sus a paginii (elementul LCP): cu fetchpriority="high" se descarcă înaintea celorlalte imagini. Invers, low se pune pe resurse care pot aștepta, cum ar fi imaginile din slide-urile ascunse ale unui carusel.
Atributul există pe <img>, <link> și <script>. Este doar un indiciu: browserul îl poate ignora. Este Baseline din octombrie 2024 (Chrome 101, Firefox 132, Safari 17.2).
Atribute
| Atribut | Descriere |
|---|---|
high |
Prioritate mai mare decât cea obișnuită pentru tipul respectiv. |
low |
Prioritate mai mică decât cea obișnuită. |
auto |
Browserul decide singur (implicit). |
Exemple
Exemplul 1: Imaginea principală a paginii, cu prioritate mare
Bannerul se vede primul, așa că îl descărcăm înaintea celorlalte imagini.
<img src="oferta-toamna.jpg" alt="Reduceri de toamnă: până la 30%" width="1600" height="600"
fetchpriority="high">
<img src="produs-1.jpg" alt="Geacă de toamnă" width="400" height="400" loading="lazy">Ce afișează browserul
În DevTools → Network, coloana Priority arată „High” pentru oferta-toamna.jpg și „Low” pentru produs-1.jpg. Bannerul apare mai repede.Exemplul 2: Carusel: primul slide sus, celelalte jos
Slide-urile ascunse nu trebuie să concureze cu primul.
<div class="carusel">
<img src="slide-1.jpg" alt="Colecția nouă" fetchpriority="high">
<img src="slide-2.jpg" alt="Reduceri la încălțăminte" fetchpriority="low">
<img src="slide-3.jpg" alt="Livrare gratuită peste 200 lei" fetchpriority="low">
</div>Ce afișează browserul
Primul slide se descarcă primul; slide-2 și slide-3 se descarcă după ce resursele importante s-au terminat.Exemplul 3: Script de statistici cu prioritate mică
Scriptul se descarcă după resursele care contează pentru afișare.
<script src="/js/statistici.js" async fetchpriority="low"></script>Ce afișează browserul
În Network, statistici.js are prioritatea „Low” și nu întârzie imaginile și fonturile paginii.Greșeli frecvente
fetchpriority="high"pe multe imagini: dacă toate sunt importante, niciuna nu mai este. Folosește-l pe una sau două.fetchpriority="high"împreună culoading="lazy"pe aceeași imagine: cele două se contrazic, iar imaginea tot așteaptă să fie aproape de ecran.- Așteptarea unui efect mare în browserele vechi: acolo atributul este ignorat, fără erori.
Comenzi înrudite
loading=lazy: Amână descărcarea imaginilor și a cadrelor iframe până când utilizatorul derulează aproape de ele.<link rel=preload>: Cere browserului să descarce devreme o resursă de care pagina are sigur nevoie curând: font, imagine principală, script sau CSS.<img>: Inserează o imagine în pagină; element vid cu atribute obligatorii src (calea) și alt (textul alternativ).<script>: Încarcă sau conține cod executabil JavaScript pentru a adăuga interactivitate paginii.