Resource Prefetching
Also Known As
preload
prefetch
preconnect
resource hints
TL;DR
dns-prefetch, preconnect, preload, and prefetch hints — fetching critical resources early to reduce perceived load time.
Explanation
dns-prefetch: resolve DNS early (free, use for all external domains). preconnect: DNS+TCP+TLS for 2-3 critical origins. preload (as=font/image): fetch current-page critical resource — high priority, use sparingly for LCP and fonts only. prefetch: speculative next-page resource — low priority, idle time.
Common Misconception
✗ Preloading more always helps — preloading too many competes with the critical path; preload only the LCP image and critical fonts.
Why It Matters
Prefetching trades bandwidth for perceived speed — the browser downloads resources before the user explicitly requests them. Done correctly, navigation feels instant because the next page is already in cache. Done incorrectly, prefetching wastes bandwidth on resources never used, penalises users on metered connections, and can pre-execute tracking or analytics scripts the user did not consent to. The rel=prefetch and rel=preload hints have different semantics and are frequently misapplied.
Common Mistakes
- Preloading unused resources — browser warning
- Too many preconnects — CPU cost
- No as attribute on preload
- Confusing prefetch (next page) with preload (current page)
Code Examples
✗ Vulnerable
<!-- No hints — font discovered 200ms after CSS -->
✓ Fixed
<link rel="dns-prefetch" href="//analytics.example.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" href="/hero.avif" as="image">
<link rel="preload" href="/inter.woff2" as="font" crossorigin>Tags
🤝 Adopt this term
£79/year · your link shown here
Added
16 Mar 2026
Edited
23 Mar 2026
Views
22
🤖 AI Guestbook educational data only
|
|
Last 30 days
Agents 0
No pings yet today
No pings yesterday
Amazonbot 6
Perplexity 4
Unknown AI 2
SEMrush 2
Google 1
Ahrefs 1
Also referenced
How they use it
crawler 16
Related categories
⚡
DEV INTEL
Tools & Severity
🟡 Medium
⚙ Fix effort: Medium
⚡ Quick Fix
Use Next.js-style route prefetching or vanilla JavaScript to prefetch likely next pages on hover — the browser downloads them in the background so navigation feels instant
📦 Applies To
any HTML5
web
🔍 Detection Hints
No link prefetching on predictable navigation paths; DNS not prefetched for third-party origins; no speculation rules for predictable navigation
Auto-detectable:
✗ No
lighthouse
chrome-devtools
⚠ Related Problems
🤖 AI Agent
Confidence: Medium
False Positives: Medium
✗ Manual fix
Fix: Medium
Context: File