Fetch the next page on hover

How to do it

Add <script type="speculationrules"> with prefetch (or the heavier prerender) for links on the same site. Chromium browsers act on it, and other browsers ignore the script safely. Use eagerness: moderate. On desktop it starts after a short hover, and on phones when a link is near where the visitor stopped scrolling. Leave out file links and paths that change something, such as sign-out. Avoid immediate on pages with many links, because it competes with the page's own load. Count analytics only after a prerendered page is shown, using document.prerendering and the prerenderingchange event.

Example

<script type="speculationrules">
{
  "prefetch": [{
    "where": { "and": [
      { "href_matches": "/*" },
      { "not": { "href_matches": "/logout" } },
      { "not": { "href_matches": "/*.pdf" } }
    ]},
    "eagerness": "moderate"
  }]
}
</script>

How to check

In DevTools › Application › Speculative loads, hover a link and see it prefetched. In the lab, time the first click, or watch CDP Preload.prefetchStatusUpdated. The rules exclude every path that signs out, deletes or changes data.

Measured

On a reference site, fetching every link at once (immediate) cost 0.6 s of mobile LCP on a short page in Lighthouse. On a page with about 50 links it cost 1.9 s against moderate. Data downloaded went from 89 to 403 KB. In Chrome with a warm service worker cache, immediate clicks took 63 ms against 65 ms with no rules (phone). In an earlier lab, removing a view transition took a prefetched click from 111 to 59 ms.