Stel de nuttige link rel preload-tags samen

Webteams gebruiken het wanneer een beslissende bron voorrang verdient maar alles vooraf laden alleen bandbreedte zou verspillen.

Stel de nuttige link rel preload-tags samen. Je gegevens blijven lokaal terwijl het resultaat eenvoudig te controleren en hergebruiken is.

Hoe te gebruiken

Vermeld één resource per regel, bijvoorbeeld een lettertypebestand of een belangrijke afbeelding.
Gebruik de exacte paden die je pagina opvraagt.
Voer de generator uit om de link-rel-preload-tags te maken.
Plaats die tags in de head vóór andere prioriteitsresources.

Voorbeeld

Een team merkt dat het titellettertype te laat aankomt en de lay-out verschuift. Ze vermelden het lettertypebestand dat de pagina gebruikt, genereren de preload-tags en plaatsen ze in de head. Zo voorkomen ze dat elk asset op de site wordt voorafgeladen. Een test met een langzaam netwerk laat vervolgens zien of de lettertypeprioriteit nuttig is.

Invoer

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

Limieten en formaten

Preloaden is alleen nuttig voor een paar werkelijk kritieke resources.
Een onjuist pad verhindert dat de browser het bestand vindt.
Te veel tags kunnen andere nuttige elementen vertragen.
Het hulpmiddel controleert niet of de resource al in de cache zit.
Browsers negeren een onnodige of verkeerd gevormde preload mogelijk.

Waar de verwerking gebeurt

De paden die je invoert, worden in je browser omgezet in tags. Er wordt geen bestand verzonden en het hulpmiddel veroorzaakt geen netwerkoproepen. De gegenereerde code blijft beschikbaar om te kopiëren.

Veelgestelde vragen

Welke resources moet ik preloaden?

Bewaar preloaden voor bestanden die nodig zijn in de eerste weergave, zoals een koplettertype of een hoofdafbeelding. Te veel items preloaden verzwakt het prioriteitssignaal. Controleer met browserhulpmiddelen of de wijziging helpt.

Hoe verschilt dit van lazy loading?

Preloaden vraagt de browser om een resource eerder op te halen. Lazy loading stelt resources uit die nog niet nodig zijn. Ze lossen tegenovergestelde problemen op en moeten voor verschillende assets worden gebruikt.

Kan ik een extern lettertype preloaden?

Je kunt afhankelijk van je opzet een relatief of absoluut pad invoeren. Zorg dat het overeenkomt met het bestand dat je pagina daadwerkelijk aanbiedt. Cross-origin- en beveiligingsregels kunnen nog steeds invloed hebben op hoe de browser het gebruikt.