CDN Prefetch and Preload: Anticipating User Needs
Loading Resources Before They're Needed
The fastest request is one the browser has already completed. Resource hints tell the browser to start loading resources before the normal HTML parsing would discover them. CDNs amplify these techniques by serving prefetched resources from nearby edge caches. For foundational context, read CDN Performance Metrics: What to Measure — FlyFish NWA.
Resource Hint Types
dns-prefetch
Resolve DNS for a domain before it's needed:
| Metric | Edge Processing | Origin Processing | Improvement |
|---|---|---|---|
| Latency (p50) | 8–15 ms | 120–300 ms | 15–20x faster |
| Cache Hit Ratio | 85–95% | N/A | Reduces origin load |
| TLS Handshake | 1–5 ms (nearby PoP) | 50–150 ms | 10–30x faster |
| Bandwidth Cost | $0.01–0.04/GB | $0.05–0.12/GB | 3–5x cheaper |
| Availability | 99.99% (multi-PoP) | 99.9% (single DC) | 10x fewer outages |
<link rel="dns-prefetch" href="https://cdn.example.com">Saves 20-100ms of DNS lookup time. Use for third-party domains you'll load resources from.
preconnect
Complete DNS + TCP + TLS for a domain:
<link rel="preconnect" href="https://cdn.example.com">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>Saves 100-300ms by completing the full connection setup. Use for critical third-party origins. Don't overuse — each preconnect consumes a connection and browser resources.
preload
Fetch a specific resource with high priority:
<link rel="preload" href="/fonts/custom.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero-image.webp" as="image">
<link rel="preload" href="/critical.css" as="style">Preload is for resources needed on the current page that the browser would discover late (fonts in CSS, LCP images, dynamic imports). The as attribute is required — it sets the priority and applies correct CSP.
prefetch
Fetch a resource for future navigation at low priority:
<link rel="prefetch" href="/next-page.html">
<link rel="prefetch" href="/next-page-hero.webp">Prefetch is for resources on pages the user is likely to visit next. The browser fetches them during idle time. CDN serves from edge cache, making the next page load instant.
CDN-Specific Prefetching
103 Early Hints
CDNs can send 103 status responses with preload hints before the origin has responded. The browser starts fetching resources while waiting for the main response.
Link Header
CDNs can add resource hints via the HTTP Link header (equivalent to <link> in HTML):
Link: </style.css>; rel=preload; as=style, </font.woff2>; rel=preload; as=font; crossoriginThis works even for non-HTML responses (API calls that trigger subsequent resource loads).
Predictive Prefetching
Some CDNs analyze user navigation patterns and automatically prefetch likely next-page resources:
- Cloudflare Speculation Rules — Automatically generate speculation rules based on link click probability
- Google Chrome Speculation Rules API — Declarative rules for prefetch/prerender
<script type="speculationrules">
{
"prerender": [
{"where": {"href_matches": "/products/*"}, "eagerness": "moderate"}
]
}
</script>Best Practices
- Preload the LCP image and critical fonts
- Preconnect to essential third-party origins (max 2-3)
- Prefetch likely next-page HTML for instant navigation
- Don't over-prefetch — it wastes bandwidth for users who don't navigate
- Respect Save-Data header — skip prefetch for data-conscious users