Resource Prefetching: Hints, Preload and Preconnect

What is resource prefetching?

Resource prefetching is a family of browser hints, written as <link rel="..."> tags or Link headers, that tell the browser to fetch a resource or open a connection earlier than it would on its own. The browser can use the head start to load the current page faster or to make the next navigation feel instant. A hint is a suggestion: the browser may still ignore it.

The hints at a glance

How the hints work

preload makes the browser discover and download a resource early and keep it for reuse. The as attribute (image, font, script, style, fetch, track) tells it what the resource is, so it can set the right priority and headers. Font and fetch preloads must carry crossorigin even for same-origin files, or the browser fetches the file twice.

preconnect pays the connection cost before the first request. It does nothing for your own origin, which is already connected. Browsers close unused preconnected connections after about 10 seconds, so only preconnect origins you will use right away. For fonts and other CORS requests it needs crossorigin, otherwise the browser only does the DNS lookup.

dns-prefetch is the cheap version: it resolves the hostname and stops there. A DNS lookup typically takes tens of milliseconds, so it adds up only when a page talks to many origins.

prefetch downloads a resource into the HTTP cache at low priority, for a navigation that has not happened yet. It is blocked by Cache-Control: no-store and no-cache, and the request carries a Sec-Purpose: prefetch header that your server can see. For whole documents, MDN recommends the Speculation Rules API where it is supported; see speculative loading and prerendering.

fetchpriority is a separate attribute (high, low, auto) for img, script and link. It raises or lowers priority but does not help the browser find the resource earlier, which is why it is often combined with preload for an image set in CSS.

Example: hero image and font

A landing page has a hero image set as a CSS background and a web font. The browser only discovers both after parsing the CSS, which delays Largest Contentful Paint. Two hints in the head fix the discovery:

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

Fonts and other third-party files from a CDN benefit from an early connection:

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

For a likely next page, a low-priority prefetch or a speculation rule warms the cache:

<link rel="prefetch" href="/pricing">

<script type="speculationrules">
{
  "prefetch": [{ "urls": ["/pricing", "/signup"] }]
}
</script>

Speculation Rules is still experimental and not available in every browser, so treat it as an enhancement and check support before you rely on it.

Common mistakes

• Preloading too much. Preloads compete with each other and with the resources the browser would have fetched anyway. Keep them to the one or two that gate LCP.
• Forgetting crossorigin. Without it, a font preload is not reused and the file downloads twice.
• Wrong as value. The preload is then not matched to the later request.
• Preconnecting to every third party. Each connection costs bandwidth and CPU for the TLS work, and idle ones are dropped after about 10 seconds. Use dns-prefetch for the long tail.
• Prefetching pages nobody visits. It spends visitors' data for nothing, especially on mobile. Base the list on real navigation paths.
• Prefetching URLs with side effects. A prefetched logout or add-to-cart URL still hits your server.

How it relates to performance testing and monitoring

Hints change what the browser does, so measure before and after instead of trusting the theory. Compare the waterfall and LCP with and without each hint. The free Core Web Vitals checker shows whether real users already pass LCP, INP and CLS, and LoadFocus page speed monitoring runs scheduled Lighthouse audits from 25 cloud regions so you can see whether a change helped everywhere or only near your server. For the wider set of frontend fixes, see the 10-step guide to improving website speed. Related: network connections for page speed and preloading for assets.

FAQ: resource prefetching

What is the difference between preload and prefetch?

Preload is for something the current page needs soon and is fetched at high priority. Prefetch is for something a later navigation may need and is fetched at low priority.

Should I preload my hero image?

If it is your LCP element and the browser would otherwise find it late, for example because it is a CSS background, yes. Pair it with fetchpriority="high" and confirm in a waterfall that LCP improves.

How many preconnect hints are too many?

There is no fixed number. MDN and web.dev both advise preconnecting only to the most critical origins, because each connection has a cost and unused ones are closed after about 10 seconds. Use dns-prefetch for the rest.

What is the difference between preconnect and dns-prefetch?

dns-prefetch only resolves the hostname. Preconnect also opens the TCP connection and, for HTTPS, completes the TLS handshake.

Is prefetch the same as prerender?

No. Prefetch downloads a resource without running it. Prerender loads and renders a whole page in a hidden state, which costs much more, so use it only for very likely navigations.

Does prefetching waste mobile data?

It can, if the user never visits the prefetched page. Prefetch only high-probability next steps, and avoid speculative loading for users who have asked to save data.