Resource hints are <link rel="…"> tags that tell the browser to start preparing for something before it would naturally discover the need. Four main ones (with prerender largely replaced by the Speculation Rules API).

preload — "I need this now for the current page"

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.avif" as="image" fetchpriority="high">

• High priority.
• Browser starts fetching as soon as it parses the link.
• For resources the browser would otherwise discover late: fonts referenced inside CSS files, hero images in a JS-loaded component, critical scripts not in the main bundle.
• as is required — wrong as means the preload doesn't match the eventual real request and you've just double-fetched.
• crossorigin for fonts — without it, the font fetch happens twice.
• fetchpriority="high" to compete with the browser's auto-prioritization.

Don't preload everything — preload competes with the rest of the page for bandwidth. 1–3 resources max.

preconnect — "Open a TCP+TLS connection to this host"

<link rel="preconnect" href="https://cdn.example.com" crossorigin>

• Does DNS lookup + TCP handshake + TLS handshake to the host before the first resource is requested.
• Each connection can save 100–300ms RTT × 2-3 (DNS + TCP + TLS).
• Use for third-party origins you'll definitely hit: image CDN, fonts CDN, analytics endpoint.
• crossorigin should match the connection type (anonymous vs credentialed).
• Limit to ~4 origins — connections cost.

dns-prefetch — "Just resolve the DNS"

<link rel="dns-prefetch" href="https://cdn.example.com">

• Cheaper version of preconnect (DNS only, no TCP/TLS).
• Use as fallback for browsers without preconnect or for hosts you might not hit.
• Negligible cost — fine to use liberally for any host you might touch.

prefetch — "I might need this NEXT navigation"

<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.
• Used for next-likely routes: code chunks, JSON data, images on the next slide.
• Frameworks (Next.js <Link>) handle this automatically on viewport.

prerender — "Render the whole next page in the background"

The old <link rel="prerender"> is deprecated. Replaced by Speculation Rules API:

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

• Prerender fully loads (HTML + JS + execution) the next page in the background.
• Navigating to it = instant (zero network, already-painted).
• Caveats: costs bandwidth and CPU for pages user might never visit; respect Save-Data; some pages have side effects (analytics, ads, state mutation) that fire on prerender — guard with document.prerendering API.

Decision matrix

Pitfalls

• Preload without correct as → silently no-op or double-fetch.
• Preload everything → bandwidth contention with the actual page.
• Preconnect to 10 origins → connection limits, browser ignores some.
• Prefetch aggressively on mobile → battery + data drain.
• Prerender pages with side effects → analytics fires, state mutates, user sees stale data.

Measuring

• DevTools → Network → Priority column shows whether the hint changed priority.
• Lighthouse "Preload key requests" and "Preconnect to required origins" flag missing hints.
• Core Web Vitals (LCP) — the real measurement.

Speculation Rules

This is the modern future of "prepare the next page." It supersedes <link rel=prerender> and adds:

• Per-URL pattern matching.
• Eagerness levels (immediate, eager, moderate, conservative).
• Built-in respect for Save-Data and user-agent hints.
• Prerendered pages run in a separate browsing context until activated.

Chromium-based browsers support it; Firefox/Safari still maturing.