Resource Hints: Preload, Prefetch & Preconnect
Resource hints tell the browser how to prioritize network requests. Preload fetches critical assets for the current page, prefetch loads likely future resources, and preconnect warms up important origins early. Used correctly, they significantly improve LCP and overall loading performance.
Preload = first-class passengers who must board immediately (critical fonts, hero image). Prefetch = standby passengers for the next flight (likely next page). Preconnect = ground crew preparing the gate early for important destinations.
1Preload – Critical Resources
Tells the browser to fetch important assets with high priority for the current navigation. Ideal for LCP images, critical fonts, and essential JS/CSS.
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/hero.webp" as="image">
2Prefetch – Future Resources
Low-priority hint for resources likely needed in the near future (next page, heavy components). Browser may skip under network pressure.
3Preconnect & DNS-Prefetch
Preconnect establishes early DNS + TCP + TLS for important third-party domains. DNS-prefetch is a lighter DNS-only version.
| Property | preload | prefetch | preconnect |
|---|---|---|---|
| Risk | Can compete with other critical requests if overused | May be ignored under contention | Too many can waste connections |
| Examples | Hero image, Critical font, Critical CSS | Next page JS, Dashboard data | api.example.com, fonts.googleapis.com |
| Priority | High | Low / Speculative | Medium |
| Use Case | Current page critical assets | Likely next navigation | External APIs & CDNs |
preload
Risk
Can compete with other critical requests if overused
Examples
Hero image, Critical font, Critical CSS
Priority
High
Use Case
Current page critical assets
prefetch
Risk
May be ignored under contention
Examples
Next page JS, Dashboard data
Priority
Low / Speculative
Use Case
Likely next navigation
preconnect
Risk
Too many can waste connections
Examples
api.example.com, fonts.googleapis.com
Priority
Medium
Use Case
External APIs & CDNs
Common questions
- ›“What is the difference between preload and prefetch?”
- ›“How do you optimize LCP with resource hints?”
- ›“When should you use preconnect?”
- ›“How do resource hints affect Core Web Vitals?”
What interviewers look for
- Clear understanding of priority and timing
- Knowledge of correct attributes (as, crossorigin)
- Awareness of trade-offs and over-use risks
- Connection to real metrics (LCP, TTFB)
Short answer (60 sec)
Preload critical assets for the current page (high priority). Prefetch likely future resources (low priority). Preconnect to important third-party origins early. Use sparingly and validate impact.
Detailed answer (senior level)
Resource hints give the browser explicit loading instructions. Preload is high-priority for current navigation and directly helps LCP. Prefetch is speculative for next actions. Preconnect warms up cross-origin connections. Always include proper 'as' attributes and crossorigin for fonts. Overusing hints can hurt performance by saturating bandwidth — measure with real-user data.
- Preloading too many resources (bandwidth contention)
- Missing 'as' attribute on preload
- Forgetting crossorigin on fonts
- Using prefetch for critical current-page resources
- Not measuring impact after adding hints
- ✓Preload critical resources needed for current page
- ✓Prefetch for likely next navigation
- ✓Preconnect to important external domains
- ✓Always specify 'as' and crossorigin where needed
- ✓Hints are priority signals — use them judiciously
- ✓Validate with Lighthouse and real-user metrics
- ✓Combine with critical CSS and lazy loading for best results
Related web fundamentals topics
Continue with closely related browser and frontend engineering concepts.