loke.dev
Header image for A Gentle Nudge for the Browser's Preload Scanner

A Gentle Nudge for the Browser's Preload Scanner

How the fetchpriority attribute provides a low-effort, high-impact way to optimize your Largest Contentful Paint by guiding the browser toward your most critical assets.

· 4 min read

Your users don't care about your clean abstraction layers if they’re staring at a blank white screen for three seconds. If your Largest Contentful Paint (LCP) is lagging, it’s usually because the browser is playing a guessing game with your assets and losing.

The Browser is Smart, But It’s Not Psychic

Browsers have this amazing bit of engineering called the Preload Scanner. While the main HTML parser is busy choking on a heavy synchronous script or building the DOM, the scanner runs ahead, looking for URLs in your <img>, <link>, and <script> tags so it can start downloading them early.

It’s like a scout sent ahead of an army. But here’s the problem: the scout sees ten different images and doesn't know which one is the crown jewel—the Hero Image—and which one is just a "sale" badge in the sidebar. By default, browsers are pretty conservative. They prioritize CSS and fonts (the stuff that breaks the page if missing) and treat images as a "get to it when I can" priority.

This is why your LCP image often sits in the queue while the browser finishes downloading a low-priority analytics script or a footer icon.

Enter fetchpriority

For a long time, we tried to hack this with link rel="preload". Preloading is fine, but it’s a blunt instrument. It tells the browser "Download this now," but it doesn't really help the browser weigh that asset against everything else it’s currently juggling.

The fetchpriority attribute is the "nudge" we've been waiting for. It’s a low-effort, high-reward attribute that tells the browser: "I know you think all images are equal, but this one is actually a big deal."

<!-- The LCP image that needs to be fast -->
<img 
  src="/hero-shot.jpg" 
  fetchpriority="high" 
  alt="Our shiny new product"
>

By adding fetchpriority="high", you aren't forcing a download; you're signaling to the preload scanner that it should move this specific request to the front of the line. In my experience, this can shave 200ms to 500ms off your LCP with literally one line of code.

Where to Use This (And Where Not To)

I’ve seen developers get excited and start slapping fetchpriority="high" on every single image on the page. Please, don't do that. When everything is a priority, nothing is.

The "Must-Haves"

1. The LCP Image: If your hero image is an <img> tag, give it high.
2. Preloaded Assets: If you are preloading your LCP image in the <head>, give the link tag the priority boost too.
`html
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
`
3. Late-Discovery Scripts: If you have a script that is absolutely vital for the initial experience but isn't a "blocking" script, a high priority nudge helps it skip the line.

The "Please Don'ts"

1. Anything below the fold: If the user has to scroll to see it, it should probably be loading="lazy", not high priority.
2. Every image in a gallery: Pick the first one. Let the rest wait their turn.
3. Background Images in CSS: fetchpriority only works on HTML elements. If your LCP is a CSS background-image, the browser won't even see it until it parses the CSS and applies it to the DOM. (Side note: avoid CSS backgrounds for LCP assets if you can).

The "Low" Priority Flip Side

Sometimes, the best way to help your critical assets is to tell the browser what *isn't* important. If you have a carousel or a secondary "below the fold" script that you can't easily move, you can explicitly set it to low.

<!-- I'm important, but not 'block-the-entire-render' important -->
<script src="/non-critical-widget.js" fetchpriority="low" async></script>

This clears the "lane" for your CSS and your hero image to get through the network pipe faster.

A Quick Gotcha: The "Lazy" Conflict

Don't be the developer who does this:

<img src="/hero.jpg" fetchpriority="high" loading="lazy"> <!-- NO! -->

This is like hitting the gas and the brake at the same time. loading="lazy" tells the browser to wait until the image is near the viewport, while fetchpriority="high" tells the browser it's urgent. Chromium browsers will usually ignore the high priority if loading="lazy" is present. For your LCP image, you should almost always omit loading="lazy".

Wrapping Up

Optimizing the web usually feels like a game of inches—minifying bundles, tree-shaking, resizing images. But fetchpriority is one of those rare "free wins." It costs you almost nothing in terms of bundle size or complexity, but it gives the browser’s preload scanner the context it needs to make smarter decisions.

Open your site in DevTools, look at the Network tab, and check the "Priority" column. If your hero image is sitting at "Low," give it a nudge. Your LCP scores (and your users) will thank you.