jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-tools

Gratis Preload Tag Builder

Genereer correcte preload link tags voor lettertypen, hero afbeeldingen, CSS en scripts.

Tool laden...

Wat is Preload Tag Builder?

Preload vertelt de browser om een resource vroeg te laden voordat deze normaal wordt ontdekt. Het versnelt laden voor fonts, hero-afbeeldingen, kritieke CSS en scripts. Het as-attribuut is vereist.

Snel antwoord

Gebruik preload om kritieke resources zoals hero-afbeeldingen en fonts te laden voordat de parser ze ontdekt. Preload slechts een paar resources per pagina.

Last updated: 2026-05-25

Beperkingen

  • Preload vereist het as-attribuut. Verkeerde waarde kan dubbele fetching veroorzaken.
  • Cross-origin resources hebben crossorigin nodig.
  • Overmatig preloaden schaadt prestaties.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Selecteer het resourcetype: font, afbeelding, CSS of script.
  2. Voer de URL of het bestandspad in.
  3. De tool voegt de juiste as- en crossorigin-attributen toe.
  4. Kopieer de link-tag in de paginakop.

Waarvoor je het kunt gebruiken

  • Preload een kritiek font voor correcte tekstweergave bij de eerste verfbeurt.
  • Preload een hero-afbeelding voor betere LCP.
  • Preload kritieke CSS of JavaScript.

Gebruik

Praktische voorbeelden

Voorbeeld

Web font preloading

Een preload-tag met as="font" en crossorigin haalt een font vroeg op, waardoor flits van onzichtbare tekst vermindert.

Voorbeeld

Hero-afbeelding preloading

Een landingspagina preloadt de hero-afbeelding met as="image" om LCP-timing met honderden milliseconden te verbeteren.

Veelgemaakte fouten

  • Te veel resources preloaden, wat bandbreedte verspilt.
  • Preload zonder het as-attribuut gebruiken.
  • Cross-origin fonts preloaden zonder crossorigin.

Verificatie

  1. Controleer in Chrome DevTools of de preload vroeg in de waterfall verschijnt.
  2. Controleer de console op preload-waarschuwingen.

Vergelijking

preload vs prefetch vs modulepreload

Aspectpreloadprefetchmodulepreload
What it loadsResources needed for the current pageResources likely needed for the next navigationES module scripts for the current page
When the browser fetches itImmediately, at high priority during page loadDuring idle time after the current page finishes loadingImmediately at high priority, similar to preload, but fetches the module and its dependencies
What it is best forCritical fonts, hero images, above-the-fold CSSNext-page resources such as docs, images, or scripts for the likely next pageES module entry points and their dependency trees in modern bundler output
Required attributesrel="preload" and the as attributerel="prefetch"rel="modulepreload"
Browser support milestoneChrome 50+, Safari 9+, Firefox 56+Chrome 50+, Safari 9+, Firefox 2+Chrome 80+, Safari 15+, Firefox 115+

Preload fetches current-page resources early at high priority. Prefetch fetches likely next-page resources during idle time. Modulepreload is a specialized preload for ES module scripts and their dependencies.

FAQ

Vragen over Preload Tag Builder

Verschil tussen preload en prefetch?

Preload haalt huidige-pagina resources vroeg op. Prefetch haalt volgende-pagina resources op tijdens rusttijd.

Moet ik alles preloaden?

Nee. Preload een klein aantal echt kritieke resources.

Is het as-attribuut verplicht?

Ja. Zonder as-attribuut wordt preload genegeerd en krijgt u een consolewaarschuwing.

Wat gebeurt als een preload niet wordt gebruikt?

De browser geeft een waarschuwing en de resource kan worden weggegooid. Ongebruikte preloads verspillen bandbreedte.

Gerelateerde tools

Meer html-tools

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool

Probeer ook

Probeer ook