Bits of .NET

⚡ Hero Image > Analytics Script

Browsers guess priority. They’re often wrong. Priority Hints (fetchpriority) tell browser exactly what’s important. Faster LCP, better UX.

📝 Basic Priority Hints

<!-- High priority (hero image, main content) -->
<img src="hero.jpg" fetchpriority="high">
<link rel="preload" href="font.woff2" as="font" fetchpriority="high">

<!-- Low priority (below fold, analytics) -->
<img src="footer-logo.png" fetchpriority="low">
<script src="analytics.js" fetchpriority="low" defer></script>

<!-- Auto (browser default) -->
<img src="normal.jpg" fetchpriority="auto">

🎯 Fetch API Priority

// Critical API (high priority)
fetch('/api/hero-data', {
  priority: 'high'
});

// Background analytics (low priority)
fetch('/api/log', {
  priority: 'low'
});

// Lazy-loaded sections (auto priority)
fetch('/api/comments', {
  priority: 'auto'
});

✅ Example: LCP Optimization

• Without priority: Hero image loads after scripts
• With priority: fetchpriority=’high’ on hero image → 200ms faster LCP
• De-prioritize below-fold images → saves bandwidth
• Great for mobile connections (slow 3G, 4G)