Home  > Blog  > Priority Hints Do What They Say on the Tin For LCP
Priority Hints Lower LCP

Priority Hints Do What They Say on the Tin For LCP

Dave Smart
Dave Smart
//

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

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 importance="high" attribute to that image.


        <picture>
                <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?"
                width="1248"
                height="450"
                class="rounded-t-sm"
                importance="high"
                decoding="auto">
        </picture>
        

The rest have importance="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 importance="high" to the header image (the one with the paint can on this article) and importance="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.

Conclusion

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 your 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.