How to use the Priority Hints API to prioritize network requests

Image by Steve Raubenstine from Pixabay

The Priority Hints API gives developers a way to communicate the importance of a resource to the user experience. The browser may consider this signal when prioritizing the request (as you would expect, browsers have their own default prioritization of resources).

We can set priority hints in HTML resources using the importance attribute. The importance attribute can take three values:

• high: The resource may be prioritized if the browser’s own heuristics don’t prevent it.
• low: The resource may be deprioritized if the browser’s heuristics permit.
• auto: Lets the browser decide what priority is appropriate for a resource. This is the default value.

Priority hints using the importance attribute apply to <img>, <link>, <script>, and fetch().

Let’s look at some use cases:

<img>

Images on a webpage can have priority over each other. For example, in a social network feed page, the image of a post feed will have a higher priority than the user’s image.

It would be unrealistic for both images to load at the same time. So, we can use the importance attribute to de-prioritize the user’s image.

<div>
    <div><img importance="low" src="/img/121212123343.jpg" /></div>
    <div>
        <div>...</div>
        <div>...</div>
        <div><img importance="high" src="/img/12334343434.jpg" /></div>        
    </div>
</div>

Another example:

<ul>
    <img src="1.jpg" importance="high" />
    <img src="2.jpg" importance="low" />
    <img src="3.jpg" importance="low" />
</ul>

We have a Carousel here. The first image is shown when the page is loaded, then the slideshow begins.

Since the first image is the only one immediately visible to the user, it should have a higher priority.

<link>

<link rel="preload" href="/js/main.js" as="script">
<link rel="preload" href="/js/utils.js" as="script">

In the above example, we are loading two JS files. The main.js is more important than the utils.js since it is the web page’s main “engine” code.

With the rel="preload", both files will have an early fetch initiated for them. Both of them will have to compete.

The browser doesn’t know the critical files, and if utils.js is bigger than main.js, it will block main.js from loading.

Priority Hints will become the solution:

<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/main.js" as="script" importance="high">
<link rel="preload" href="/js/utils.js" as="script" importance="low">

<script>

We can tell the browser how important a script is by using the importance attribute on the <script> tag.

As developers, we arrange how important a script file is by sorting the script in ascending order of importance.

<script src="main.js"></script>
<script src="sidebar.js"></script>
<script src="utils.js"></script>

This is done so that the important scripts are loaded first, but that is not how the browser always behaves. In some cases, even the last script can block other scripts from loading.

Again, we solve this by using Priority Hints.

<script src="main.js" importance="high"></script>
<script src="sidebar.js" importance="low"></script>
<script src="utils.js" importance="low"></script>

fetch()

Here, the importance attribute is used in JavaScript. Sometimes we can have multiple fetch requests firing multiple times in our application to fetch data that will render in different parts of the app.

let article = await fetch("article/")
let related articles = await fetch("articles/related")

Some of these fetch requests are more important than others.

Common sense tells us that the article needs to be fetched first and rendered before the related articles.

// high by default
let article = await fetch("article/")
let relatedArticles = await fetch("articles/related", { importance: "low" })

Since fetch is set to high importance, we only had to explicitly set the related articles’ fetch to low.

One more thing

Priority Hints are still an experimental feature in Chrome. To use them, you have to enable the Experimental Web Platform features flag in about: flags.

You can see the specs on Priority Hints here.