principlejavascriptModerate
preload vs prefetch vs preconnect: using the right resource hint
Viewed 0 times
preloadprefetchpreconnectdns-prefetchresource hintslink relthird party
Error Messages
The resource was preloaded using link preload but not used within a few seconds after the window's load event.Problem
Resource hints (preload, prefetch, preconnect) are used interchangeably by developers, causing either wasted bandwidth (prefetching resources that are immediately needed) or missing optimizations (not preconnecting to critical third-party origins).
Solution
Use each hint for its specific purpose:
<!-- preload: current page needs this soon, high priority -->
<link rel="preload" href="/critical-font.woff2" as="font" crossorigin />
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high" />
<!-- prefetch: likely needed on next navigation, idle time, low priority -->
<link rel="prefetch" href="/checkout.js" />
<!-- preconnect: establish TCP+TLS to third-party origin early -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- dns-prefetch: cheaper fallback for preconnect in older browsers -->
<link rel="dns-prefetch" href="https://analytics.example.com" />
<!-- preload: current page needs this soon, high priority -->
<link rel="preload" href="/critical-font.woff2" as="font" crossorigin />
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high" />
<!-- prefetch: likely needed on next navigation, idle time, low priority -->
<link rel="prefetch" href="/checkout.js" />
<!-- preconnect: establish TCP+TLS to third-party origin early -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- dns-prefetch: cheaper fallback for preconnect in older browsers -->
<link rel="dns-prefetch" href="https://analytics.example.com" />
Why
preload has a fetch priority of High and will compete with other critical resources if misused. prefetch uses Idle network time. preconnect eliminates DNS + TCP + TLS round trips (~200ms each) for third-party origins that will definitely be used.
Gotchas
- Preloading a resource but not using it within 3 seconds triggers a browser console warning
- crossorigin attribute is required for preloading fonts — without it the font is fetched twice
- preconnect to too many origins wastes connection slots — limit to 2-3 critical origins
- modulepreload is the correct hint for preloading ES modules (not preload as="script")
Code Snippets
Pairing preconnect with dns-prefetch as fallback
<!-- Preconnect + dns-prefetch pair for maximum browser compatibility -->
<link rel="preconnect" href="https://cdn.example.com" crossorigin />
<link rel="dns-prefetch" href="https://cdn.example.com" />Context
When optimizing network waterfall or reducing time to first byte for critical resources
Revisions (0)
No revisions yet.