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.
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=PriorityHints2. 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.
<head>
...
</head>
<body>
<img src="X.jpg">
<img src="Y.jpg">
<img src="Z.jpg" importance="high">
</body>Or you can add importance="low" to resources that you want to demote, e.g. font preloads:
<head>
<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 -->
</head>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.
head without Priority HintsThen add Priority Hints and see whether the resources are higher or lower in the download queue and how page loading is affected.
Or you can run a Lighthouse audit with and without the Priority Hints and save each of the results.
Then you can compare the Lighthouse audits using Lighthouse-CI viewer to see how Web Vitals are affected.
So there’s really nothing holding you back from trying out Priority Hints today!