fetchpriority is an HTML attribute that tells the browser how important a resource is compared to other resources of the same type. It is a hint. Per web.dev, the browser applies its own judgment, especially when signals conflict.
Values and elements
MDN lists three values: high (fetch with higher priority), low (lower priority) and auto (the default, no preference). The attribute works on img, link and script elements, and there is an SVG counterpart. The Fetch API accepts a similar priority option.
When does it help?
The typical case is the image that becomes the Largest Contentful Paint (LCP) element: fetchpriority="high" can make it load sooner. web.dev also mentions low for off-screen images in a carousel and for non-critical blocking scripts, and high for async scripts that matter for interactivity.
fetchpriority complements rel="preload". Preload makes the browser discover a resource early, while fetchpriority influences how it ranks that download against others.
Example
<img src="hero.jpg" fetchpriority="high" alt="Product photo">
<img src="pixel.gif" fetchpriority="low" alt="">
Common mistakes
MDN advises using the attribute sparingly. If many resources get high, none of them stands out and loading can get worse. It also only works on resources the browser already discovers early, so an image injected late by JavaScript probably gains little (assessment).
Sources
- fetchpriority attribute – MDN Web Docsdeveloper.mozilla.org
- Optimize resource loading with the Fetch Priority API – web.devweb.dev
Last updated: