Experiment with Priority Hints Locally

Use Chrome Local Overrides to see how you could influence the order of resource downloads

Published: Nov 18, 2021

I’ve been playing around with Priority Hints, an experimental feature in Chrome 96+ that can help you influence the download order of resources. I was able to improve Largest Contentful Paint by 500ms (Chrome desktop, 3GFast) just by adding importance="high" to an image.

A comparison of network traffic shows that using priority hints changes the download order
An image with higher importance is downloaded sooner

You can register to use the feature as part of an Origin Trial. Doing so lets you can contribute valuable feedback to the Chrome team to help develop the feature. As stated in the docs:

When Chrome offers an origin trial for a feature, you can register for the trial to enable the feature for all users on your origin, without requiring them to toggle any flags or switch to an alternative build of Chrome (though they may need to upgrade).

So in order to enable the feature for all users right now (2021-11-18), you’ll need to add the Origin Trial token to the HTTP header, as Pat Meenan noted.

Nevertheless, you can still add Priority Hints to your site now (browsers that don’t understand them will ignore them, thank HTML) – even without an Origin Trial token – and enable “Priority Hints” or “Experimental Web Platform Features” in Chrome 96 to see any priority hints in action that you have live.

Experimenting with Priority Hints using Cloudflare Workers and WebPageTest lets you compare metrics, and you don’t need an Origin Trial token.

Alternatively, you can play around with Priority Hints locally, e.g. using Chrome Local Overrides. You don’t need an Origin Trial token to do so, and you can make changes quicker to “sketch out” ideas. And this is how I do it:

1. Open Chrome with Priority Hints enabled

Open Chrome via Terminal with Priority Hints enabled via flag (e.g. on a Mac):

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-blink-features=PriorityHints

2. Enable Local Overrides

Local Overrides is a feature in Chrome that lets you save copies of webpage resources, modify them and load them from disk.

Enable Local Overrides and save a copy of the main document.

Then add the attribute importance="high" or importance="low" to an <link>, <img>, <script> or <iframe> and save your changes.

For example, adding importance="high" to the <img> tag for Image Z will make it queue for download before X and Y.

<img src="X.jpg">
<img src="Y.jpg">
<img src="Z.jpg" importance="high">

Or you can add importance="low" to resources that you want to demote, e.g. font preloads:

<link href="font_a.woff2" rel="preload" as="font" type="font/woff2" importance="low">
<link href="font_b.woff2" rel="preload" as="font" type="font/woff2" importance="low">
<link href="font_c.woff2" rel="preload" as="font" type="font/woff2" importance="low">
<link href="font_d.woff2" rel="preload" as="font" type="font/woff2" importance="low">
<!-- Followed by other critical resources -->

3. Compare

You can inspect network activity in Developer Tool’s Network tab to see the order of downloads – just checking the baseline without any Priority Hints added.

Before: Fonts preloaded at the top of the head without Priority Hints

Then add Priority Hints and see whether the resources are higher or lower in the download queue and how page loading is affected.

After: Using Priority Hints on all font preloads demotes some (!) of them

Or you can run a Lighthouse audit with and without the Priority Hints and save each of the results.

After running a Lighthouse audit in Chrome DevTools, save the results as HTML or JSON by clickng on the options menu
After running a Lighthouse audit in Chrome DevTools, save the results as HTML or JSON

Then you can compare the Lighthouse audits using Lighthouse-CI viewer to see how Web Vitals are affected.

Metric changes displayed in a chart
Demoting font preloads improved LCP in my example – but did increase Speed Index

So there’s really nothing holding you back from trying out Priority Hints today!

More from my blog

All Blog Articles →