Resource Hints: Preload, Prefetch & Preconnect
Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.
Topic content
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.
- ✓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