Resource hints are <link> tags that tell the browser to fetch or connect to resources early, optimizing load performance. Each serves a different timing/priority need.
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preconnect" href="https://api.example.com" />
<link rel="dns-prefetch" href="https://cdn.example.com" />
<link rel="prefetch" href="/next-page.js" />
What each one does
-
preload— "I need this for the current page, fetch it now at high priority." For critical resources the parser discovers late: fonts, hero images, CSS-referenced assets. Requiresasso the browser sets correct priority/headers. -
preconnect— "I'll connect to this origin soon; do the DNS lookup + TCP + TLS handshake now." Saves the round-trips before the first request to a third-party (API, font host, CDN). Use for a few critical origins. -
dns-prefetch— a lighter version of preconnect: just the DNS resolution. Good fallback / for many origins. -
prefetch— "I'll probably need this for the next navigation; fetch it at low priority when idle." For likely-next pages/assets. Cached for the future, not the current page.
A common real example: fonts
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
Fonts are discovered late (the browser must parse CSS first), so preloading them avoids invisible-text delays.
Caution: don't over-hint
Preloading everything defeats the purpose — it competes with genuinely critical resources for bandwidth. Hint only the few that matter most.
Why it matters
Resource hints shave latency off the critical path: preconnect removes handshake delay for third parties, preload prioritizes late-discovered critical assets (fonts, LCP image), and prefetch makes the next navigation feel instant.
Used surgically, they meaningfully improve Core Web Vitals.