Optimize resource loading with the Fetch Priority API

The Fetch Priority API indicates the relative priority of resources to the browser. It can enable optimal loading and improve Core Web Vitals.

Addy Osmani

Leena Sohoni

Patrick Meenan

Barry Pollard

Browser Support

Source

When a browser parses a web page and begins to discover and download resources such as images, scripts, or CSS, it assigns them a fetch priority so it can download them in an optimal order. A resource's priority usually depends on what it is and where it is in the document. For example, in-viewport images might have a High priority, and the priority for early loaded, render-blocking CSS using <link>s in the <head> might be Very High. Browsers are pretty good at assigning priorities that work well but may not be optimal in all cases.

This page discusses the Fetch Priority API and the fetchpriority HTML attribute, which lets you hint at the relative priority of a resource (high or low). Fetch Priority can help optimize the Core Web Vitals.

Summary

A few key areas where Fetch Priority can help:

Boosting the priority of the LCP image by specifying fetchpriority="high" on the image element, causing LCP to happen sooner.
Increasing the priority of async scripts, using better semantics than the current most common hack (inserting a <link rel="preload"> for the async script).
Decreasing the priority of late-body scripts to allow for better sequencing with images.

A filmstrip view comparing two tests of the Google Flights homepage. At the bottom, Fetch Priority is used to boost the priority of the hero image, resulting in a 0.7 second decrease in LCP. — Fetch Priority improving Largest Contentful Paint from 2.6 s to 1.9 s in a test of Google Flights.

Historically, developers have had limited influence over resource priority using preload and preconnect. Preload lets you tell the browser about critical resources you want to load early before the browser would naturally discover them. This is especially useful for resources that are harder to discover, such as fonts included in stylesheets, background images, or resources loaded from a script. Preconnect helps warm up connections to cross-origin servers and can help improve metrics like Time to first byte. It's useful when you know an origin but not necessarily the exact URL of a resource that will be needed.

Fetch Priority complements these Resource Hints. It's a markup-based signal available through the fetchpriority attribute that developers can use to indicate the relative priority of a particular resource. You can also use these hints through JavaScript and the Fetch API with the priority property to influence the priority of resource fetches made for data. Fetch Priority can also complement preload. Take a Largest Contentful Paint image, which, when preloaded, will still get a low priority. If it is pushed back by other early low-priority resources, using Fetch Priority can help how soon the image gets loaded.

Resource priority

The resource download sequence depends on the browser's assigned priority for every resource on the page. The factors that can affect priority computation logic include the following:

The type of resource, such as CSS, fonts, scripts, images, and third-party resources.
The location or order the document references resources in.
Whether the async or defer attributes are used on scripts.

The following table shows how Chrome prioritizes and sequences most resources:

	Load in layout-blocking phase		Load one-at-a-time in layout-blocking phase
Blink Priority	VeryHigh	High	Medium	Low	VeryLow
DevTools Priority	Highest	High	Medium	Low	Lowest
	Main resource
	CSS (early**)		CSS (late**)		CSS (media mismatch***)
		Script (early** or not from preload scanner)	Script (late**)	Script (async)
	Font	Font (rel=preload)
		Import
		Image (in viewport)	Image (first 5 images > 10,000px2)	Image
				Media (video/audio)
					Prefetch
		XSL
	XHR (sync)	XHR/fetch* (async)

Notes:
* Preloads using "as" or fetch with a specific "destination" use the priority of the destination they're requesting. For example, preload as="style" uses Highest priority. With no explicit destination, fetch is prioritized like an async XHR.
** "Early" is defined as being requested before any non-preloaded images have been requested, and "late" is after non-preloaded images have been requested.
*** CSS where the media type doesn't match isn't fetched by the preload scanner and is only processed when the main parser reaches it, which usually means it's fetched very late.

Images start at "Low" priority by default. At layout time, images within the viewport are boosted to "High". As of Chrome 117, the first 5 large images are set to "Medium" to speed this up, and two of them can be fetched in parallel during the initial "tight mode". By tagging important images in markup using fetchpriority="high", they can start at "High" immediately and load much faster.

The browser downloads resources with the same computed priority in the order they're discovered. You can check the priority assigned to different resources when loading a page under the Chrome Dev Tools Network tab. (Make sure you include the priority column by right-clicking the table headings and ticking that).

Optimize resource loading with the Fetch Priority API Stay organized with collections Save and categorize content based on your preferences.

Summary

Resource priority

Optimize resource loading with the Fetch Priority API