Versnel de laadsnelheid van je website: waarom de Link Preload Tag onmisbaar is

Wat is de preload resource hint? #

Met de link rel=preload tag vertel je de browser van tevoren dat bepaalde resources later tijdens het laadproces nodig zijn. Dat kunnen fonts zijn, scripts, afbeeldingen of video's.

Door deze resources te preloaden start de browser eerder in het laadproces met downloaden, wat de totale laadtijden aanzienlijk verkort. Gebruikers zien de inhoud sneller en de algehele ervaring verbetert.

De implementatie is eenvoudig: één extra regel HTML is genoeg om bezoekers hiervan te laten profiteren.

Voor welke resources is de preload resource hint relevant? #

Afbeeldingen #

Een veelgebruikte toepassing van link rel=preload is het preloaden van afbeeldingen. Afbeeldingen kunnen de grootste bestanden op een webpagina zijn — het preloaden ervan kan dus een groot verschil maken. Preload je zeker niet alle afbeeldingen op een pagina, maar voor een LCP-afbeelding is het zeer geschikt.

Het voornaamste voordeel hier is het verbeteren van de Largest Contentful Paint (LCP)-metriek. LCP meet hoe lang het duurt voordat het grootste element op een webpagina zichtbaar is in de viewport.

Dat is vooral nuttig wanneer een hero-afbeelding niet rechtstreeks vanuit de HTML wordt geladen, maar als CSS-achtergrondafbeelding of via JavaScript. Een preload link tag zorgt ervoor dat de browser de hero-afbeelding veel eerder ontdekt.

Aangepaste webfonts #

Hetzelfde geldt voor aangepaste webfonts: die worden pas geladen nadat de HTML en CSS door de browser zijn geparsed. Om te bepalen waar welk font gebruikt moet worden, is de render tree nodig — een combinatie van de DOM en CSSOM. Bij een eerste bezoek kan het laden van above-the-fold-inhoud met aangepaste fonts even duren.

Als fonts niet gepreload of gecached zijn, ontstaan er tekstverschuivingen en reflows terwijl het font laadt. Dat zorgt voor een instabiele ervaring en een hogere Cumulative Layout Shift (CLS)-score. Hoe groter het fontbestand, hoe groter de impact op CLS.

Houd er rekening mee dat de preload link tag CLS-problemen door aangepaste webfonts niet volledig voorkomt, maar wel vermindert.

JavaScript #

Het preloaden van JavaScript is zinvol voor specifieke scripts (geen bundles!) die above-the-fold-functionaliteit of in-viewport-interacties ondersteunen. Dit helpt de First Input Delay (FID) en Interaction to Next Paint (INP) zo laag mogelijk te houden tijdens de initiële paginalaad.

Houd wel in gedachten dat de meeste INP-problemen optreden na het laden van de pagina. INP registreert interacties gedurende de gehele levenscyclus van de pagina, inclusief tijdens het opstarten.

Inline scripts zijn een alternatief, maar die kan de browser niet cachen.

Hoe de preload tag technisch werkt #

De link rel=preload tag instrueert de browser om kritieke assets vroegtijdig op te halen en de laadvolgorde te prioriteren boven andere niet-kritieke resources. Door deze tag te gebruiken geef je de browser aan welke resources het belangrijkst zijn voor het renderen van de above-the-fold-inhoud.

Browser preload scanner #

Verwar de preload tag niet met de browser preload scanner. De browser preload scanner laadt resources op de achtergrond, ook wanneer de parser geblokkeerd is door render-blocking of parser-blocking resources zoals CSS of JavaScript.

Die scanner kan alleen resources preloaden waarvan de verwijzingen in de HTML staan. Resources die worden geladen via inline styling, inline scripts of externe stijl- of scriptbestanden zijn niet zichtbaar voor de scanner. De browser weet pas welke resources geladen moeten worden nadat alle CSS en/of JavaScript is geparsed, gecompileerd en uitgevoerd. Het preload-directief maakt het mogelijk om ook die kritieke — en met name grote — resources voor te laden.

