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.
Priority Hints fill the gap of prioritising resources that the browser already knows about against each other.
Did you know?
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.
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 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.
- 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:
- img (also within the picture tag)
To use Priority Hints, add the fetchpriority attribute to one of the accepted HTML elements:
2<link href="/js/script.js" rel="preload" as="script" fetchpriority="low" />
5<img src="/images/in-viewport-but-unimportant.svg" fetchpriority="low" alt="" />
8<script src="/js/live-chat.js" fetchpriority="high"></script>
11<iframe src="https://example.com" width="400" height="400" fetchpriority="low"></iframe>
2fetch('/api/articles.json', priority: 'high' ).then()
6fetch('/api/related.json', priority: 'low' ).then()
Below, we compare methods of loading and managing priority, so you can choose the one that’s most suitable for your use case:
|Attribute||What it does||Supported HTML elements||Mandatory browser instruction|
|fetchpriority||Indicates the relative importance of a resource that the browser heuristics might wrongly prioritise.|
Useful to optimise load of critical assets that might not appear as vital.
|link, img, script, iframe||No|
|loading||Delays the start of loading of an asset until it’s close to the viewport.|
Helpful in optimising media performance (unless overused).
|rel=”preload”||Tells the browser to fetch a resource sooner.|
Useful for prioritising late-discovered resources and ensuring the most vital assets are fetched first (with a limit to several assets only).
|img, script, link||Yes|
|rel=”dns-prefetch”||Tells the browser to initiate DNS resolution for a given resource.|
Helpful in warming up connections for more than selected critical resources to improve perceived performance.
|rel=”prefetch”||Indicates that the next navigation might require the resource.|
|rel=”preconnect”||Indicates that we want to make a connection to an external domain as soon as possible.|
Helpful in warming up connections for critical resources from third-party origins.
|rel=”prerender”||Tells the browser to fetch and execute a resource or a page that might be needed next.|
Useful for delivering a near-instant loading experience when navigating. To be used with caution on slower connections.
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.