InterviewLane
Back to Performance
Performance
easy
mid

What are resource hints such as preload, prefetch, dns prefetch, and preconnect?

Four <link rel> hints that tell the browser to prepare for upcoming work. preload: fetch a critical resource for the CURRENT page now (high priority). prefetch: fetch a resource likely for the NEXT navigation (low priority, idle). dns-prefetch: just resolve DNS for a host. preconnect: DNS + TCP + TLS to a host. Use sparingly; wrong hints regress perf by stealing bandwidth/connections from the actual page.

7 min read·~5 min to think through
Sign in to bookmark & track progress

Resource hints are <link rel="…"> tags that tell the browser to prepare for upcoming work before it would naturally discover the need.

The four

preload — "Need this NOW for current page"

html
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.avif" as="image" fetchpriority="high">
<link rel="modulepreload" href="/app.mjs">
  • High priority.
  • Fetched as soon as HTML parses the link.
  • For resources the browser would discover late (fonts referenced inside CSS, hero image in JS-loaded component).
  • as required — wrong as means no match → double-fetch.
  • crossorigin required for fonts.
  • Use sparingly (1-3 resources max) — preload competes with the rest of the page.

prefetch — "Might need this for NEXT page"

html
<link rel="prefetch" href="/_next/static/chunks/admin.js">
  • Low priority — fetched during idle time.
  • Stored in HTTP cache; instant if the user actually navigates there.
  • For predictable next navigation: code chunks, JSON data, next slide images.
  • Frameworks (Next.js <Link>) prefetch automatically on viewport.

preconnect — "Open TCP+TLS to this host"

html
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
  • Does DNS + TCP handshake + TLS handshake in parallel with page parsing.
  • Saves 100-300ms RTT × 2-3 on cold connections.
  • For third-party hosts you'll definitely hit (image CDN, fonts, analytics).
  • crossorigin must match connection mode (anonymous vs credentialed).
  • Limit to ~4 hosts — each connection costs.

dns-prefetch — "Just resolve DNS"

html
<link rel="dns-prefetch" href="https://cdn.example.com">
  • Cheaper subset of preconnect (DNS only, no TCP/TLS).
  • Negligible cost — fine for any host you might touch.
  • Useful as fallback for browsers without preconnect.

Decision

GoalHint
Critical current-page resourcepreload
Third-party connection setuppreconnect
DNS onlydns-prefetch
Likely next navigationprefetch
Full-page background prerenderSpeculation Rules

fetchpriority

Newer addition (Chrome/Edge):

html
<img src="hero.avif" fetchpriority="high" alt="">
<script src="below.js" fetchpriority="low" async></script>

Overrides the browser's default priority guess. Critical for LCP images: <img fetchpriority="high"> + <link rel="preload"> together is the gold-standard pattern.

Speculation Rules (modern prerender)

Replaces old <link rel="prerender">:

html
<script type="speculationrules">
{
  "prerender": [{ "where": { "href_matches": "/products/*" }, "eagerness": "moderate" }],
  "prefetch":  [{ "where": { "selector_matches": "a" }, "eagerness": "conservative" }]
}
</script>

Powerful but bandwidth/CPU-expensive; respect Save-Data.

Pitfalls

  • Preload too much — competes with the page for bandwidth.
  • Preload wrong as — double-fetch.
  • Forgot crossorigin on font preload — refetch on the real request.
  • Preconnect dozens of hosts — connection limits exceeded.
  • Prefetch aggressively on mobile — battery + data drain.
  • Hints to resources never used — wasted bandwidth (DevTools warns).

Where to put them

In <head>, as early as possible. Server can also send hints via HTTP Link header (Link: </font.woff2>; rel=preload; as=font; crossorigin) or HTTP 103 Early Hints to fire before the main response.

Measurement

  • DevTools → Network → Priority column shows the actual priority used.
  • Lighthouse "Preload key requests" and "Preconnect to required origins" suggest missing hints.
  • Core Web Vitals (LCP) is the real measure.

Mental model

Hints are nudges to the browser's prioritization. Apply surgically based on profiling; don't blanket-apply. Each hint costs something (bandwidth, connection slot, prediction risk); benefits accrue only when the hint matches actual need.

Follow-up questions

  • •What's the difference between preload and prefetch?
  • •When does preconnect backfire?
  • •How does fetchpriority interact with preload?
  • •What are Speculation Rules?

Common mistakes

  • •Preload without correct as — double-fetch.
  • •Forgot crossorigin on font preload.
  • •Too many preloads — bandwidth contention.
  • •Preconnect to dozens of hosts.
  • •Prefetch aggressively on mobile.
  • •Confusing dns-prefetch and preconnect.

Performance considerations

  • •Right hints can shave hundreds of ms off LCP. Wrong hints regress perf by stealing bandwidth. Measure before/after with LCP, not just 'feels faster.'

Edge cases

  • •Save-Data: skip prefetch; reduce preload scope.
  • •Modulepreload for ES module entry points.
  • •Early Hints (HTTP 103) is server-driven preload — fires earlier than HTML parse.
  • •Cross-origin preconnect needs crossorigin attribute matching actual mode.
  • •Prerender pages have side effects unless guarded via document.prerendering.

Real-world examples

  • •Wikipedia preconnects to image CDN.
  • •Google Search uses Speculation Rules for top result.
  • •Next.js Image with priority preloads LCP image.
  • •Most major sites preconnect to analytics + fonts + image CDN.

Senior engineer discussion

Seniors apply hints surgically based on profiling. They know each hint's cost model, watch for the regression cases (over-preload), and pair hints with real LCP/INP measurements.

Related questions