Priority Hints: Influence How Browsers Fetch Resources – Calibre


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 is a specification proposal by Yoav WeissAddy 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.

Did you know?

It’s important to note that Priority Hints are not mandatory in execution (like the preload attribute), but they are preference hints that browsers should consider when fetching resources. This might mean that built-in browser heuristics can override Priority Hints. Learn more in How are Priority Hints different to other priority management strategies section.

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 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.

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

2<link href="/js/script.js" rel="preload" as="script" fetchpriority="low" />

3

4

5<img src="/images/in-viewport-but-unimportant.svg" fetchpriority="low" alt="" />

6

7

8<script src="/js/live-chat.js" fetchpriority="high"></script>

9

10

11<iframe src="https://example.com" width="400" height="400" fetchpriority="low"></iframe>

Alternatively, you can use the JavaScript Fetch API:

1

2fetch('/api/articles.json', priority: 'high' ).then()

3

4

5

6fetch('/api/related.json', priority: 'low' ).then()

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:

AttributeWhat it doesSupported HTML elementsMandatory browser instruction
fetchpriorityIndicates 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, iframeNo
loadingDelays the start of loading of an asset until it’s close to the viewport.

Helpful in optimising media performance (unless overused).

img, iframeYes
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, linkYes
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.

linkNo
rel=”prefetch”Indicates that the next navigation might require the resource.

Useful to optimise the speed of predicted future interactions by pulling subsequent pages or resources (static assets or relevant JavaScript bundle chunks).

linkNo
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.

linkNo
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.

linkYes

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 the 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 Twitter or LinkedIn.





Source link

Leave a Reply

Your email address will not be published.

Previous Article

Leftover Roasted Lamb Gyros • Olive & Mango

Next Article

Triceps surae strength balancing as a management option for early-stage knee osteoarthritis: A patient case

Related Posts