Prioriteit voor vooraf laden optimaliseren

Als je bronnen vooraf laadt met <link rel="preload">, geef je de browser een signaal dat een bron binnenkort nodig is. Vooraf geladen bronnen nemen echter de standaardprioriteit voor het brontype over en voor afbeeldingen is dit laag. Met fetchpriority kun je deze relatieve prioriteit verfijnen. Je kunt er met name voor zorgen dat vooraf geladen afbeeldingen vooraf worden geladen met een hoge prioriteit, zodat ze eerder kunnen beginnen en meer bandbreedtebronnen kunnen gebruiken.

Hoe wordt dit geïmplementeerd

1. Kandidaten voor vooraf laden identificeren: Zoek bronnen die niet vroeg door de browser worden ontdekt (bijvoorbeeld video-posterafbeeldingen of achtergrondafbeeldingen in CSS), maar die essentieel zijn voor de weergave van de pagina.
2. Geef prioriteit aan kritieke afbeeldingen die vooraf worden geladen: Gebruik <link rel="preload" fetchpriority="high"> voor de LCP-afbeelding of andere kritieke afbeeldingen die standaard geen prioriteit krijgen, zodat ze prioriteit krijgen boven andere vooraf geladen afbeeldingen. Lettertypen hebben standaard al een hoge prioriteit.
3. Geef niet-kritieke preloads een lagere prioriteit: Gebruik <link rel="preload" fetchpriority="low"> voor bronnen die niet essentieel zijn voor de eerste weergave (bijvoorbeeld een achtergrondvideo of secundaire lettertypen).
4. Afstemmen met resourcetypen: Verschillende as-typen hebben verschillende standaardprioriteiten. Gebruik fetchpriority om deze standaardwaarden zo nodig te overschrijven.

Voorbeeldcode

<!-- Elevate priority for a video poster image that acts as the LCP candidate -->
<link rel="preload" href="/images/video-poster.jpg" as="image" fetchpriority="high">

<!-- Elevate priority for a critical LCP image that is hidden in CSS -->
<link rel="preload" href="/images/hero-background.jpg" as="image" fetchpriority="high">

<!-- Deprioritize a secondary font to avoid network contention -->
<link rel="preload" href="/fonts/secondary-font.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin>

Praktische tips

• VERPLICHT: Gebruik fetchpriority="high" alleen voor maximaal 1-2 kritieke vooraf geladen afbeeldingen om netwerkconflicten en een verminderde prioriteitsboost te voorkomen.
• VERPLICHT: Gebruik fetchpriority="high" voor afbeeldingen met Largest Contentful Paint (LCP).
• WEL: Beperk het totale aantal preloads op een pagina tot maximaal 2 afbeeldingen en 2-3 essentiële lettertypen om bandbreedteconflicten te voorkomen.
• Gebruik fetchpriority="low" WEL voor preloads die de browser vroeg moet starten, maar niet ten koste van kritieke bronnen (vooral niet-kritieke lettertypen).
• Voer het kenmerk as correct in om te zorgen dat de preload wordt gebruikt.
• WEL: Maak essentiële bronnen (zoals LCP-afbeeldingen) statisch vindbaar in HTML via <img>-tags in plaats van te vertrouwen op preloads voor achtergrondafbeeldingen.
• Zorg dat vooraf geladen lettertypen altijd het kenmerk crossorigin hebben (zelfs als ze dezelfde oorsprong hebben).
• Gebruik het beëindigde kenmerk importance NIET. Deze is vervangen door fetchpriority.

Reservestrategie

Het kenmerk fetchpriority op <link rel="preload"> is een progressive enhancement. Browsers die dit niet ondersteunen, laden de bron nog steeds vooraf met de standaardprioriteit voor dat brontype. Voer altijd de juiste kenmerken as en type in om compatibiliteit te garanderen.