Compune etichetele link rel preload utile

Echipele web îl folosesc când o resursă decisivă merită prioritate, dar preîncărcarea tuturor ar risipi traficul.

Compune etichetele link rel preload utile. Rezultatul rămâne în browser, gata de verificat și adaptat fără cont sau trimiterea datelor introduse.

Cum se folosește

Listează o resursă pe linie, cum ar fi un fișier de font sau o imagine cheie.
Folosește căile exacte pe care le solicită pagina ta.
Rulează generatorul pentru a crea etichetele link rel preload.
Introdu acele etichete în secțiunea head înaintea altor resurse prioritare.

Exemplu

O echipă observă că fontul titlului sosește târziu și deplasează aspectul. Listează fișierul de font folosit de pagină, generează etichetele preload și le plasează în secțiunea head. Acest lucru îi ajută să evite preîncărcarea fiecărei resurse de pe site. Un test pe rețea lentă arată apoi dacă prioritatea fontului este utilă.

Date de intrare

/assets/font.woff2
/assets/hero.webp

Limite și formate

Preîncărcarea este utilă doar pentru câteva resurse cu adevărat critice.
O cale incorectă împiedică browserul să găsească fișierul.
Prea multe etichete pot întârzia alte elemente utile.
Instrumentul nu verifică dacă resursa este deja în cache.
Browserele pot ignora un preload care este inutil sau malformat.

Unde are loc procesarea

Căile pe care le introduci sunt transformate în etichete în browserul tău. Niciun fișier nu este trimis în afara, iar instrumentul nu declanșează apeluri de rețea. Codul generat rămâne disponibil pentru a-l copia.

Întrebări frecvente

Ce resurse ar trebui să preîncarc?

Rezervă preîncărcarea pentru fișierele necesare la prima randare, cum ar fi un font de titlu sau o imagine principală. Preîncărcarea prea multor elemente slăbește semnalul de prioritate. Verifică cu instrumentele browserului dacă modificarea ajută.

Prin ce diferă de încărcarea amânată?

Preîncărcarea cere browserului să aducă o resursă mai devreme. Încărcarea amânată întârzie resursele care nu sunt încă necesare. Rezolvă probleme opuse și ar trebui folosite pentru resurse diferite.

Pot preîncărca un font extern?

Poți introduce o cale relativă sau absolută în funcție de configurația ta. Asigură-te că se potrivește cu fișierul pe care îl servește de fapt pagina ta. Regulile cross-origin și de securitate pot afecta în continuare modul în care browserul îl folosește.