Why Resource Priority Matters for LCP

How quickly a page loads and becomes usable hinges on the order in which browsers download JavaScript, CSS, images, and iframes. Google’s Largest Contentful Paint (LCP) metric specifically measures when the main content — often the largest above-the-fold element — is displayed. Text is typically the best LCP candidate because it renders fastest, but many pages depend on images or video for their primary content.

Browsers follow a critical rendering path, constructing a render tree from the DOM and CSSOM, and only paint the page after render-blocking resources (CSS, fonts, scripts) are processed. To manage downloads, browsers assign predetermined priorities to each resource type, as documented in Chromium’s “Resource Fetch Prioritization and Scheduling” by Patrick Meenan.

These defaults usually perform well, but developers who know their project’s specific bottlenecks can fine-tune further. The preload attribute helps by discovering resources earlier, but it doesn’t grant granular control over relative priority within a resource type. For example, if two render-blocking stylesheets load, there’s no built-in way to tell the browser that main.css matters more than third-party-plugin.css — until now.

Introducing the fetchpriority Attribute

HTML’s new fetchpriority attribute can be applied to virtually any element that loads a resource, such as images and scripts, and it adjusts that resource’s relative priority. The keyword is “relative”: you can only influence priority within the same resource type. You cannot, for instance, make images load before render-blocking JavaScript.

Also note that fetchpriority does not guarantee a higher-priority resource loads before a lower-priority one of the same type — so it shouldn’t be used to enforce dependency order. It also does not force the browser to fetch anything; it merely hints at importance when the browser decides to fetch.

The attribute accepts three values:

  • low
    Decreases the relative priority of the resource.
  • high
    Increases the relative priority of the resource.
  • auto
    The default; the browser decides the priority.

Returning to the stylesheet example:

<link rel="stylesheet" href="https://www.smashingmagazine.com/path/to/main.css" fetchpriority="high" />
<link rel="stylesheet" href="https://www.smashingmagazine.com/path/to/third-party-plugin.css" fetchpriority="low" />

At the time of writing, fetchpriority is supported in Chrome Canary, with a full release planned for Chrome 101. Other browsers are expected to follow.

Use It Sparingly

Browsers already do a solid job of prioritization, so this attribute should be reserved for specific scenarios: improving LCP, prioritizing one deferred resource over another, or refining preload requests. Overusing it — or premature optimization — can backfire. Always run performance tests to verify gains.

Practical Applications

Improving LCP with Priority Hints

This is the strongest use case for fetchpriority. Images are processed only after render-blocking resources are handled, and even preload or loading="eager" can’t change that ordering. By flagging the LCP image as high, you make it more likely to be ready for the initial render, yielding noticeable performance improvements.

Consider an image carousel that serves as the main viewport content:

