DEV Community

Cover image for Boosting LCP: A Guide to fetchpriority="high"
Vicente G. Reyes
Vicente G. Reyes

Posted on • Originally published at blog.vicentereyes.org

Boosting LCP: A Guide to fetchpriority="high"

#a11y #webdev #programming

In the world of web performance, every millisecond counts. We’ve all been there: you open a site, the text loads, but the main hero image—the thing you actually want to see—stays blank for an extra second. That lag often kills your Largest Contentful Paint (LCP) score.

Enter fetchpriority. This HTML attribute is a game-changer for telling browsers exactly which assets deserve the "VIP treatment."

What is fetchpriority?

The fetchpriority attribute is a browser hint that signals the relative importance of a resource. While browsers are generally smart at guessing what to load first, they aren't psychic. They might prioritize a late-discovery script over the massive hero image that is actually the most important thing on the screen.

By adding fetchpriority="high", you’re moving that asset to the front of the line.

How it Works

When a browser parses a page, it assigns a priority level (Low, Medium, High, or Very High) to every resource.

  • Images are usually "Low" or "Medium" by default.
  • Scripts and CSS are usually "High."

By manually setting the priority, you override these defaults to ensure your "hero" elements don't get stuck behind less critical background tasks.

Why Use It? (The LCP Connection)

Largest Contentful Paint (LCP) measures when the largest image or text block becomes visible. If your hero image is the LCP element, fetchpriority="high" can:

  1. Reduce Queueing Time: The browser starts downloading the image sooner.
  2. Optimize Bandwidth: It allocates more "pipe" to that specific asset.
  3. Improve UX: Users see the "meat" of your page faster, reducing bounce rates.

Note: Real-world tests have shown that correctly implementing fetchpriority can improve LCP by 20-30% in many cases.

How to Implement It

You can apply this attribute to <img>, <link>, <script>, and even <iframe> tags.

1. For Hero Images

This is the most common use case. If you have an image above the fold, give it the high-priority tag.

<img src="hero-banner.jpg" fetchpriority="high" alt="New Summer Collection">
Enter fullscreen mode Exit fullscreen mode

2. For Preloaded Resources

If you are preloading a critical asset in the <head>, you can specify the priority there as well.

<link rel="preload" href="main-style.css" as="style" fetchpriority="high">
Enter fullscreen mode Exit fullscreen mode

3. Deprioritizing Non-Critical Assets

Conversely, you can use fetchpriority="low" for things that don't matter immediately, like images further down the page (below the fold) or a non-essential tracking script.

Best Practices to Keep in Mind

  • Don't Overdo It: If everything is "high" priority, nothing is. Only use it for the 1 or 2 most critical elements on the screen.

  • Combine with loading="lazy": Use fetchpriority="high" for the top of the page and loading="lazy" for everything else. Never use both on the same image.

  • Test with DevTools: You can see the "Priority" column in the Network Tab of Chrome DevTools to verify if your hint is working.

Conclusion

fetchpriority="high" is one of the simplest yet most effective tools in a developer's performance toolkit. It’s not a magic wand, but it’s a very loud megaphone that helps the browser focus on what truly matters to your users.

Top comments (0)