Resource Priority

Definition

When several resources need to be fetched at the same moment, this is the set of rules the browser uses to decide "what to fetch first," plus the ways a developer can adjust that order. The browser automatically assigns each resource a download priority (the order in which network requests are handled) based on its type (image, script, CSS, etc.) and its position in the document. The fetchpriority attribute lets you override that order with a hint.

Why it matters

A browser can only open a limited number of connections at once, so when there are many resources it queues them and fetches them in order. If the hero image the user needs to see first gets pushed behind a lower ad image or an auxiliary script and arrives late, LCP (the time until the largest content is painted) suffers. The browser's automatic priority only looks at "position and type," so the developer has to hint at which resource really matters.

How it works

1. As the browser parses the HTML, it uses the preload scanner (a mechanism that skims the document before full rendering to find resources to fetch ahead of time) to discover resources.
2. It assigns each resource a default priority (high/low, etc.) based on type and position — for example, in-viewport images generally start low.
3. If fetchpriority="high" is present, the browser reflects that hint and raises the order. fetchpriority="low" lowers it.
4. <link rel="preload"> moves a request earlier so a resource is fetched even before the parser reaches it.

Practical application

• Consider fetchpriority="high" on the first-screen image that is the LCP candidate. Next.js Image's priority attaches this hint internally.
• Give images in collapsed regions or scripts needed later a lower priority, or lazy-load them.

Tradeoffs

A resource whose priority you raise pushes other requests aside. If you slap high on many resources, "everything high = everything normal," and the hint becomes meaningless. The default is to apply it to only the one true bottleneck.

When not to use

• Pages with so few resources that there is no contention in the first place — the browser's default priority is enough.
• A state where you haven't confirmed via measurement what the LCP element is — raising the wrong resource makes things worse.

Common mistakes

• Attaching priority/fetchpriority="high" to every image, diluting the priority signal.
• Only setting up a preload without confirming that the resource is actually the bottleneck on the render path, wasting bandwidth.

Related concepts

• largest-contentful-paint — the target metric you're trying to improve by adjusting priority