Fetchpriority Attribute

Name: Fetchpriority Attribute
Author: thedaviddias

thedaviddias/frontendchecklist

1 installs
73.4k repo stars
Updated June 18, 2026
thedaviddias/frontendchecklist

Adds fetchpriority high to the LCP image and preloads, and low to below-fold images, to improve resource loading order and LCP.

About

A frontend-checklist performance rule for using the fetchpriority attribute to hint resource priority. A developer uses it to accelerate Largest Contentful Paint with minimal effort.

fetchpriority=high on the LCP image cuts LCP 5-30%
fetchpriority=low on below-fold images that compete for bandwidth

Fetchpriority Attribute by the numbers

1 all-time installs (skills.sh)
Ranked #1,914 of 2,245 Frontend Development skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/thedaviddias/frontendchecklist --skill fetchpriority-attribute

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/thedaviddias/frontendchecklist/fetchpriority-attribute.svg)](https://skillselion.com/skills/thedaviddias/frontendchecklist/fetchpriority-attribute)

Installs	1
repo stars	★ 73.4k
Last updated	June 18, 2026
Repository	thedaviddias/frontendchecklist ↗

What it does

Adds fetchpriority high to the LCP image and preloads, and low to below-fold images, to improve resource loading order and LCP.

Files

SKILL.mdMarkdownGitHub ↗

Use fetchpriority to hint resource loading priority

Browsers use internal heuristics to guess resource priority, but they cannot know which image is your LCP candidate. Adding fetchpriority="high" to the LCP image has been shown to reduce LCP by 5–30 % in real-world tests, directly improving Core Web Vitals scores and user-perceived load speed. The attribute costs nothing to add and is the lowest-effort high-impact performance optimisation available today.

Quick Reference

Add fetchpriority="high" to the LCP image to accelerate Largest Contentful Paint
Add fetchpriority="low" to below-the-fold images that would otherwise compete with critical resources
Use fetchpriority="high" on <link rel="preload"> for critical fonts and CSS
Avoid marking more than one or two resources as high priority — it defeats the purpose

Check

Check whether the LCP image or hero element has fetchpriority="high" and whether any high-priority preload links are missing the attribute.

Fix

Add fetchpriority="high" to the LCP image element and any preloaded critical resources, and fetchpriority="low" to non-critical below-the-fold images.

Explain

Explain how the browser's resource priority queue works and how fetchpriority hints change loading order to improve LCP.

Code Review

Review the HTML for images above the fold. Flag the LCP candidate if it lacks fetchpriority="high", and flag any carousel or below-fold images that lack fetchpriority="low" (they compete with critical resources).

---

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/performance/fetchpriority-attribute

Use fetchpriority to hint resource loading priority

The fetchpriority attribute is applied to critical images, scripts, and preload links to help the browser prioritise the most important resources and defer lower-priority ones.

Priority: medium · Difficulty: beginner · Time: 15 min

--- The browser has a built-in priority queue for network requests. fetchpriority is a hint that lets you nudge the browser's scheduling when its default heuristics are suboptimal for your specific layout.

Code Examples

The Largest Contentful Paint element is usually a hero image. The browser often assigns it a lower-than-ideal priority because it is discovered late (inside CSS or a JS-rendered component) or because many other resources are competing. One attribute can unlock significant LCP gains:

<!-- ✅ Hero/LCP image — boost priority -->
<img
  src="/hero.webp"
  alt="Welcome to Acme"
  width="1200"
  height="600"
  fetchpriority="high"
/>

In Next.js


// next/image sets fetchpriority="high" automatically when priority={true}

  return (
    
  )
}

In React (native img)

// When you cannot use next/image or a framework Image component

  return (
    <img
      src="/hero.webp"
      alt="Welcome to Acme"
      width={1200}
      height={600}
      fetchPriority="high"   // Note: camelCase in JSX
      decoding="async"
    />
  )
}

Why It Matters

Priority Values

Value	Effect
`high`	Fetch before resources of the same type with default or low priority
`low`	Fetch after resources of the same type with default or high priority
`auto` (default)	Browser decides based on resource type and position in document

Below-the-Fold Images — Reduce Priority

Images that are not in the initial viewport should not compete with critical resources. Combine fetchpriority="low" with loading="lazy":

<!-- Images below the fold — defer and deprioritise -->
<img
  src="/product-3.webp"
  alt="Product 3"
  width="400"
  height="400"
  loading="lazy"
  fetchpriority="low"
/>

Preload Links

When you use <link rel="preload"> to fetch a critical font or stylesheet, add fetchpriority="high" to ensure it is fetched before lower-priority preloads:

<head>
  <!-- Critical font — fetch at highest priority -->
  <link
    rel="preload"
    href="/fonts/inter-var.woff2"
    as="font"
    type="font/woff2"
    crossorigin
    fetchpriority="high"
  />

  <!-- Critical above-fold CSS -->
  <link
    rel="preload"
    href="/styles/critical.css"
    as="style"
    fetchpriority="high"
  />

  <!-- Non-critical prefetch — run at low priority -->
  <link
    rel="prefetch"
    href="/images/profile-picture.webp"
    as="image"
    fetchpriority="low"
  />
</head>

Scripts

For third-party scripts that must execute before first paint (analytics initialisation, A/B testing), mark them high. For non-blocking scripts that can wait, mark them low:

<!-- Non-critical analytics — load after critical resources -->
<script
  src="https://cdn.example.com/analytics.js"
  defer
  fetchpriority="low"
></script>

<!-- Critical A/B testing or personalisation that must run before render -->
<script
  src="/scripts/init.js"
  fetchpriority="high"
></script>

Priority by Resource Type (Browser Defaults)

Understanding the browser's defaults helps you know when to override:

Resource	Default priority
HTML document	Highest
CSS (render-blocking)	Highest
Fonts	High
Scripts in `<head>`	High
Scripts with `defer`/`async`	Low
Images above fold	High
Images below fold	Low
XHR/fetch calls	High

Use fetchpriority to override only where the browser's guess is wrong.

Measuring the Impact

// Measure LCP before and after adding fetchpriority
new PerformanceObserver((list) => {
  const entries = list.getEntries()
  const lastEntry = entries[entries.length - 1]
  console.log('LCP:', lastEntry.startTime, 'ms')
  console.log('LCP element:', (lastEntry as LargestContentfulPaint).element)
}).observe({ type: 'largest-contentful-paint', buffered: true })

Marking more than one or two resources as fetchpriority="high" defeats the purpose — all resources end up at the same priority and the browser gains no useful hint. Reserve high for the single most critical resource per page (usually the LCP image) and use low liberally for non-critical resources.

Standards

Use web.dev: Optimise resource loading with the Fetch Priority API as the standard for measuring the final production behavior, not just local synthetic output.
Use MDN: fetchpriority attribute as the standard for measuring the final production behavior, not just local synthetic output.

Verification

Use Lighthouse or a real waterfall trace to confirm the hint changes request order, because fetchpriority only helps when the browser actually promotes the right resource.

Automated Checks

Open DevTools → Network tab, reload with throttling (Slow 3G), and verify the LCP image appears near the top of the waterfall with Priority: Highest or High.
Run a Lighthouse performance audit before and after adding fetchpriority="high" to the LCP image and compare the LCP score.

Manual Checks

Use the Performance panel to record a page load and confirm the LCP candidate image is fetched before below-fold images.
Check browser compatibility — fetchpriority is supported in Chromium 101+ and Safari 17.2+; it degrades gracefully (ignored) in unsupported browsers.