Resource Prefetch: Definition, Hints, Performance Best Practices

What is resource prefetching?

Resource prefetching is a set of browser hints that tell the browser to fetch (or pre-resolve) resources earlier than it normally would — to make subsequent loads faster. The browser still decides priority and timing; you're just signaling intent.

The four main hints (in order of speculation): preload (this resource is needed for the current page), preconnect (open early connection to a domain), dns-prefetch (resolve DNS early), and prefetch (likely needed for next navigation). Used wisely, they can shave hundreds of ms off LCP and INP.

The four resource hint types

preload: critical-path resources

<!-- Hero image: ensure browser fetches early -->
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">

<!-- Critical font (avoid FOIT/FOUT) -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

<!-- Key script -->
<link rel="preload" href="/critical.js" as="script">

Use sparingly — over-preloading hurts because everything competes for bandwidth.

preconnect: warm up connections

<!-- Will fetch from this domain soon -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://api.example.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

Saves DNS lookup + TCP handshake + TLS negotiation (~200-500ms typical).

dns-prefetch: lighter alternative to preconnect

<!-- Just resolve DNS, don't open connection -->
<link rel="dns-prefetch" href="https://analytics.example.com">
<link rel="dns-prefetch" href="https://ads.example.com">

Cheaper than preconnect; use for many third-party domains where preconnect would be wasteful.

prefetch: speculate about next page

<!-- Likely next page -->
<link rel="prefetch" href="/products">

<!-- Module prefetch (modern) -->
<link rel="modulepreload" href="/checkout.js">

Browsers fetch with low priority during idle time. Won't compete with current page.

fetchpriority: fine-tune priority

<!-- High-priority hero image -->
<img src="hero.webp" fetchpriority="high">

<!-- Below-the-fold image: low priority -->
<img src="footer-banner.webp" fetchpriority="low" loading="lazy">

Modern browsers respect fetchpriority on <img>, <script>, and <link>.

Practical patterns

LCP image preload

<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
<link rel="preload" href="/hero-mobile.webp" as="image" media="(max-width: 600px)">

Critical font

<link rel="preload" href="/inter.woff2" as="font" type="font/woff2" crossorigin>

API call

<link rel="preconnect" href="https://api.example.com" crossorigin>
<link rel="preload" href="https://api.example.com/initial-data" as="fetch" crossorigin>

Likely next page

<link rel="prefetch" href="/products">
<!-- Modern: prefetch + speculation rules -->

Modern: Speculation Rules API

<script type="speculationrules">
{
  "prerender": [{
    "urls": ["/products", "/about"]
  }],
  "prefetch": [{
    "where": { "href_matches": "/blog/*" }
  }]
}
</script>

Newer Chrome-based browsers; lets you declaratively specify what to prefetch/prerender.

Resource hint best practices

• Preload only critical path. 1-3 resources max for LCP.
• Preconnect to top 3-4 third-party origins. No more — connections cost.
• dns-prefetch can be liberal. Cheap, ~no downside.
• Prefetch likely next pages. Use analytics to identify common paths.
• Use crossorigin on font/fetch preloads. Or browser re-fetches.
• Test with WebPageTest. See actual waterfall impact.
• Don't preload everything. Counter-productive — bandwidth is finite.
• Lazy-load below the fold. Combine with preload for clear above/below split.

Common pitfalls

• Over-preloading. Everything is high priority = nothing is.
• Missing crossorigin. Font preload without crossorigin re-fetches the font.
• Wrong as value. Browser ignores hint silently.
• Preloading non-critical. Hurts LCP by competing for bandwidth.
• Preconnect to too many origins. Each costs TCP/TLS overhead.
• Prefetch with bandwidth-light users. Wastes mobile data; consider Save-Data header.
• Stale prefetch. Page may be cached when user navigates; can cause confusion.

FAQ: resource prefetching

preload vs prefetch: what's the difference?

preload = current page (high priority, fetched immediately). prefetch = next navigation (low priority, idle-time fetch).

Should I preload my hero image?

Yes — combined with fetchpriority="high", can shave significant ms off LCP.

How many preconnect hints are too many?

3-4 is typically the sweet spot. Each connection has cost; many connections compete with critical-path traffic.

Does prefetch work on mobile?

Yes, but consume the user's data. Some browsers respect Save-Data header. Be conservative on mobile.

What's modulepreload?

Like preload but specifically for ES modules — browser also parses + caches the module.

Can I prefetch entire pages?

Yes via prefetch for the HTML, or prerender / Speculation Rules API for full render.

How do I measure preload impact?

WebPageTest waterfall — see when each resource starts. Lighthouse will flag missing critical-path preloads.

Test prefetch performance impact with LoadFocus

LoadFocus runs Lighthouse audits from 25+ regions, measuring LCP improvements from preload + preconnect changes. Sign up free at loadfocus.com/signup.