Tip - Use fetchpriority=high to load your LCP hero image sooner

Tip: Add fetchpriority="high" to your Largest Contentful Paint (LCP) image to get it to load sooner. Priority Hints sped up Etsy’s LCP by 4% with some sites seeing an improvement of up to 20-30% in their lab tests. In many cases, fetchpriority should lead to a nice boost for LCP.

Code snippets

Priority Hints let you adjust the priority of loading images, CSS, fonts, scripts, and iframes. You can do a lot more than just boost LCP images:

• Lower the priority of preloaded scripts
• Increase or lower the priority of late-body scripts
• Provide priority differentiation on fetch calls (background activity vs user-interactive API calls)
• and much more.

<!-- Increase the priority of this LCP hero image --> 
<img src="hero-image.jpg" fetchpriority="high" alt="Hero">

<!-- Decrease the priority for this above-the-fold image --> 
<img src="happy-cats.avif" fetchpriority="low" alt="Cat">

<!-- The third-party contents of this iframe load with a low priority --> 
<iframe src="https://youtu.be/JfVOS4VSpmA" fetchpriority="low"></iframe>

<script> 
// Trigger a fetch with low priority 
let suggestedContent = await fetch("/content/suggested", {priority: "low"}); 
</script>

// Scripts that are not critical can also be loaded with low-priority 
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>

Further reading

• Learn more in our Priority Hints Deep-dive on web.dev
• Check out Etsy’s Priority Hints case-study
• Calibre’s Priority Hints guidance
• Specification: https://wicg.github.io/priority-hints/

Frequently asked questions

How do Priority Hints differ to Preload?

It’s helpful to think of rel=preload as a way to adjust when the browser discovers a resource (e.g. things not visible to the parser like background images or resources requiring scripts to load first).

Priority Hints let you adjust the priority (independent of discovery).

How do Priority Hints differ to loading=eager?

The context of this question is usually image or iframe lazy-loading via <img src="image.jpeg" loading="lazy"> which also supports an eager value. Even when using eager (the default), images in Chrome are low-priority until the browser completes layout and can inform what is in the viewport. With Priority Hints, you can hint this much sooner. It’s possibly also known, but given scripts and Fetch API calls aren’t visual, there’s not really a concept of “lazy” loading them, short of deferring when these fetches are made.

Can’t the browser automatically figure out the right priority for you?

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.

Did the Priority Hints attribute name change?

Yes. Previously, the attribute name used was importance. During standardisation discussions we ended up choosing fetchpriority instead as this was deemed to be closer to what the feature actually influences.

Can you experiment with Priority Hints without making code changes?

WebPageTest by Catchpoint has a new Experiments feature that lets you test out WebPerf features like Priority Hints without touching any code. I recommend trying it out.

It is also possible to leverage Cloudflare Workers to test out Priority Hints and Pat Meenan has written up a handy guide you may find helpful.