Priority Hints: 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 the newest implementation to add to our page speed toolbelt: Priority Hints.

What are Priority Hints?

Priority Hints is a specification proposal by Yoav Weiss, Addy Osmani and Patrick Meenan that 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).

Priority Hints fill the gap of prioritising resources that the browser already knows about against each other.

Priority Hints have been in development in a few different forms (such as the importance attribute) since 2017 and will be available soon in Chromium-based browsers.

When to use Priority Hints?

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 Priority Hints can be helpful. Like preload, Priority Hints are best used with caution, as overuse might result in slowdowns rather than speed improvements.

Accordingly to specification, there are a handful of scenarios when Priority Hints aid 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 Priority Hints, 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 Priority Hints, 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 Priority Hints, you can prioritise critical API calls over background activity and less important content.

How to implement Priority Hints?

You can implement Priority Hints through the fetchpriority HTML attribute or the JavaScript Fetch API. For both approaches, Priority Hints have 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.

Priority Hints can be added to the following HTML elements:

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

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

1<!-- link: initiate an early fetch but deprioritise the script -->
2<link href="/js/script.js" rel="preload" as="script" fetchpriority="low" />
3
4<!-- img: deprioritise an image in viewport that could be otherwise prioritised by the browser -->
5<img src="/images/in-viewport-but-unimportant.svg" fetchpriority="low" alt="" />
6
7<!-- script: prioritise critical script -->
8<script src="/js/live-chat.js" fetchpriority="high"></script>
9
10<!-- iframe: deprioritise a third-party embed that’s not essential -->
11<iframe src="https://example.com" width="400" height="400" fetchpriority="low"></iframe>

Alternatively, you can use the JavaScript Fetch API:

1// Critical Fetch request for article content
2fetch('/api/articles.json', { priority: 'high' }).then(/*...*/)
3
4// Request for related content now reduced in priority
5// reducing the opportunity for contention
6fetch('/api/related.json', { priority: 'low' }).then(/*...*/)

How are Priority Hints 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 (rel=" dns-prefetch|prefetch|preconnect|prerender") 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:

Which browsers support Priority Hints?

Priority Hints have been available as an origin trial in Chrome Canary since version 96. They are now coming to all Chromium browsers and will be released in Chrome 101 stable. So far, also Firefox deemed Priority Hints as worth exploring.

Can I Use, which showcases browser support tables for modern web technologies, now documents the browser support of Priority Hints. Now is an excellent time to start experimenting on how Priority Hints could help improve speed in your projects!

Thank you for review to Patrick Meenan.

Karolina Szczur

Karolina is a Co-founder and Product Design Lead at Calibre. With years of design experience under her belt, she’s responsible for the comprehensive user experience spanning over product, visuals and content. Find her on Mastodon or LinkedIn.