Implementing Priority Hints for Resource Loading
Browser sets loading priorities itself, and most times does it correctly. But there are scenarios where heuristics fail: LCP image loads with low priority because it's in carousel and browser doesn't know it's critical. Or analytics script gets high priority and delays rendering. Priority Hints—fetchpriority attribute—allow correcting these decisions.
How Browser Sets Priorities Without Hints
Chrome uses five priority levels: Highest, High, Medium, Low, Lowest. By default:
- CSS in
<head>— Highest - Sync scripts in
<head>— High - Images — Low (except first in viewport — Medium)
- Async/defer scripts — Low
- Fetch API — High
- XHR — High
Problem: browser doesn't always know which image is LCP element. If <head> has <link rel="preload"> for image—it gets High. But this only speeds download, not render priority.
fetchpriority Syntax
Attribute accepts three values: high, low, auto (default).
<!-- Raise priority of LCP image -->
<img src="/hero.webp" fetchpriority="high" alt="Hero">
<!-- Lower priority of decorative images below fold -->
<img src="/decoration.webp" fetchpriority="low" alt="">
<!-- Lower priority of non-critical script -->
<script src="/analytics.js" defer fetchpriority="low"></script>
<!-- In preload directive -->
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
In Fetch API:
// Critical data request for first render
const data = await fetch('/api/initial-data', { priority: 'high' });
// Background sync
const sync = await fetch('/api/sync-status', { priority: 'low' });
Scenario: Image Carousel
Without hints browser doesn't know first carousel slide is LCP element. Loads all slides with same priority.
<div class="carousel">
<!-- First slide — LCP, high priority -->
<img
src="/slides/slide-1.webp"
fetchpriority="high"
loading="eager"
alt="Slide 1"
>
<!-- Other slides — low priority or lazy -->
<img
src="/slides/slide-2.webp"
fetchpriority="low"
loading="lazy"
alt="Slide 2"
>
</div>
Scenario: Product Page with Gallery
<!-- Main image — LCP -->
<img
src="/products/main-image.webp"
fetchpriority="high"
loading="eager"
width="800"
height="600"
alt="Product"
>
<!-- Thumbnails — low priority -->
<div class="thumbnails">
<img src="/products/thumb-1.webp" fetchpriority="low" loading="lazy" alt="">
</div>
Dynamic Priority Management in React
When LCP element is determined dynamically:
function ProductGrid({ products }) {
return (
<div className="grid">
{products.map((product, index) => (
<ProductCard
key={product.id}
product={product}
imagePriority={index === 0 ? 'high' : 'low'}
imageLoading={index < 4 ? 'eager' : 'lazy'}
/>
))}
</div>
);
}
function ProductCard({ product, imagePriority, imageLoading }) {
return (
<div>
<img
src={product.image}
fetchpriority={imagePriority}
loading={imageLoading}
alt={product.name}
/>
</div>
);
}
In Next.js <Image> component uses priority prop:
import Image from 'next/image';
// Automatically adds fetchpriority="high" and preload
<Image
src="/hero.webp"
width={1200}
height={600}
priority
alt="Hero"
/>
Lower Priority for Third-Party Scripts
Analytics and pixels shouldn't compete with critical resources:
<!-- With explicit low priority: -->
<script src="https://www.google-analytics.com/analytics.js" defer fetchpriority="low"></script>
<!-- GTM with low priority -->
<script fetchpriority="low">
(function(w,d,s,l,i){/* GTM snippet */})(window,document,'script','dataLayer','GTM-XXXXX');
</script>
Critical API Requests During SSR Hydration
For hydration needing immediate data:
async function loadCriticalData(url) {
const response = await fetch(url, {
priority: 'high',
cache: 'no-cache',
});
return response.json();
}
async function syncUserPreferences() {
await fetch('/api/preferences', {
method: 'POST',
priority: 'low',
body: JSON.stringify(preferences),
});
}
Measuring Effect
Check via Chrome DevTools → Network → Priority column. Before and after fetchpriority placement check:
- What priority LCP image loads with
- Whether third-party scripts displace critical resources
Programmatically via PerformanceResourceTiming:
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.initiatorType === 'img' && entry.name.includes('hero')) {
console.log({
url: entry.name,
ttfb: entry.responseStart - entry.fetchStart,
duration: entry.duration,
});
}
}
});
observer.observe({ type: 'resource', buffered: true });
Browser Support
fetchpriority supported in Chrome 101+, Edge 101+, Firefox 132+, Safari 17.2+. For older browsers—simply ignored, graceful degradation.
Timeframe
Audit current priorities via DevTools and place fetchpriority on key elements — 4–8 hours. Full implementation with dynamic priority management in React — 1–2 business days.