Intent-Driven Prefetching

Using hover-intent or intersection observers to prefetch the HTML payload of links.

What is it?

Intent-driven prefetching anticipates user navigation by downloading the HTML payload of a destination URL the millisecond a user demonstrates intent (e.g., hovering over a link or touching it on mobile), before the actual click occurs.

Why does it matter?

Single Page Applications (SPAs) feel fast because they don’t trigger full page reloads. To achieve SPA-like navigation speeds on a traditional Multi-Page Application (MPA), the browser must cheat time. By fetching the HTML ~200ms before the click actually happens, the next page renders instantly.

How to implement it

1. Speculation Rules API

The modern, browser-native approach is the Speculation Rules API. This tells the browser to pre-render or pre-fetch links on hover automatically.

<script type="speculationrules">
{
  "prefetch": [
    {
      "source": "document",
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "selector_matches": ".no-prefetch" } }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

2. Library Fallback

For older browsers, use a lightweight library like quicklink or implement a custom mouseenter listener that dynamically injects a <link rel="prefetch"> tag into the <head>.

Verification

Open the Network tab in DevTools. Hover over a link on your site. You should see a network request for the HTML of the target page with a Priority: Lowest status before you even click.