Speculation rules: Faster than ever

Speculation rules is a relatively recent feature of the web platform that enables developers to suggest to the browser which pages it should pre-fetch or pre-render so that as soon as one visits a page that it has pre-rendered, it can be displayed instantly. This means:

• Reduced TTI

• Improved CWVs

• Lower Bounce Rates & Increased Conversions

Speculation rules is defined by  inline <script> tags with type="speculationrules" or by the “Speculation-Rules” request header string pointing to files  (“/rules1.json”, “/rules2.json”) containing JSON instructions. It supports both the prerender (full page render) and prefetch (resource download only) functionalities. To specify pages, developers can use URL lists or document rules, and the “eagerness” parameter defines at what point it will speculate. 

While primarily implemented in Chrome and Edge, the goal of speculation rules are to enhance the performance and user experience by decreasing TTI (time to interactive). However, developers should be careful and review how analytics and state management is currently implemented. In addition, the server should be able to handle additional load during this feature’s implementation.

Speculation rules significantly enhance a user’s overall experience when visiting your website. Browsers are able to make content loading virtually instantaneous for the user, thus improving perceived page loading time. These can result in greater user engagement and lower bounce rates, which in turn may lead to a greater conversion rate. This is particularly important for websites requiring rapid navigation - like ecommerce sites. (a study by Walmart found that conversions increased by 2% for every 1 second improvement in page load time)

Speculation rules mimics the behavior of JS frameworks with SPAs, but without the inconvenience and disadvantages of implementing them. The main difference being that frameworks need to fetch json and a hydration phase where speculation rules can render it on the spot. Plus, without using the SPA framework, there are no heavy packages which need to be downloaded by the client. This leads to a faster site which will benefit both the users and search engines in terms of better services.

Overall, I find speculation rules to be an impressive improvement for browsers. It’s a progressive enhancement implemented in modern browsers such as Chrome and Edge, and it becomes possible to apply it on the site without degrading visitor experience of those who are using unsupported browsers.

Speculation Rules can improve user experience by allowing users to load pages in the tab instantly, which would feel like a native browser and application. This, in turn, enhances Core Web Vitals, specifically:

• Largest Contentful Paint (LCP)

• First Input Delay (FID)

In the “pre rendered” approach, the content on the page will be rendered in the background and shown as soon as the user navigates to it. For LCP, this often leads to minuscule load times, and for FID, it means the page is ready for interaction as soon as it’s loaded.

Furthermore, Speculation Rules can simplify code compared to normal SPAs, which rely on extensive client-side routing and state handling. Rather than rely on these sprawling JavaScript frameworks to enable such immediate navigation, developers can instead work with the browser’s local rendering engine to accomplish the same ends. It's far more lightweight, easier to debug and maintain thanks to the tools provided by modern browsers and simple API.

Speculation Rules work best when used for traditional multi-page applications (MPAs) that use SSR technologies like PHP, Ruby on Rails, Django, Node, etc.

They complement nicely with SSG (static site generation) tools like AstroJs, Jekyll, Hugo, or Eleventy when page content can be pre-rendered.

This can also apply to content management systems such as Drupal or WordPress, particularly if they are used in conjunction with caching.

In the case of more active sites, prefetch speculation rule can work in conjunction with JavaScript frameworks such as React, Vue, or Angular by making resources available upfront.

While it remains beneficial to apply speculation rules to enhance the efficiency of most sites, there are conditions when the application of such rules should not be supported. 

• Low bandwidth areas: Speculation rules can cause elevated data usage costs.

• Single Page Applications (SPA): May not benefit from prerendering.

• Cross-origin data: Sites fetching data from third parties or external APIs where user cookies already exist.

• Increased server load: When increased server load is not an option due to resource constraints.

• Complicated analytics setup: Analytics should be aware of prerendering and prevent firing events during it.

• Astro 4.2 added experimental support for page prerendering.

• 11ty has a plugin to support speculation rules.

• Nuxt has a module for integrating with speculation rules.

• WordPress has a ‘Speculative Loading’ plugin.

Article by Darius Zivertas