Fetch Priority: Influence How Browsers Fetch Resources

Loading critical assets as fast as possible is vital for improving web performance (including Core Web Vitals) and user experience. While browsers can make educated guesses about loading resources, each site and application differs in setup and context. We're most likely to be successful if we choose which assets are indeed critical and should be downloaded and processed as soon as possible.

There already are several ways of asset prioritisation and managing requests to ensure near-instant loading. This article will cover one of the most direct controls available: Fetch Priority.

What is Fetch Priority?#

Fetch Priority, first proposed as Priority Hints by Yoav Weiss, Addy Osmani and Patrick Meenan, exposes a mechanism for authors and developers to signal the relative priority of resources when they're fetched by browsers (through the fetchpriority HTML attribute and priority for JavaScript Fetch API). It was renamed Fetch Priority when it was standardised, and now lives in the HTML specification.

Fetch Priority fills the gap of prioritising resources that the browser already knows about against each other.

Fetch Priority was in development in a few different forms (such as the importance attribute) from 2017, and is now a Baseline 2024 feature available in every major browser.

When to use Fetch Priority?#

There are numerous mechanisms to control the priority of resources, but even when using them, we still might not achieve optimal speed results for our context. That's when Fetch Priority can be helpful. Like preload, fetchpriority is best used with caution, as overuse might result in slowdowns rather than speed improvements.

Accordingly to specification, there are a handful of scenarios when Fetch Priority aids with optimal resource loading:

• Signal high-priority images: A priority hint on image elements present in the viewport can signal the browser to fetch a vital image (e.g. main product image) or decrease the importance of hidden images (e.g. images in a carousel). While the text-based LCP element is your best bet for the fastest values, when working with images, you can improve your Largest Contentful Paint with fetchpriority.
• Signal priority of asynchronous scripts: While we can use async and defer to load JavaScript asynchronously without blocking the main thread, those strategies might not result in the optimal loading order. Similarly to fetch() API calls described below, we can influence priority with fetchpriority, such as boosting scripts responsible for critical parts of interfaces and adding low priority to scripts responsible for background work.
• Signal priority of Fetch API calls: Without a priority set, the browser prioritises Fetch API calls equally at high priority. This approach can cause issues when multiple resources compete at the same importance level, blocking user interaction or essential content. With the priority option, you can prioritise critical API calls over background activity and less important content.

How to implement Fetch Priority?#

You can set fetch priority through the fetchpriority HTML attribute or the JavaScript Fetch API. For both approaches, there are three states:

• high: signalling that you consider the resource important (relative to other resources of the same type).
• low: signalling that you think the resource is less important (relative to other resources of the same kind).
• auto: a default value when you don’t have a priority preference and let the browser decide the appropriate priority.

fetchpriority can be added to the following HTML elements:

• link
• img (also within the picture tag)
• script

To use Fetch Priority, add the fetchpriority attribute to one of the accepted HTML elements:

<!-- link: initiate an early fetch but deprioritise the script -->
<link href="/js/script.js" rel="preload" as="script" fetchpriority="low" />

<!-- img: deprioritise an image in viewport that could be otherwise prioritised by the browser -->
<img src="/images/in-viewport-but-unimportant.svg" fetchpriority="low" alt="" />

<!-- script: prioritise critical script -->
<script src="/js/live-chat.js" fetchpriority="high"></script>

Alternatively, you can use the JavaScript Fetch API:

// Critical Fetch request for article content
fetch("/api/articles.json", { priority: "high" }).then(/*...*/);

// Request for related content now reduced in priority
// reducing the opportunity for contention
fetch("/api/related.json", { priority: "low" }).then(/*...*/);

How is Fetch Priority different to other priority management strategies?#

A handful of available HTML attributes (and methods exposed via the JavaScript APIs) allow developers to control the priority and loading of critical resources. One of the vital differences in the differentiation between a mandatory browser instruction (the browser has to apply given priority, e.g. with loading and rel="preload") and a resource hint (rel="dns-prefetch|prefetch|preconnect") or priority hint (fetchpriority) where the browser might act on this guidance.

Below, we compare methods of loading and managing priority, so you can choose the one that's most suitable for your use case:

To fetch or render a whole page ahead of a navigation, use the Speculation Rules API rather than rel="prerender". It replaces the old hint and gives you much finer control over which pages get speculated and when.

Which browsers support Fetch Priority?#

fetchpriority shipped in Chrome 101, followed by Safari 17.2 and Firefox 132. It reached Baseline in October 2024, so it is now available in every major browser.

Can I Use, which showcases browser support tables for modern web technologies, documents the browser support of fetchpriority. If you have not tried it yet, now is an excellent time to experiment with how Fetch Priority could help improve speed in your projects!

Thank you for review to Patrick Meenan.