<link rel=preload> în HTML

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Ce face <link rel=preload>

rel="preload" pe <link> spune browserului: descarcă acum acest fișier, cu prioritate, pentru că îl voi folosi pe pagina curentă. Fișierul doar se descarcă; nu se aplică și nu rulează până când pagina nu îl cere.

Este util pentru resurse descoperite târziu: un font cerut din CSS, o imagine de fundal din CSS sau imaginea principală dintr-un slider. Atributul as este obligatoriu: fără el, browserul nu știe ce prioritate să dea și poate descărca fișierul de două ori.

Fonturile se încarcă mereu în mod CORS, de aceea preload-ul unui font cere crossorigin, chiar dacă fontul este pe același domeniu.

Atribute

Atribut	Descriere
href	Adresa resursei.
as	Tipul resursei: font, image, style, script, fetch, track.
type	Tipul MIME (font/woff2, image/avif); browserul sare peste preload dacă nu suportă tipul.
crossorigin	Obligatoriu pentru fonturi și pentru resursele cerute cu CORS.
imagesrcset / imagesizes	Pentru imagini responsive: aceleași valori ca srcset și sizes de pe <img>.
fetchpriority	high sau low, pentru a ajusta prioritatea descărcării.

Exemple

Exemplul 1: Fontul principal al site-ului

Fără preload, browserul află de font abia după ce descarcă și citește CSS-ul.

<head>
  <link rel="preload" href="/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="stylesheet" href="/css/site.css">
</head>

Ce afișează browserul

În DevTools → Network, fontul inter-latin.woff2 apare printre primele cereri, înaintea imaginilor. Textul se afișează mai repede cu fontul final.

Exemplul 2: Imaginea principală a unei pagini de produs, în variante responsive

Browserul alege din imagesrcset aceeași variantă pe care o va alege <img>.

<link rel="preload" as="image" fetchpriority="high"
      href="laptop-800.jpg"
      imagesrcset="laptop-400.jpg 400w, laptop-800.jpg 800w, laptop-1600.jpg 1600w"
      imagesizes="(max-width: 600px) 100vw, 50vw">

Ce afișează browserul

Imaginea laptopului începe să se descarce înaintea CSS-ului și a scripturilor; scorul LCP din PageSpeed se îmbunătățește.

Greșeli frecvente

• Lipsa lui crossorigin la fonturi: fontul se descarcă de două ori, iar Chrome afișează în consolă un avertisment că preload-ul nu a fost folosit.
• Preload pentru multe fișiere: toate concurează între ele și pagina se încarcă mai încet. Păstrează-l pentru 1-3 resurse critice.
• Preload pentru o resursă pe care pagina nu o folosește: Chrome afișează în consolă un avertisment după câteva secunde, iar banda se consumă degeaba.

Comenzi înrudite

• <link rel=preconnect> și dns-prefetch: Deschide din timp conexiunea către un alt domeniu de unde pagina va descărca fișiere, ca să câștige timp la prima cerere.
• fetchpriority: Indică browserului dacă o imagine, un script sau o resursă preîncărcată trebuie descărcată cu prioritate mai mare sau mai mică.
• <link>: Leagă documentul curent de resurse externe: fișiere CSS, pictograme (favicon), fonturi web sau versiuni canonice.
• <img>: Inserează o imagine în pagină; element vid cu atribute obligatorii src (calea) și alt (textul alternativ).