jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-tools

Gratis Fetch Priority Attribute Generator

Genereer fetchpriority attributen voor afbeeldingen, scripts en link tags.

Tool laden...

Wat is Fetch Priority Attribute Generator?

Fetchpriority is een HTML-attribuut dat de browser een hint geeft welke resources eerder moeten laden. Het verbetert Largest Contentful Paint bij hero-afbeeldingen en kan niet-kritieke resources deprioriteren. Het verschilt van preload en loading="lazy".

Snel antwoord

Gebruik fetchpriority="high" alleen voor de resource die het meest waarschijnlijk het LCP-element wordt. Markeer niet te veel resources als hoge prioriteit.

Last updated: 2026-05-25

Beperkingen

  • Fetchpriority is een hint, geen directive.
  • Oudere browsers zoals Safari 15.4 en lager ondersteunen het niet.
  • Overmatig gebruik verwatert de hint.

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

Zo gebruik je deze tool

  1. Selecteer het resourcetype: afbeelding, script of link.
  2. Kies de use case: LCP-hero, onder-de-vouw of niet-kritiek script.
  3. De tool adviseert de fetchpriority-waarde.
  4. Kopieer de tag en test met Lighthouse.

Waarvoor je het kunt gebruiken

  • Pas fetchpriority="high" toe op de LCP-hero-afbeelding.
  • Deprioriteer onder-de-vouw afbeeldingen met fetchpriority="low".
  • Prioriteer kritieke scripts en stylesheets.

Gebruik

Praktische voorbeelden

Voorbeeld

LCP-hero-optimalisatie

Een hero-afbeelding als LCP-element krijgt fetchpriority="high" en een geoptimaliseerde srcset.

Voorbeeld

Laagprioriteit footer

Footer-afbeeldingen krijgen fetchpriority="low" om concurrentie te verminderen.

Veelgemaakte fouten

  • Te veel resources fetchpriority="high" geven, wat het voordeel tenietdoet.
  • Fetchpriority gebruiken op preloaded resources.
  • Vergeten fetchpriority te combineren met loading en decoding.

Verificatie

  1. Controleer de prioriteitskolom in Chrome DevTools Netwerkpaneel.
  2. Vergelijk LCP-timing met en zonder attribuut in het Prestatiepaneel.

Vergelijking

fetchpriority vs loading="lazy"

Aspectfetchpriorityloading="lazy"
What it controlsRelative loading priority of a resource compared to other resources on the same pageWhether the browser delays loading the resource until it is near the viewport
When to useOn the LCP element to load it sooner, or on non-critical resources to deprioritize themOn images and iframes below the fold to defer their load until the user scrolls near them
Effect on LCPCan improve LCP when set to high on the hero imageCan worsen LCP if applied above the fold. Only use below the fold.
Valid on which elementsimg, link, script, iframeimg, iframe
Browser supportChrome 101+, Edge 101+, Safari 16+, Firefox 122+Chrome 77+, Edge 79+, Safari 15.4+, Firefox 75+

fetchpriority hints at relative priority for loading while loading="lazy" defers loading until the element is near the viewport. They address different performance concerns and can be used together on the same element.

FAQ

Vragen over Fetch Priority Attribute Generator

Hoeveel resources mogen fetchpriority="high"?

Hooguit een of twee. Als alles hoge prioriteit heeft, heeft niets dat.

Garandeert fetchpriority sneller laden?

Nee, het is een hint. De browser bepaalt de uiteindelijke volgorde.

Welke resources hebben het meeste baat?

De LCP-afbeelding, het belangrijkste CSS-bestand en kritieke web fonts. Slechts een of twee resources.

Wanneer fetchpriority="low" gebruiken?

Voor afbeeldingen ver onder de vouw, analytics-scripts en social media embeds.

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