Priority Hints (fetchpriority)

Use the fetchpriority attribute to tell the browser which resources to load first, optimizing LCP and reducing render-blocking delays.

Overview

The browser's resource scheduler decides the order in which to download images, scripts, stylesheets, and other assets. By default, it uses heuristics based on element type and position in the document. Priority Hints let you override these defaults with the `fetchpriority` attribute, giving the browser explicit signals about which resources matter most. `fetchpriority="high"` tells the browser to prioritize a resource over others of the same type. `fetchpriority="low"` deprioritizes a resource. This is particularly powerful for Largest Contentful Paint (LCP) optimization the hero image above the fold should load as fast as possible, while off-screen images and non-critical scripts can wait. Priority hints work on `<img>`, `<script>`, `<link>`, and `fetch()` calls. They are supported in all modern browsers.

Key Points

•`fetchpriority="high"` load this resource before others of the same type
•`fetchpriority="low"` defer this resource; it's not critical to the initial render
•`fetchpriority="auto"` browser's default heuristic (no hint)
•Most impactful on `<img>` for LCP optimization: boost the hero image, deprioritize off-screen images
•Also works on `<script>`, `<link>`, and `fetch()` calls: `fetch(url, { priority: "high" })`
•Works alongside `loading="lazy"` you can have lazy-loaded images that are still high priority when they enter the viewport
•Do not over-use high priority it only helps when competing resources exist; flagging everything high has no effect

Examples

Optimizing LCP with high priority on the hero image

<!-- Hero image: highest priority, no lazy loading -->
<img
  src="/hero.webp"
  alt="Hero image"
  width="1200"
  height="600"
  fetchpriority="high"
>

<!-- Below-fold images: lazy load and deprioritize -->
<img
  src="/product-1.webp"
  alt="Product 1"
  loading="lazy"
  fetchpriority="low"
>
<img
  src="/product-2.webp"
  alt="Product 2"
  loading="lazy"
  fetchpriority="low"
>

Never use loading="lazy" on above-the-fold images combine with fetchpriority="high" for critical images.

Priority hints on scripts and preloads

<!-- Preload critical font with high priority -->
<link
  rel="preload"
  href="/fonts/Inter-Regular.woff2"
  as="font"
  type="font/woff2"
  crossorigin
  fetchpriority="high"
>

<!-- Analytics script: load after page content, low priority -->
<script
  src="/analytics.js"
  defer
  fetchpriority="low"
></script>

<!-- Core app bundle: high priority -->
<script
  src="/app.js"
  fetchpriority="high"
></script>

Using priority in fetch() calls

// High priority: data needed to render the page
const criticalData = await fetch('/api/page-content', {
  priority: 'high'
});

// Low priority: tracking, analytics, non-blocking
fetch('/api/log-event', {
  method: 'POST',
  body: JSON.stringify({ event: 'page_view' }),
  priority: 'low'
});

The priority option in fetch() follows the same high/low/auto values as the HTML attribute.

Common Mistakes

Marking everything as high priority relative priority only matters when competing resources exist; marking all images high is equivalent to marking none of them high
Using fetchpriority="high" AND loading="lazy" on the same LCP image these conflict; lazy-loading defers the image regardless of priority
Not testing with Chrome DevTools Network tab verify actual loading order before/after adding hints

Note

Run a Lighthouse audit before and after adding priority hints to measure the LCP improvement.

Priority Hints (fetchpriority)

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

Which resource benefits most from fetchpriority="high"?