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:
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:
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.
There are 5 main scenarios where Priority Hints could help, according to Google:
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.
You can implement Priority Hints using the fetchpriority HTML attribute.
You can use the attribute with:
The fetchpriority attribute accepts one of three values:
Few things to keep in mind when using the fetchpriority attribute:
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.
We covered a lot of ground, so here's a quick recap of the most important points:
To measure Priority Hints' impact on your site, run tests after every alteration.
Popular testing tools:
Niko is one of the NitroPack storytellers. He is passionate about writing quality content and turning complex optimization concepts into engaging articles.