Resource Hints Best Practices and Common Pitfalls
Comprehensive guide to resource hint best practices, performance optimization patterns, and common mistakes to avoid when using preload, prefetch, and preconnect.
Detailed Explanation
Resource Hints Best Practices
Resource hints are powerful performance tools, but misusing them can actually slow down your page. This guide covers the best practices and common pitfalls.
Golden Rules
- Preload only what you need NOW — overpreloading dilutes browser priority
- Prefetch only what you need NEXT — overprefetching wastes bandwidth
- Preconnect only to origins you will use SOON — unused connections waste resources
- Always include the correct attributes —
as,crossorigin,type - Audit regularly — resource hints that were correct six months ago may be wrong now
Resource Hint Budget
Set a budget for each hint type:
| Hint Type | Recommended Maximum |
|---|---|
| preload | 3-5 resources |
| preconnect | 2-4 origins |
| dns-prefetch | 4-8 origins |
| prefetch | 2-3 resources |
| modulepreload | 2-3 modules |
Ordering in the Document
Place resource hints in this order in <head>:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="..." />
<!-- 1. Preconnect (highest urgency connections) -->
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin="anonymous" />
<!-- 2. dns-prefetch (fallback + lower urgency) -->
<link rel="dns-prefetch" href="https://analytics.example.com" />
<!-- 3. Preload critical resources -->
<link rel="preload" href="/css/critical.css" as="style" />
<link rel="preload" href="/fonts/main.woff2" as="font"
type="font/woff2" crossorigin="anonymous" />
<!-- 4. Stylesheets -->
<link rel="stylesheet" href="/css/critical.css" />
<!-- 5. Prefetch (lowest urgency) -->
<link rel="prefetch" href="/js/next-page.js" as="script" />
<title>...</title>
</head>
Common Pitfalls
Pitfall 1: Preloading Everything
<!-- DON'T: preloading 10+ resources defeats the purpose -->
<link rel="preload" href="/css/style1.css" as="style" />
<link rel="preload" href="/css/style2.css" as="style" />
<link rel="preload" href="/css/style3.css" as="style" />
<!-- ... 7 more preloads -->
When everything is preloaded, nothing is prioritized.
Pitfall 2: Preloading and Not Using
Make sure every preload has a corresponding consumer on the page. If you conditionally load resources, use prefetch instead.
Pitfall 3: Wrong crossorigin Value
The crossorigin value must match how the resource is actually fetched. A mismatch causes a double download.
Pitfall 4: Forgetting nopush
If your server supports HTTP/2 push, preload headers may trigger server push. Add nopush if you only want the browser to fetch:
Link: </css/style.css>; rel=preload; as=style; nopush
Testing and Monitoring
- Lighthouse — flags unused preloads and suggests new ones
- WebPageTest — waterfall view shows preload timing
- Chrome DevTools Network — priority column shows resource priorities
- Real User Monitoring — track LCP and FCP improvements after adding hints
- Coverage tab — identify which CSS/JS is actually used above the fold
Use Case
A performance engineering team audits a large news website and discovers 12 preload tags, 8 preconnect tags, and 3 unused prefetch tags. They reduce preloads to the 4 most critical resources, limit preconnect to 3 essential origins, and remove unused prefetches. LCP improves by 200ms because the browser can focus on truly critical resources instead of spreading bandwidth across 23 hints.