Prerender pages with the Speculation Rules API

Chromium browsers (Firefox and Safari are not on board yet) allow prerendering of future pages that a user is likely to navigate to. Prerending will speed up navigation and can be helpful when used together with cross-document view transitions, because for a prerendered page the transition does not need to wait for loading and rendering.

As a web developer, you can insert a JSON configuration in your web pages to define how prerendering should occur. Here is what I´m currently using within the <head> of all documents on ulfschneider.io:

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

This configuration tells Chromium browsers to prerender any page with moderate eagerness.

The moderate option is a middle ground, and many sites could benefit from the following speculation rule that would prerender a link when holding the pointer over the link for 200 milliseconds (or on the pointerdown event if that is sooner, and on mobile where there is no hover event) as a basic—yet powerful—implementation of speculation rules.

Speculation Rules are a progressive enhancement, which means the configuration JSON is not breaking anything for the browsers not supporting it. It`s speculative in the sense that a supporting browser may not act upon it based on user settings, current memory usage, or other heuristics.

Because prerendering has an impact on bandwith, memory, and CPU consumption, it should not be overused. The moderate eagerness will automatically limit you to 2 prerendered pages and works First In, First Out, which means after reaching the limit, a new speculation will cause the oldest speculation to be canceled and replaced by the newer one to conserve memory.

Chrome will also prevent speculations being used in certain conditions including:

Speculation Rules can be analyzed in the DevTools, you will find it for Chrome under DevTools → Application → Background Services → Speculative loads. You can see there, for example, what page could be prerendered and what has been prerendered.

Screenshot of the Chrome DevTools showing 'Speculative loads'.
Use DevTools to analyze Speculation Rules for your website

You can do more with Speculation Rules, for example change eagerness to reduce the likelihood of wasted speculations, and define with lists or selectors what links could be prerendered (or prefetched, which is less than prerendering, because it loads the page but does not prerender it).

Eagerness has the settings:

immediate
Speculate as soon as the browser observes the rule
eager
Currently identical to immediate. Will change in the future to something between immediate and moderate.
moderate
Speculate when the mouse is over a link for 200 milliseconds (or on the pointerdown event if that is sooner, and on mobile where there is no hover event))
conservative
Speculate on pointer or touch down.

To suggest certain pages for prerendering from a URL list, you can do:

<script type="speculationrules">
{
  "prerender": [
    {
      "urls": ["next.html", "next2.html"]
    }
  ]
}
</script>

To suggest pages for prerendering described by selectors, it´s possible to:

<script type="speculationrules">
{
  "prerender": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": {"href_matches": "/wp-admin"}},
        { "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
        { "not": {"selector_matches": ".do-not-prerender"}},
        { "not": {"selector_matches": "[rel~=nofollow]"}}
      ]
    }
  }]
}
</script>

To dive deeper, refer to:

Comments