link prefetch Tag

link rel="prefetch": telling the browser what comes next

The <link rel="prefetch"> tag is a low-priority hint that the browser may download a resource in advance because the user is likely to navigate to it next. Unlike preload, which warms up critical resources needed for the current page, prefetch is about future navigations: the second page of a paginated list, the most likely product detail page, the next step in a checkout funnel. The fetch runs at idle priority and the result lands in the HTTP cache, so when the user finally clicks, the page boots from disk in milliseconds.

<link rel="prefetch" href="/checkout">
<link rel="prefetch" href="/products/2" as="document">
<link rel="prefetch" href="/api/products.json" as="fetch" crossorigin>
<link rel="prefetch" href="/img/hero-step-2.webp" as="image">

Prefetch vs preload vs preconnect vs dns-prefetch

The four directives are routinely confused. dns-prefetch resolves a hostname; preconnect opens a full TCP+TLS connection without sending a request; preload downloads a resource the current page will definitely need (fonts, hero images, critical CSS) at high priority; prefetch downloads a resource a future navigation will probably need, at low priority. Mixing them up wastes bandwidth or degrades performance: preloading an image used three pages later, for instance, steals priority from the LCP element of the current page.

Hover-based prefetching: instant.page and Quicklink

instant.page is a small library (~1 KB) that listens for mouse movement and starts prefetching the link the user is about to click roughly 65 ms before the click event. Users perceive 65 ms slower clicks consistently — the effect is the difference between "snappy" and "instant". Quicklink, from Google Chrome Labs, takes a different approach: it watches the viewport with the Intersection Observer API and prefetches every link that becomes visible, respecting navigator.connection.saveData, effectiveType and a configurable allow/deny list.

<script src="//instant.page/5.2.0" type="module"
        integrity="sha384-..."></script>

<!-- Quicklink -->
<script type="module">
  import { listen } from 'https://cdn.jsdelivr.net/npm/quicklink/dist/quicklink.mjs';
  listen({ ignores: [/\/logout/, /\/admin/] });
</script>

103 Early Hints and the Speculation Rules API

The newest evolution of resource hints lives on the server. With 103 Early Hints, the server sends a partial response carrying Link: </style.css>; rel=preload headers before the final 200 OK, letting the browser start fetching critical assets while the backend is still rendering. Cloudflare and Fastly support it natively. The Speculation Rules API (Chrome 109+) goes further: a JSON block in the page lets you describe prefetch and even full prerender strategies declaratively, with conditions like "links matching /products/* on hover".

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

When prefetch becomes harmful

• Heavy SPA bundles: prefetching 500 KB of JavaScript for a route the user never visits wastes bandwidth and battery — especially on metered mobile plans.
• Analytics noise: server-side counters fire on prefetch as if the page were viewed. Mark prefetched requests with Sec-Purpose: prefetch and filter in your tracker.
• Authenticated endpoints: prefetching /logout in some setups logs the user out before they intend to leave. Always exclude destructive routes.
• Save-Data and slow networks: check navigator.connection and skip prefetch when saveData is true or effectiveType is 2g/slow-2g.

FAQ

What is the difference between prefetch and preload? Preload is for the current page (high priority, critical), prefetch is for a future navigation (low priority, optional). Using the wrong one tanks performance scores in Lighthouse.

How much bandwidth does prefetch cost? Typically 50–150 KB per prefetched page for a static site, much more for heavy SPAs. Set a budget — 5–10 prefetched URLs is a reasonable ceiling for most pages.

Does prefetch work cross-origin? Yes for documents, but cross-origin fetched resources need the crossorigin attribute and proper CORS headers, or the browser will fetch them again on actual navigation, wasting both round trips.

Is HTTP/2 server push still an option? No. Chrome removed support in 2022 because the server cannot know what is already in the client cache, leading to wasted pushes. 103 Early Hints replaced it as the recommended path.