Speculation Rules API: The Path to Instant Page Loading

The Speculation Rules API offers us the ability to preload or even pre-render another page. This can lead to nearly instantaneous page loading for users transitioning between pages, enhancing their overall web experience.

Some of you might recall the older prerender (<link rel="prerender">), which didn't quite take the world by storm. Enter Chrome version 109 with the Speculation Rules API, introducing entirely new page loading capabilities, with subsequent improvements in version 122. The overall support is quite decent.

Instant loading naturally impacts all Core Web Vitals: saving loading time affects the LCP metric, keeping the page in memory aids layout stability (CLS), and it even improves interaction response speed (INP).

Prerender Under the Microscope#

The basic implementation of Speculation Rules is fairly straightforward. Using an HTML <script type="speculationrules"> tag, you define rules for pre-rendering pages in JSON format. If HTML modification is off the table, you can inject these rules using JavaScript or HTTP headers.

Below is a simple example of pre-rendering a page using specific URLs:

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

But the Speculation Rules API is far more flexible, allowing you to use CSS selectors or apply a where condition. The following example uses this feature to pre-render URLs within a document without explicitly listing them, except for pages under /logout/*:

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

However, implementing immediate prerender for every link on a page isn't wise, as it increases server load.

On mobile devices, this can also lead to excessive CPU and memory usage. The eagerness attribute, part of the Speculation Rules API toolkit, can help achieve a balanced pre-rendering setup.

The Eagerness Attribute#

With eagerness, you can set different timeframes for applying speculative rules.

Your options are:

• immediate – Kicks off the moment the browser encounters your rules.
• eager – Currently behaves as immediate, but improvements are expected, positioning eager somewhere between immediate and moderate.
• moderate – Triggers pre-rendering if you hover over a link for at least 200 milliseconds (or on pointer down event, whichever comes first, and on mobile devices where hover isn't an event).
• conservative – Activates on the pointer down event.

It's also crucial to mention that Chrome might prevent Speculation Rules API execution under certain conditions. This includes scenarios like when a user has power-saving mode, data saving, memory restrictions enabled, or for pages opened in background tabs. Users can also explicitly disable pre-rendering in browser settings.

You can verify your rule implementation directly in DevTools under the Application tab by selecting Speculation Loads from Background services:

Testing Speculative loads in Chrome's DevTools.

Speculation Rules and Analytics Impact#

It's important to note that pre-rendered pages can skew measurements in analytics tools. User interactions might not be recorded accurately if the page isn't properly loaded. We recommend adjusting analytics codes to accurately detect page activation.

Most standard analytics like GA measure Speculation Rules correctly, but it's necessary to monitor when a page is actually displayed to the user. Google covers more on this topic in their article.

Which Websites Benefit from the Speculation Rules API?#

Content-heavy sites and e-commerce platforms are prime candidates for speculative rules deployment. When selecting specific pages for speculation, always choose those with the highest likelihood of user clicks. Such data can be found in analytics tools like Hotjar.

For inspiration, here are a few tips on where to apply speculative rules:

• In e-commerce, for pagination in category pages.
• In e-commerce, for the next steps in the shopping cart.
• On content websites, for the latest article on the homepage.

Remember the eagerness setting option and start with less "aggressive" configurations like moderate. Generally, we recommend using speculative rules sparingly as they impose additional server load. On mobile, they can also lead to excessive CPU, memory usage, etc.

Navigation Types: Measuring the Share of Prerendered Pages#

Our PageSpeed.ONE PLUS monitoring uses Navigation Types to track changes in the share of different navigation types. One such type is prerender, which includes pre-rendering via the Speculation Rules API.

Overview of Navigation Types in PageSpeed.ONE PLUS monitoring.