Use fetchpriority=high to load your LCP hero image sooner

 https://addyosmani.com/blog/fetch-priority/

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

August 14, 2022

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