fetchpriority Is the Easiest LCP Win

Most performance optimizations feel like a grueling uphill battle involving complex build steps or rewriting half your state management logic. But every once in a while, the browser vendors give us a "cheat code" that yields massive results for about five seconds of work.

Largest Contentful Paint (LCP) is the heavyweight champion of Core Web Vitals. It's the metric that tells you—and Google—exactly when the most important piece of content on your page finally shows up. Usually, that’s a hero image. The problem is that browsers are cautious by nature; they see a dozen images in your HTML and treat them with a sort of democratic equality until they’ve done enough math to realize which one is actually front-and-center.

By the time the browser realizes your hero image is the "main character," you’ve already lost 300ms to indecision. This is where fetchpriority comes in.

The Browser is Guessing (And Often Wrong)

When a browser starts downloading your page, it kicks off a "Preload Scanner." This scanner looks ahead in the HTML to find assets like scripts, CSS, and images so it can start fetching them before the main parser even gets there.

The catch? The scanner doesn't know where those elements will end up on the screen. It sees an <img> tag and thinks, "Okay, that's an image. Images are usually medium priority. I'll get to it after I finish the critical CSS."

If that image is your LCP element, "medium priority" is a death sentence for your performance score.

The Magic Attribute

You can stop the guesswork by adding the fetchpriority attribute. It tells the browser exactly how to rank a specific request relative to everything else.

<!-- The LCP Game Changer -->
<img 
  src="/hero-banner.jpg" 
  fetchpriority="high" 
  alt="A stunning view of our product"
>

By adding fetchpriority="high", you’re effectively pushing your hero image to the front of the line. In my testing, I've seen this single attribute shave 200ms to 500ms off LCP times on image-heavy landing pages. It’s the closest thing to a "make it faster" button we have.

Don't Be a Priority Hog

I know what you’re thinking: *"If high priority makes things fast, I'll just make everything high priority!"*

Please don't. If everyone is screaming, no one is being heard. If you mark ten images as high, the browser is back to square one, trying to shove too much data through the same pipe simultaneously.

The Golden Rule: Use high for exactly one thing—your LCP element. Maybe two if you have a split-screen layout.

Conversely, you can use fetchpriority="low" to de-prioritize things that aren't important but are fighting for bandwidth. Think of those "You might also like" images below the fold or carousel slides that aren't visible yet.

<!-- Move this to the back of the bus -->
<img 
  src="/off-screen-ad.jpg" 
  fetchpriority="low" 
  loading="lazy" 
  alt="Something you don't need to see yet"
>

Beyond Images: Prioritizing Scripts

fetchpriority isn't just for images. It works on <script> and <link> tags too.

Normally, an async script has a "low" priority because the browser assumes it’s not critical for the initial render. But if that script is responsible for something vital—like a search UI or a critical tracking pixel—you might want to give it a nudge.

<!-- Give an async script a boost -->
<script src="/critical-search-widget.js" async fetchpriority="high"></script>

On the flip side, if you have a heavy third-party script that you *must* load but don't want it stealing resources from your main bundle, slap a low priority on it.

The "Lazy" Trap

A common mistake I see is developers combining loading="lazy" with fetchpriority="high". This is a technical contradiction.

loading="lazy" tells the browser: "Don't even think about downloading this until the user scrolls near it."
fetchpriority="high" tells the browser: "Download this as fast as humanly possible."

When you use both on the same image, the browser usually gets confused and defaults to lazy loading, which is the exact opposite of what you want for an LCP image. Never lazy load your LCP element. It should be there in the HTML, ready to go, with a high priority.

How to Verify It's Actually Working

You don't have to take my word for it. Open up Chrome DevTools, go to the Network tab, and right-click the table headers to enable the Priority column.

1. Load your page without fetchpriority.
2. Notice your hero image probably starts at "Low" or "Medium" and maybe gets bumped to "High" later.
3. Add fetchpriority="high".
4. Refresh. You should see it start as "High" immediately.

In the Performance tab, look at the "Initial Priority" vs "Final Priority" in the Network track. You want that hero image to be "High" from the very first millisecond it's discovered.

Is This Supported?

As of now, fetchpriority is supported in Chromium-based browsers (Chrome, Edge, Opera). Firefox and Safari are still trailing behind, but the beauty of this attribute is that it’s progressive enhancement.

If a browser doesn't understand fetchpriority, it just ignores it. No errors, no broken layouts—just the default behavior. There is literally zero risk in adding it today.

Go find your hero image, add those sixteen characters, and enjoy the easiest LCP win of your career.