Skip to main content

How To Optimize Resource Loading With Priority Hints

· Updated on · 4 min read

To make your website load quickly you need the browser to prioritize loading the most important resources first. The new fetchpriority attribute for img, iframe, script, and link tags can help achieve this by marking the most important resources in the HTML.

What are priority hints?

Browsers attempt to guess the importance of a resource when they discover it. For example, render-blocking stylesheets will be high priority, while a an asynchronous script can be loaded with a low priority.

But sometimes it's not clear to the browser how important a resource is. For example, images are loaded with low priority by default. Most of them are likely below the fold or hidden somewhere in a nested menu. But that's not always what you want, as images that represent the primary page content should be loaded quickly.

Priority hints solve this problem by providing the browser with additional information about the relative importance of a resource. For example, the fetchpriority attribute lets you mark specific important images as high priority.

<img src="photo.jpg" fetchpriority="high" />

A common use case would be to increase the priority of images that trigger the Largest Contentful Paint.

Run A Free Page Speed Test

Test Your Website:

  • No Login Required
  • Automated Recommendations
  • Google SEO Assessment

A real-world example of priority hints in action

Take a look at this request waterfall showing the main content image being loaded on a website.

  1. The priority changes from Low to High after the page renders for the first time
  2. There's a long gray bar in the waterfall indicating the browser knows about the resource but hasn't started loading it yet

Low priority LCP image

We then add fetchpriority=high to two img elements that often end up being the LCP element.

Now the priority no longer changes, and the images are loaded immediately after the document request.

Fetchpriority attribute in waterfall

As a result, the Largest Contentful Paint now happens after 1.9 seconds instead of after 4.2 seconds.

LCP impact chart

Picture elements and priority hints

The HTML picture element lets website owners specify possible image files and the browser then picks the most image with the most appropriate file type and resolution.

To use priority hints with picture tags simply add the fetchpriority attribute to the img element inside the picture tag.

<source srcset="/image-small.png" media="(max-width: 600px)">
<img src="/image.png" fetchpriority="high">

What elements support the fetchpriority attribute?

You can use the fetchpriority attribute to control the request priority of resources loaded by the following HTML elements:

  • img
  • script
  • link
  • iframe

For example, let's say you want to preload a background image on the page. By default the image request will still be made with a low priority. The fetchpriority attributes fixes this:

<link rel="preload" as="image" href="/background.webp" fetchpriority="high" />

Instead than using <link> tags in your HTML to preload resources you can also include a link header in the document response. You can also include the fetchpriority hint here.

Link: </background.webp>; rel=preload; as=image; fetchpriority=high

How to use priority hints with the fetch API

The fetch API lets developers load additional data using JavaScript. Often JSON-formatted data is loaded from a backend API.

By default these requests are high-priority, but you can also set the priority to low by adding the priority property to the options object.

const req = new Request("/data.json", { priority: "low" });
.then((res) => res.json)
.then((res) => console.log("Response", res));

What browsers support Priority Hints?

Priority Hints are supported in most modern browsers like Chrome, Safari, and Edge.

As of May 2024, Firefox doesn't support priority hints yet. However, since the fetchpriority attribute is just a hint nothing breaks if it is used in Firefox.

How to check if priority hints could make your website faster

Want to see request priorities on your website, and whether they change after the initial render?

Run a free website speed test to find out.

Website speed overview

Each test result includes a request waterfall with resource priority details.

Website speed test result showing priority change

Monitoring site speed and Core Web Vitals over time

Want to keep your website fast and optimize your Core Web Vitals?

DebugBear can monitor your website over time and provides in-depth reports to help you make it faster. Try it for free with a 14-day trial.

DebugBear website monitoring data

Monitor Page Speed & Core Web Vitals

DebugBear monitoring includes:

  • In-depth Page Speed Reports
  • Automated Recommendations
  • Real User Analytics Data

Get a monthly email with page speed tips