Newly available Useful in modern browsers, but confirm support before making it a core requirement.

Fetch priority

The fetchpriority attribute allows a developer to signal that fetching a particular image early in the loading process has more or less impact on user experience than a browser can reasonably infer when assigning an internal priority. This in turn allows the browser to increase or decrease the priority, and potentially load the image earlier or later than it would otherwise.

This attribute may be applied to <img>, <link>, and <script> elements. It also has an SVG counterpart.

The fetch priority can be used to complement preloading, allowing a developer to boost the priority ahead of less-impactful resources that have a higher default priority. For example, if a developer knows that a particular image significantly contributes to the website's Largest Contentful Paint (LCP) they could add <link rel="preload"> for the image and then further boost the priority using the fetchpriority attribute.

Note that both the internal priority of any fetch operation, and the impact of fetchpriority on the priority, are entirely browser dependent.

This attribute is enumerated and can have one of the following values:

high

Fetches the external resource at a high priority relative to other external resources.

low

Fetches the external resource at a low priority relative to other external resources.

auto

Doesn't set a preference for the fetch priority. It is used if no value or an invalid value is set. This is the default.

Resource hints

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
html.elements.img.fetchpriority
101
101
132
17.2
101
17.2
HTML attribute
fetchpriority

The fetchpriority attribute allows a developer to signal that fetching a particular image early in the loading process has more or less impact on user experience than a browser can reasonably infer when assigning an internal priority. This in turn allows the browser to increase or decrease the priority, and potentially load the image earlier or later than…
101
101
132
17.2
101
17.2
fetchpriority

The fetchpriority attribute allows a developer to signal that fetching a particular image early in the loading process has more or less impact on user experience than a browser can reasonably infer when assigning an internal priority. This in turn allows the browser to increase or decrease the priority, and potentially load the image earlier or later than…
101
101
132
17.2
101
17.2
DOM API
init_priority_parameter

`init.priority` parameter
101
101
132
17.2
101
17.2
fetchPriority

The fetchPriority property of the HTMLImageElement interface represents a hint to the browser indicating how it should prioritize fetching a particular image relative to other images. It reflects the element's fetchpriority content attribute.
102
102
132
17.2
102
17.2
fetchPriority

The fetchPriority property of the HTMLLinkElement interface represents a hint to the browser indicating how it should prioritize fetching a particular resource relative to other resources of the same type. It reflects the element's fetchpriority content attribute.
102
102
132
17.2
102
17.2
fetchPriority

The fetchPriority property of the HTMLScriptElement interface represents a hint to the browser indicating how it should prioritize fetching an external script relative to other external scripts. It reflects the element's fetchpriority content attribute.
102
102
132
17.2
102
17.2
Request (init priority parameter)

`init.priority` parameter
101
101
132
17.2
101
17.2
Other
http.headers.Link.fetchpriority
103
103
132
17.2
103
17.2
svg.elements.feImage.fetchpriority
Experimental Non-standard

The fetchpriority attribute provides a hint to the browser about the relative priority to use when fetching an external resource. This works the same way as the fetchpriority attribute for the HTML img and script elements.
140
svg.elements.image.fetchpriority
Experimental Non-standard

The fetchpriority attribute provides a hint to the browser about the relative priority to use when fetching an external resource. This works the same way as the fetchpriority attribute for the HTML img and script elements.
140
svg.elements.script.fetchpriority
Experimental Non-standard

The fetchpriority attribute provides a hint to the browser about the relative priority to use when fetching an external resource. This works the same way as the fetchpriority attribute for the HTML img and script elements.
140
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (102)
Implementation note
  • Previously available under a different name: fetchpriority (101)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (102)
Implementation note
  • Previously available under a different name: fetchpriority (101)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (102)
Implementation note
  • Previously available under a different name: fetchpriority (101)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (102)
Implementation note
  • Previously available under a different name: fetchpriority (101)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (102)
Implementation note
  • Previously available under a different name: fetchpriority (101)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (102)
Implementation note
  • Previously available under a different name: fetchpriority (101)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (102)
Implementation note
  • Previously available under a different name: fetchpriority (101)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (102)
Implementation note
  • Previously available under a different name: fetchpriority (101)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (102)
Implementation note
  • Previously available under a different name: fetchpriority (101)

Syntax

HTML 
<!-- LCP images are given high priority --> <img src="hero.jpg" fetchpriority="high" alt="hero image"> <!-- Low priority outside first view --> <img src="footer.jpg" fetchpriority="low" loading="lazy" alt="footer image"> <script src="analytics.js" fetchpriority="low"></script>

Live demo

Priority hints overview

Compare high, auto, and low fetchPriority values for images or scripts.

PreviewFullscreen

Priority hint guidance

Explain that fetchPriority is a hint, not an absolute scheduling command.

PreviewFullscreen

Tuning checklist

Use priority hints sparingly and validate the real loading order in DevTools.

PreviewFullscreen

Use cases

  • Control document behavior

    Use Fetch priority to influence loading, metadata, or script behavior at the document level.

  • Tune performance strategy

    Apply Fetch priority when earlier resource hints or document settings improve startup or runtime behavior.

Cautions

  • Test Fetch priority in your target browsers and input environments before depending on it as a primary behavior.
  • Provide a fallback path or acceptable degradation strategy when support is still limited.

Accessibility

  • Make sure Fetch priority supports the intended task without making the page harder to perceive, understand, or operate.

Related links