Priority Hints and fetchpriority: Speed Up Resource Loading

How fast are your most critical resources loading?

This exact question has website owners (and seasoned web experts) on pins and needles. And it just so happens it's what makes or breaks your website in the first milliseconds.

When it comes to optimizing resource loading, you have two options:

1. Rely entirely on browsers' mechanisms to download and fetch resources in an optimal order.
2. Try to help them by implementing resource hints. 

Unfortunately, as good as modern browsers are, each site/application differs in setup and context. And while they are pretty good at assigning resource priorities, in some cases, that isn't enough. 

Alas, resource hints provide a limited influence over resource prioritization.

Luckily, there is a new hint that you can add to your web performance toolbox – Priority Hints.

And in this article, you'll learn more about:

• What Priority Hints are;
• When to use them;
• How to implement them via fetchpriority;
• How you can test them on your site.

Let's begin! 

 

What are Priority Hints?

Priority Hints are a signal that allows website owners and developers to indicate the priority of resources (e.g., images, fonts, CSS, scripts, and iframes) when browsers load them.

 

The browser has to download all kinds of resources in the process of building a web page. As a priority resource, it requests and downloads the HTML document first. 

But how does a browser determine what to load next? 

Well, browsers have a set of predetermined priorities for each resource type:

These default priorities usually work pretty well, which results in good web performance. 

However, as Addy Osmani mentioned in his article on Priority hints, browsers can make pretty good educated guesses about what to fetch next.

But they don't know your project as well as you do.

So a little fine-tuning might be necessary:

"Browsers like Chrome do have heuristics for attempting to fetch resources with the appropriate priority based on signals such as whether they are in the viewport. That said, without Priority Hints, Chrome is only able to boost the priority for in-viewport images once layout has been completed. This is very often too late, and at this point, it can compete with everything else. Another reason to consider using hints is that as a page author, you likely know what is most important for your users to see first and can inform the browser so it can optimize for your use-case."

Previously, the only thing you would be able to do was to use either preload or preconnect. 

And although preload is a mandatory directive that browsers need to comply with, in some cases, the preloaded resource can still get a low priority. 

For instance, a preloaded Largest Contentful Paint (LCP) image can get a low priority and be pushed back by other high-priority resources. In such cases, Priority Hints can perfectly complement preload and help how soon the resources get loaded.

Here's a webinar on Priority Hints, where Pat Meenan talks about Priority Hints in Chrome and even calls them "a cheat code" for LCP:

This is a prime example of the power of Priority Hints.

Now, let's see when you should implement Priority Hints in your web performance strategy.

 

When to Use Priority Hints

There are 5 main scenarios where Priority Hints could help, according to Google:

1. You have several above-the-fold images, but all of them need not have the same priority. For example, in an image carousel, only the first visible image needs a higher priority compared to the others.
    
2. Hero images inside the viewport start at a low priority. After the layout is complete, Chrome discovers they are in the viewport and boosts their priority (unfortunately, dev tools only shows the final priority - WebPageTest will show both). This usually adds a significant delay to loading the image. Providing the priority hint in markup lets the image start at a high priority and start loading much earlier.
   
   Note: preload is still required for the early discovery of LCP images included as CSS backgrounds and can be combined with priority hints by including the fetchpriority='high' on the preload, otherwise, it will still start with the default "Low" priority for images.
    
3. Declaring scripts as async or defer tells the browser to load them asynchronously. However, as seen in the figure above, these scripts are also assigned a "low" priority. You may want to bump up their priority while ensuring asynchronous download, particularly for any scripts that are critical for the user experience.
    
4. You may use the JavaScript fetch() API to fetch resources or data asynchronously. Fetch is assigned a high priority by the browser. There may be situations where you do not want all your fetches to be executed with high priority and prefer using different priority hints instead. This can be helpful when running background API calls and mixing them with API calls that are responding to user input, like with autocomplete. The background API calls can be tagged as low priority, and the interactive API calls marked as high priority.
    
5. The browser assigns CSS and fonts a high priority, but all such resources may not be equally important or required for LCP. You can use priority hints to lower the priority of some of these resources.

Almost any website falls under the first two scenarios. To determine if you should work on any of the rest, either dig deeper into your (HTML/JS) code or seek help from a web developer.

 

How to Implement Priority Hints: The fetchpriority Attribute

You can implement Priority Hints using the fetchpriority HTML attribute. 

You can use the attribute with: 

• link 
• img
• script 
• iframe tags

The fetchpriority attribute accepts one of three values:

• high: indicating that you consider the resource critical and want the browser to prioritize it.
• low: signaling that you consider the resource less important and want the browser to deprioritize it.
• auto: a default value when you don't have a preference and let the browser decide the appropriate priority.

Alternatively, you can use the JavaScript Fetch API:

Few things to keep in mind when using the fetchpriority attribute:

• fetchpriority doesn't ensure that a higher-priority resource will be loaded before other (lower-priority) resources of the same type. 
• fetchpriority shouldn't be used to control the loading order itself.
• fetchpriority isn't a mandatory directive, and it cannot force the browser to fetch a resource or prevent it from fetching. It's up to the browser if it's going to fetch the resource or not. 

 

How to Test Your Site with Priority Hints

Before running your tests, you should know that Priority Hints are available only in Chrome 101 (or later) and Edge 101 (or later):

Now to the question at hand:

The easiest way would be to use a tool, so you don't have to change your code manually. 

Luckily, WebPageTest's Experiments feature lets you test performance features like Priority Hints without changing your code.

However, WebPageTest's Experiment feature is part of their paid subscription, so you need to plan for some extra expenses.

Contrary, if you have tech skills, you can fine-tune your site's code on your own and test Priority Hints' impact. 

Make sure to run tests after every alteration you make.

 

Recap

We covered a lot of ground, so here's a quick recap of the most important points:

• Priority Hints allow you to indicate the priority of your site's resources.
• Priority Hints can help you speed up loading above-the-fold images, hero images (LCP element), asynced and deferred scripts, CSS, and font files.
• Priority Hints can be implemented through the fetchpriority attribute.
• You can use the fetchpriority attribute with link, img, script, and iframe tags.
• The fetchpriority attribute accepts one of three values: high, low, and auto. 
• Caution: Priority Hints should be implemented sparingly as their overuse might lead to decreased performance rather than speed improvements.
• fetchpriority isn't a mandatory directive, and it cannot force the browser to fetch a resource or prevent it from fetching. It's up to the browser if it's going to fetch the resource or not. 
• Priority Hints are available in Chrome 101 or later.

To measure Priority Hints' impact on your site, run tests after every alteration.

Popular testing tools:

• PageSpeed Insights
• GTMetrix
• WebPageTest
• Lighthouse
• Pingdom