What Is Fetch Priority? The fetchpriority Attribute
fetchpriority lets you tell the browser which resources matter most, overriding its default heuristics to load critical assets sooner.
Fetch priority is a browser hint, set with the fetchpriority attribute, that tells the browser how urgently to fetch a specific resource relative to everything else on the page. Browsers already assign priorities based on tag type and position — a <script> in the <head> outranks an <img> far down the page — but that default ordering doesn’t always match what actually matters for a given page. fetchpriority lets you correct it.
The problem it solves
A browser building a page has to schedule dozens of network requests: stylesheets, scripts, fonts, images. It uses heuristics to guess what’s important — render-blocking resources first, then visible images, then everything else. Those heuristics are reasonable defaults, but they’re guesses. The browser doesn’t know that a particular image is your Largest Contentful Paint element, or that a particular script is only needed after the user scrolls.
This matters directly for Core Web Vitals: if the browser spends bandwidth on a low-priority resource while your LCP image sits in the queue, your LCP score suffers even though nothing was technically broken.
The attribute
fetchpriority takes three values and applies to <img>, <link>, and <script> elements:
<img src="hero.jpg" fetchpriority="high" alt="Hero banner">
<script src="analytics.js" fetchpriority="low"></script>
<link rel="stylesheet" href="above-fold.css" fetchpriority="high">high— fetch this sooner than the browser’s default would. Use it for the LCP image, a critical above-the-fold stylesheet, or a font needed for visible text.low— fetch this later. Use it for below-the-fold images, non-critical scripts (chat widgets, analytics beacons), or prefetched content that isn’t needed yet.auto(the default) — let the browser decide using its normal heuristics.
Where it actually helps
The clearest win is the LCP image. If your hero image is a plain <img> tag without loading="eager" or explicit priority, the browser may discover it late — after parsing CSS, after other scripts — and delay the paint that most affects your Core Web Vitals score. Marking it fetchpriority="high" moves it to the front of the queue:
<img src="/hero.avif" fetchpriority="high" alt="Product photo">Note that this is different from lazy loading, which is about whether to load an image at all until it’s near the viewport. fetchpriority is about when, relative to other resources, an image that will load anyway gets fetched. Never combine fetchpriority="high" with loading="lazy" on the same LCP image — that’s a contradiction; lazy loading defers the fetch, so a high priority on a deferred fetch does nothing useful.
The other common case is deprioritizing scripts you know aren’t render-critical — a chat widget, a feedback tool, an A/B testing snippet. Marking those low frees up bandwidth for the resources the user is actually waiting on.
fetchpriority vs preload
Resource hints like preload and fetchpriority solve related but distinct problems. preload tells the browser about a resource before it would otherwise be discovered — useful for a background image referenced only in CSS, which the browser can’t see until it parses the stylesheet. fetchpriority changes the priority of a resource the browser already knows about. They compose well together:
<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">This both surfaces the image early and marks it urgent.
Browser support and fallback behavior
fetchpriority is a progressive enhancement. Browsers that don’t recognize the attribute simply ignore it and fall back to their default priority heuristics — nothing breaks. There’s no feature-detection dance required; you can add it freely.
When not to bother
Don’t sprinkle fetchpriority="high" on everything. If every resource is high priority, none of them are — the browser’s scheduler has nothing left to differentiate on, and you’ve effectively reverted to default behavior with extra markup. Reserve high for the one or two resources that gate your primary paint, and low for the handful of scripts that are clearly deferrable. For most resources on the page, auto (the default, i.e. no attribute) is correct.
The takeaway
fetchpriority is a narrow, well-scoped tool: it reorders the browser’s fetch queue without changing what loads or when it’s needed in the DOM. Used sparingly — high on your LCP image or critical stylesheet, low on deferrable scripts — it can meaningfully improve perceived load performance. Used everywhere, it does nothing. Pair it with preload for resources the browser can’t discover early, and leave everything else on auto.
Keep reading
Takina · · 4 min read What Is the Beacon API? navigator.sendBeacon()
The Beacon API lets a page send one last async request as it unloads, without blocking navigation or racing the browser's page teardown.
Takina · · 5 min read CSS will-change Explained: Compositing and Performance
The CSS will-change property hints the browser to prepare an element for an upcoming change, moving it to its own compositor layer. When to use it and when not to.
Takina · · 4 min read WebP vs AVIF vs JPEG: Choosing an Image Format
WebP, AVIF, and JPEG trade off compression, browser support, and encode speed differently. Which format to use where, and how to serve fallbacks safely.