Wat veel mensen niet weten: de resource wordt niet meteen geladen of uitgevoerd. De browser plant alleen een download met hogere prioriteit. Gepreloade resources worden gecached zodat ze direct beschikbaar zijn wanneer ze nodig zijn — scripts worden niet uitgevoerd en stylesheets worden niet toegepast.

Verplichte en optionele attributen #

Als HTML link-element in de head-sectie heeft de preload tag een aantal verplichte en optionele attributen.

as-attribuut

Met het as-attribuut kan de browser:

• Resources nauwkeuriger prioriteren bij het laden.
• Resources cachen voor toekomstige verzoeken en bepalen of de resource al in de cache staat.
• Passend content security-beleid toepassen op de resource.
• De juiste Accept-requestheaders instellen.

<head>
  <meta charset="utf-8" />
  <title>Preload example</title>
  <link rel="preload" href="critical.js" as="script" />
</head>

Met de preload tag declareert de browser vroeg in het laadproces welke resources hij zo snel mogelijk moet ophalen.

Als er geen geldig as-attribuut is opgegeven, identificeert de browser de resource verkeerd en geeft deze een onjuiste prioriteit. Het href-attribuut verwijst naar de resource die gepreload wordt.

crossorigin- en type-attributen

Toegestane waarden voor as zijn image, font, script, style, video en fetch. Let op: het preloaden van font- en fetch-resources vereist ook het crossorigin-attribuut vanwege CORS-beveiligingsmaatregelen in browsers.

<link rel="preload" href="/fonts/Inter-Semibold.woff2" as="font" type="font/woff2" crossorigin>

Fonts die gepreload worden zonder het crossorigin-attribuut worden twee keer opgehaald.

Via een type-attribuut met het MIME-type controleert de browser of het resource-type ondersteund wordt. Zo ja, dan wordt de resource gedownload; anders wordt het directief genegeerd.

Door een JSON-resource te preloaden als een fetch, wordt deze ontdekt voordat een JS-bundle er een verzoek voor doet.

<link rel="preload" as="fetch" href="/api/items.json" crossorigin>

media-attribuut

Responsive afbeeldingen zijn onmisbaar in modern webdesign, maar kunnen ook een grote oorzaak zijn van trage laadtijden als ze niet goed geoptimaliseerd zijn.

Een link preload-element accepteert ook een media-attribuut, wat responsief preloaden mogelijk maakt. Omdat responsief preloaden geen begrip heeft van "volgorde" of "eerste overeenkomst", zijn de breekpunten in het media-attribuut verplicht.

<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)" />

<link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)" />

imagesizes- en imagesrcset-attributen

Wil je een responsive afbeelding preloaden met sizes- en srcset-attributen, dan gebruik je de imagesrcset- en imagesizes-attributen. Die mag je alleen opgeven op link-elementen met een rel-attribuut met het preload-sleutelwoord én een as-attribuut met het image-inhoudstype. Laat ook het href-attribuut weg, zodat browsers die dit niet ondersteunen geen nutteloze afbeelding opvragen.

<link rel="preload" as="image" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">

<!-- ... later, of dynamisch ingevoegd ... -->

<img src="wolf.jpg" alt="A rad wolf" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw">

Je kunt deze attributen gebruiken om responsive afbeeldingen te preloaden, maar Safari ondersteunt dit (nog) niet.

Het imagesrcset-attribuut kan gecombineerd worden met het media-attribuut om de juiste resource te preloaden die geselecteerd is uit de bronnen van een picture-element, voor art direction:

<link rel="preload" as="image" imagesrcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x" media="(max-width: 800px)">

<link rel="preload" as="image" imagesrcset="dog-wide-1x.jpg, dog-wide-2x.jpg 2x" media="(min-width: 801px)">

<!-- ... later, of dynamisch ingevoegd ... -->

<picture>

<source srcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x" media="(max-width: 800px)">

<img src="dog-wide-1x.jpg" srcset="dog-wide-2x.jpg 2x" alt="An awesome dog">

</picture>

