Using the fetchpriority Attribute for Resource Prioritization

The fetchpriority Attribute

The fetchpriority attribute gives developers fine-grained control over the relative priority of resource fetches. It accepts three values: high, low, and auto (default).

Why Priority Matters

Browsers use internal heuristics to assign fetch priority to resources. For example, CSS and synchronous scripts get high priority, while images below the fold get low priority. But sometimes these heuristics are wrong:

• A hero image might get low priority because it appears after other images in the DOM
• A non-critical analytics script might get high priority because it is synchronous
• An above-the-fold image loaded via CSS background might be deprioritized

fetchpriority lets you override these defaults.

Usage with Different Elements

<!-- Preload with high priority -->
<link rel="preload" href="/hero.webp" as="image"
      fetchpriority="high" />

<!-- Image with high priority (LCP candidate) -->
<img src="/hero.webp" fetchpriority="high" alt="Hero" />

<!-- Image with low priority (below the fold) -->
<img src="/footer-logo.png" fetchpriority="low" alt="Logo" />

<!-- Script with low priority (non-critical) -->
<script src="/analytics.js" fetchpriority="low"></script>

<!-- Fetch API with priority -->
<script>
fetch('/api/critical-data', { priority: 'high' });
fetch('/api/recommendations', { priority: 'low' });
</script>

Priority Values

Value	Effect
high	Resource is fetched before other resources at the same priority level
low	Resource is deferred in favor of other resources at the same priority level
auto	Browser uses its default heuristics (default behavior)

Best Practices

1. Use high sparingly — marking too many resources as high priority negates the benefit because they all compete equally
2. LCP image should always be high — this is the single most impactful use of fetchpriority
3. Mark below-fold images as low — frees up bandwidth for critical resources
4. Non-critical third-party scripts should be low — analytics, social widgets, chat
5. Test with Chrome DevTools — the Network panel shows the priority column to verify your settings

Interaction with Preload

When you combine fetchpriority with preload, you get precise control:

<!-- High priority preload: fetched first, before other preloads -->
<link rel="preload" href="/critical.css" as="style"
      fetchpriority="high" />

<!-- Low priority preload: still preloaded, but after high-priority items -->
<link rel="preload" href="/deferred.js" as="script"
      fetchpriority="low" />