Home > Blog >

Priority Hints Do What They Say on the Tin For LCP

Priority Hints Lower LCP
23th Nov 21 (updated: )

Priority hints are no longer behind an origin trail, and are generally available from Chrome v101, and as of version 17.2, released on 11th Dec 23, supported in Safari, also bring this API to iOS devices. See browser support at Can I Use.

The attribute has changed from importance="…" to fetchpriority="…" (priority="…" on fetch requests) in the final spec, I have updated the article to reflect that.

Priority Hints seem to be a simple fix for lowering largest contentful paint score. I decided to try and see if I could get some of the improvements I've seen reported, with minimal effort.

Origin Trial

The origin trail is no longer running, and priority hints are generally available in Chrome, so you don't need to do this bit now.

At the moment, using priority hints involves signing up to the origin trial (you can sign up here), and is only supported in Chrome 96 and above, but with that rolling out now, it's a perfect time to test!

Signing up for and implementing the origin trial key is probably the most time-consuming part of this process, one that won't be needed if / when this goes mainstream. To get the proper benefit from this, make sure you send the origin trial key in the HTTP response headers:
origin-trial: {your_key_here}
rather than a meta tag in the head (where the trial might be seen too late to be fully effective).

Implementing the Hints

I've implemented the hints just in the blog section of this site. On the blog listing page, the LCP element is usually the image of the first article listed. I added the fetchpriority="high" attribute to that image.

                    <source srcset="https://tamethebots.com/dimg/52690528-99bf-41f3-a936-e4be3baeda03.webp?key=twsm 640w,
                    https://tamethebots.com/dimg/52690528-99bf-41f3-a936-e4be3baeda03.webp?key=twmd 768w" type="image/webp">
                    <img src="https://tamethebots.com/dimg/f346548f-a6e3-4f63-9cfe-b819b22f7114.png?key=twmd"
                    srcset="https://tamethebots.com/dimg/f346548f-a6e3-4f63-9cfe-b819b22f7114.png?key=twsm 640w,
                    https://tamethebots.com/dimg/f346548f-a6e3-4f63-9cfe-b819b22f7114.png?key=twmd 768w"
                    alt="Web Worker Content - Will it Index?"

The rest have fetchpriority="auto", which is "let the browser decide". This should make sure that that image is downloaded first.

On article pages (like this one) I added the fetchpriority="high" to the header image (the one with the paint can on this article) and fetchpriority="low" to the little avatar image next to the author name.

Testing, Testing, Is this thing on?

Using devTools, I loaded the page, filtered to images and looked at the Priority column (you might need to right click and add this column). The header was fetched with a high priority, the author avatar with low one, success!

Chrome devTools network panel showing img priority

The Results

I let this run for seven days, collecting Real User metrics for that time. I then looked at the LCP for the blog section of the site for User-Agents reporting as Chrome 96 plus (should be getting the priority hints) versus earlier Chrome versions.

Chrome Version LCP at 75th Percentile LCP at 95th Percentile
96 plus 0.98 secs 2.02 secs
Under 96 1.62 secs 2.66 secs

That's a 39.5% improvement at the 75th percentile, 24.1% improvement at the 95th percentile, all for a simple tag or two!

A caveat here, version is based on the User-Agent string, which is easily changeable, some visits may have been mis-assigned.


Priority hints seem to offer a low effort, quick boost for LCP in certain circumstances, and if it launches in the current format, as simple as adding an attribute.

Like preload and lazy-loading, it's worth taking some time to think through what should have a higher / lower priority, mis-use could harm stuff. Remember you're mostly shuffling the order to make the right things load first, it's not making things overall faster.

This test was purposefully simplistic, there's so much more that priority hints can offer, https://web.dev/priority-hints/ is a great starting point to learn about this, and I can recommend this video from WebPageTest Live as well.

Given the ease of implementing these, I would advise it's worth giving it a try and testing the results.

About the Author:

Dave Smart

Dave Smart

Technical SEO Consultant at Tame the Bots.

< Web Worker Content - Will it Index?

11th Sep 21 // updated: 11th Sep 21

I Was a Guest on Experts on the Wire Podcast >

25th Jul 22 // updated: 26th Jul 22