fetchpriority-attribuut

Fetch Priority is een op markup gebaseerd signaal dat je via het fetchpriority-attribuut in HTML toepast. Daarmee geef je de relatieve prioriteit van een resource aan.

Wanneer een LCP-afbeelding via een link rel preload tag wordt geladen, verandert de prioriteit waarmee die afbeelding wordt geladen niet — die blijft laag. Chrome kent een hogere prioriteit toe zodra duidelijk wordt dat de afbeelding in de viewport wordt gerenderd. Maar op dat moment is het al te laat om de LCP-afbeelding tijdig te renderen.

Wil je fetchpriority gebruiken voor een LCP-afbeelding, dan kun je dit attribuut in de img-tag toepassen. De browser preload scanner ontdekt het attribuut dan echter pas relatief laat. En bij het laden van een CSS-achtergrondafbeelding — wat overigens niet aanbevolen wordt voor LCP-kandidaten — is implementatie niet mogelijk.

Fetch Priority kan preload aanvullen door het fetchpriority-attribuut aan de preload tag toe te voegen. Met fetchpriority='high' start de afbeelding met een hoge prioriteit en wordt ze veel eerder geladen.

<link rel="preload" href="lcp-image.jpg" as="image" fetchpriority="high" />

Houd er rekening mee dat fetchpriority een hint is, geen directief. De browser kan er van afwijken — anders dan preload, dat een verplichte fetch is. Preload laat de browser de resource vroeg ontdekken, maar haalt deze nog steeds op met de standaardprioriteit. Fetch Priority helpt niet bij de ontdekking, maar verhoogt of verlaagt wel de ophaalprioriteit.

Andere toepassingen van de link rel preload tag #

HTTP response header #

Je kunt elk type resource ook preloaden via de Link HTTP-header, in plaats van via de HTML-tag:

Link: </css/style.css>; rel="preload"; as="style"

Een voordeel van preload in de HTTP-header is dat de browser het document niet hoeft te parsen om het te ontdekken, wat in sommige gevallen kleine verbeteringen oplevert.

Early Hints #

Preload werkt goed samen met Early Hints. Early Hints is een functie waarmee webservers hints over aankomende resources naar de browser sturen voordat de volledige response verstuurd wordt.

Samen kunnen link rel=preload en Early Hints de laadtijden aanzienlijk verkorten, omdat browsers zo snel mogelijk beginnen met het downloaden van kritieke resources. Gebruikers zien de inhoud daardoor sneller, ook op trage verbindingen of apparaten.

Om link rel=preload samen met Early Hints te gebruiken, neem je een Link HTTP-header op in je serverresponses. Houd er rekening mee dat zowel de server als de browser Early Hints moeten ondersteunen.

Performance anti-patterns van link rel preload tags #

Verkeerd gebruikt schaadt preload de prestaties: onnodige verzoeken voor resources die niet worden gebruikt concurreren om bandbreedte met kritieke resources. Daardoor vertraag je juist de initiële rendering of het LCP-moment.

Vermijd de volgende valkuilen:

• Te veel resources preloaden.
• Resources preloaden die niet door de browser worden gebruikt.
• Off-screen (below-the-fold) resources preloaden.
• Verplichte attributen van de link rel=preload tag weglaten.
• Font preload hints die vóór de link rel=stylesheet in de head van het HTML-document staan.
• Een hero- (en LCP-)afbeelding preloaden, maar deze verbergen via CSS en pas tonen nadat JavaScript voor een slider of carousel is uitgevoerd.

Conclusie #

De link rel=preload tag is een onmisbaar instrument voor prestatieverbetering. Je kunt hem voor uiteenlopende gebruikssituaties inzetten — en er worden nog steeds nieuwe functies aan toegevoegd.

Maar juist omdat het zo'n krachtig instrument is, zijn er risico's aan verbonden. Gebruik het verkeerd en je schaadt de prestaties in plaats van ze te verbeteren. Om daar het beste uit te halen, heb je inzicht nodig in wat je doet — en wat het effect is op de gebruikerservaring.