See the Pen [Example - without fetch priority](https://codepen.io/smashingmag/pen/oNppEoX) by Adrian Bece.

See the Pen Example - without fetch priority by Adrian Bece.

Lighthouse provides a benchmark for comparison:

An example without priority hints
Without priority hints. (Large preview)

Assign high to the active slide and low to thumbnails:

<!-- Carousel is above the fold -->    
<nav>
      <ul class="hero__list">
        <li>
          <img fetchpriority="low" src="..." />
        </li>
        <li>
          <img fetchpriority="low" src="..." />
        </li>

     <!-- ... -->

    <figure class="hero__figure">
      <img fetchpriority="high" src="..."></img>

    <!-- ... -->

See the Pen [Example - with fetch priority ([https://codepen.io/smashingmag/pen/mdppXLR](https://codepen.io/smashingmag/pen/mdppXLR)) by Adrian Bece.

See the Pen [Example - with fetch priority (https://codepen.io/smashingmag/pen/mdppXLR) by Adrian Bece.

Re-running Lighthouse shows the LCP improvement:

An example with fetchpriority='high' on main image and fetchPriority='low' on the thumbnails
With fetchpriority='high' on main image and fetchPriority='low' on the thumbnails. (Large preview)

The browser heeds these signals, fetching the main content image first, which lets the primary content display sooner.

Prioritizing Deferred Images

Similarly, you can hint that the largest carousel image should load before small thumbnails even when they all use loading="lazy". This doesn’t affect LCP, but it improves the experience when below-the-fold images eventually load. Remember: despite fetchpriority="high", the lazy browser still decides when — or if — these resources are fetched.

<!-- Carousel is below the fold -->   

<nav>
      <ul class="hero__list">
        <li>
          <imgfetchpriority="low" src="..." />
        </li>
        <li>
          <img fetchpriority="low" src="..." />
        </li>

     <!-- ... -->

    <figure class="hero__figure">
      <img fetchpriority="high" src="..."></img>

    <!-- ... -->

Managing Deferred Stylesheets

You can also prioritize among scripts and stylesheets (which remain render-blocking if not deferred). In a CodePen setup, the HTML configuration in the panel’s head determines these loads:

See the Pen [Prioritizing stylesheets](https://codepen.io/smashingmag/pen/oNppEQx) by Adrian Bece.

See the Pen Prioritizing stylesheets by Adrian Bece.

The example loads three resource types:

  • Google Fonts stylesheet — deferred until after first render, creating a visible FOUT.
  • Non-critical bootstrap CSS — deferred and marked low, since these styles only apply below the fold.
  • Critical CSS — render-blocking and applied immediately.

This technique defers non-critical CSS while using preload with an appropriate fetchpriority to bring the font in quickly, so FOUT occurs right after the first render.

<!-- Increase priority for fonts to load fonts right after the first render -->
<link rel="preload"
      as="style"
      fetchpriority="high" 
      onload="this.onload=null;this.rel='stylesheet'"
      href="https://fonts.googleapis.com/css2?family=Crete+Round&family=Roboto:wght@400;700&display=swap" />

<!-- Preload non-critical, below-the-fold CSS with low priority -->
<link rel="preload"
      as="style"
      fetchpriority="low"
      onload="this.onload=null;this.rel='stylesheet'"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

<!-- No JS fallback for stylesheets -->
<noscript>
  <!-- -->
</noscript>

<!-- Inline critical CSS (above-the-fold styles) -->
<style>
  /* Critical CSS */
</style>

This setup doesn’t alter LCP, but it shows how to elevate one resource over another of the same type to smooth the loading experience.

See the Pen [Prioritizing stylesheets - with fetchpriority](https://codepen.io/smashingmag/pen/oNppEVL) by Adrian Bece.

See the Pen Prioritizing stylesheets - with fetchpriority by Adrian Bece.

Fine-Tuning Script Loading

While async and defer change when scripts parse, fetchpriority adds another dimension of control, as these examples show:

<script src="async_but_important.js" async fetchpriority="high"></script>
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>

Prioritizing fetch API Calls

The attribute isn’t limited to HTML elements — it also works inside JavaScript fetch. If you’re rendering a blog post, you might prioritize the main content API call over the comments request using the priority option. Since high is the default, you only need to pass low when deprioritizing.

/* High-priority fetch for post content (default) */
function loadPost() {
  fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(parseResponse)
    .then(parsePostData)
    .catch(handleError);
}

/* Lower-priority fetch for comments (with priority option) */
function loadComments() {
  fetch("https://jsonplaceholder.typicode.com/posts/1/comments", {
    priority: "low"
  })
    .then(parseResponse)
    .then(parseCommentsData)
    .catch(handleError);
}

See the Pen [Fetch with priority](https://codepen.io/smashingmag/pen/ExooQBa) by Adrian Bece.

See the Pen Fetch with priority by Adrian Bece.

Hinting at Embedded iframe Resources

Finally, fetchpriority applies to iframe elements themselves. It only influences the iframe’s main resource, however — requests made inside the frame keep their default priorities, though they still start after the iframe fetch begins.

<iframe fetchpriority="low" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/..." frameborder="0"></iframe>

When To Reach For Priority Hints

fetchpriority is a lever that should be pulled deliberately, not habitually. Misapplied hints can make resource loading less predictable and hurt both perceived performance and real-world user experience. In practice, the attribute is most useful in a handful of targeted scenarios:

  • Boosting the LCP element, especially for image or media resources that are critical to the initial render.
  • Adjusting the loading order of link and script resources when the default heuristics get it wrong.
  • Deprioritizing fetch requests in JavaScript that are non-essential to content or interaction.
  • Dropping the priority of iframes that are below the fold or otherwise not time-sensitive.

As of this writing, the attribute is in Chrome Canary and is scheduled for a broad release in Chrome version 101, with other browsers expected to follow. As adoption widens, expect the community to surface new edge cases and patterns that go beyond these initial guidelines.

Key References

For a deeper technical dive, the Priority Hints specification draft remains the authoritative source on how hints affect browser scheduling. For a practical walkthrough of optimization techniques, refer to the engineering write-up “Optimizing Resource Loading With Priority Hints”.

Related reading on performance and user experience is also available directly on Tech Report’s home publication:

Smashing Editorial