Fetch priority
The fetch() priority option and the fetchpriority HTML attribute give hints to the browser about which requests to do before other requests of the same type. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The fetch() priority option and the fetchpriority HTML attribute give hints to the browser about which requests to do before other requests of the same type. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 102 | 102 | 132 | 17.2 | 102 | 17.2 | |
| HTML attribute | ||||||
| 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 |
| 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 |
| 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 |
| 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 |
| 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 | | | |
- This feature was removed in a later browser version (102)
- Previously available under a different name: fetchpriority (101)
- This feature was removed in a later browser version (102)
- Previously available under a different name: fetchpriority (101)
- This feature was removed in a later browser version (102)
- Previously available under a different name: fetchpriority (101)
- This feature was removed in a later browser version (102)
- Previously available under a different name: fetchpriority (101)
- This feature was removed in a later browser version (102)
- Previously available under a different name: fetchpriority (101)
- This feature was removed in a later browser version (102)
- Previously available under a different name: fetchpriority (101)
- This feature was removed in a later browser version (102)
- Previously available under a different name: fetchpriority (101)
- This feature was removed in a later browser version (102)
- Previously available under a different name: fetchpriority (101)
- This feature was removed in a later browser version (102)
- Previously available under a different name: fetchpriority (101)
Syntax
<!-- 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.
Priority hint guidance
Explain that fetchPriority is a hint, not an absolute scheduling command.
Tuning checklist
Use priority hints sparingly and validate the real loading order in DevTools.
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
Powered by web-features