Speculation Rules API: A New Era of Faster Web Browsing

Imagine using the internet and seeing web pages load immediately, almost like magic. No more waiting or loading screens. This exciting idea is now possible thanks to a new feature called speculation rules. In this blog, we'll learn what speculation rules are, how they work, and see some practical examples you can use in your own projects.

What is Speculation rules API

The Speculation rules API is a new web api to improve the navigation speed in multi-page applications. It basically prefetch or prerender the desired pages upon user-interaction or after pageload. By doing prefetching or prerendering, the navigation speed between multiple pages will be significantly reduced.

Speculation rules give your browser hints about what pages to load next. Imagine hovering over a link, and the browser already starts loading that page in the background, even before you click. This dramatically speeds up browsing and removes frustrating waiting times.

How does it work?

With speculation rules, browsers can to predict (speculate) which page you're likely to visit next to enhance your experience. This prediction is based on factors like where your mouse is hovering or the links present on the current page. By anticipating your next move, the browser can load pages more efficiently, reducing wait times.

Prefetching vs. Prerendering

There are two primary methods browsers use to prepare the next page:

• Prefetching: This approach involves the browser downloading the basic blueprint of the page—the HTML content—but not rendering it. It's a lighter method that uses fewer resources, ensuring that when you navigate to the page, it loads faster than if it hadn't been prefetched.

• Prerendering: In this method, the browser goes a step further by downloading all resources, such as images and fonts, and fully rendering the page in a hidden tab. This means that when you click the link, the page appears instantly, providing a seamless experience. However, prerendering consumes more resources compared to prefetching.

Setting the Rules with JSON

Website developers can guide browsers on which pages to prefetch or prerender using the Speculation Rules API, defined in JSON format. This code can be embedded directly into the webpage or delivered via HTTP headers from the web server. The JSON structure specifies the URLs to target and the conditions under which the browser should act. For instance, developers can set the "eagerness" parameter to control how proactively the browser should prefetch or prerender pages:

• immediate: The browser starts prefetching or prerendering as soon as it encounters the rule.

• eager: Similar to immediate, but may be adjusted in future implementations.

• moderate: The browser waits until there's a reasonable indication, such as a brief hover over a link, before acting.

• conservative: The browser waits until you actually click or tap on a link before initiating the prefetch or prerender.

By fine-tuning these settings, developers can optimize resource usage and enhance user experience.

Example of Speculation Rules in JSON

Here's how developers can define speculation rules using JSON:

<script type="speculationrules">
{
  "prerender": [
    {
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }
  ],
  "prefetch": [
    {
      "urls": ["next.html", "next2.html"],
      "requires": ["anonymous-client-ip-when-cross-origin"],
      "referrer_policy": "no-referrer"
    }
  ]
}
</script>

In this example:

• The prerender rule instructs the browser to prerender any same-origin link on the page upon hover, with a moderate eagerness setting.

• The prefetch rule tells the browser to prefetch "next.html" and "next2.html", requires anonymization for cross-origin requests, and sets the referrer policy to "no-referrer".

By implementing these rules, developers can significantly improve page load times and provide a smoother browsing experience for users.

What about the existing <link preload> and <link prefetch> and

<link prerender>

The Speculation Rules API introduces a more advanced and flexible approach to resource loading, enhancing the capabilities of traditional methods like <link rel="preload">, <link rel="prefetch">, and <link rel="prerender">. Here's how it improves upon these older mechanisms:

<link rel="preload">

• Purpose: <link rel="preload"> is utilized to load resources essential for the current page, such as fonts, images, and scripts, ensuring they're available when needed.

• Limitation: It focuses solely on the current page's resources and doesn't anticipate the user's next navigation.

• Speculation Rules Advantage: The Speculation Rules API extends this concept by allowing developers to specify resources for subsequent pages the user is likely to visit, enhancing the overall navigation experience.

<link rel="prefetch">

• Functionality: The traditional <link rel="prefetch"> hint allows browsers to prefetch resources to the HTTP cache, potentially improving load times for future navigations.

• Challenges:

  • Cache-Control Limitations: Prefetched resources can be blocked by Cache-Control headers, limiting their effectiveness.
  • Cross-Site Restrictions: Cross-site prefetching is often restricted due to security and privacy concerns.

• Speculation Rules Enhancement:

  • In-Memory Caching: Speculation Rules utilize a per-document in-memory cache, ensuring prefetched documents are processed similarly to regular navigations but aren't rendered until needed.
  • Cross-Site Prefetching: This API supports cross-site prefetching, offering more flexibility compared to the older <link rel="prefetch"> method.
  • Bypassing Cache-Control: Speculation Rules are not hindered by Cache-Control headers, making them more reliable for prefetching purposes.

<link rel="prerender">

• Background: The legacy <link rel="prerender"> was deprecated in favor of NoState Prefetch, which fetched resources without fully rendering the page or executing JavaScript.

• Speculation Rules Superiority:

  • Full Prerendering: The Speculation Rules API enables developers to trigger complete prerendering of pages, including the execution of JavaScript and loading of subresources.
  • Enhanced Performance: This comprehensive prerendering ensures that when a user navigates to the prerendered page, it loads instantly, providing a seamless experience.

Speculation Rules API Overview

• Target Audience: The API is particularly beneficial for multi-page applications (MPAs), allowing developers to specify which documents should be prefetched or prerendered based on user behavior and site structure.

• Expressive Syntax: It offers a more configurable and expressive syntax, enabling precise control over resource loading strategies to optimize performance.

By leveraging the Speculation Rules API, developers can implement more efficient and user-centric resource loading strategies, surpassing the capabilities of traditional methods like <link rel="preload">, <link rel="prefetch">, and <link rel="prerender">.

Implementation

The Speculation Rules API offers a structured approach to enhance web performance by enabling browsers to anticipate and load resources for pages users are likely to visit next. This proactive loading can significantly reduce perceived load times and improve user experience. Here's how to implement speculation rules in your HTML:

1. Embedding a <script type="speculationrules"> Element

To define speculation rules, you embed a <script> element with the attribute type="speculationrules" directly within your HTML document. This script contains JSON-formatted rules that instruct the browser on prefetching or prerendering behaviors.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Speculation Rules Example</title>
  <script type="speculationrules">
    {
      "prerender": [
        {
          "source": "list",
          "urls": ["/next-page.html"]
        }
      ]
    }
  </script>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <a href="/next-page.html">Go to Next Page</a>
</body>
</html>

In this example, the browser is instructed to prerender /next-page.html, preparing it in the background so that navigation to it is instantaneous.

2. Defining Rules in JSON Format

Within the <script type="speculationrules"> element, rules are defined using JSON. Each rule specifies the action (prefetch or prerender), the source of the URLs, and the list of URLs to be processed.

Example:

{
  "prefetch": [
    {
      "source": "list",
      "urls": ["/about.html", "/contact.html"]
    }
  ],
  "prerender": [
    {
      "source": "list",
      "urls": ["/dashboard.html"]
    }
  ]
}

Here, the browser is instructed to prefetch /about.html and /contact.html, and to prerender /dashboard.html.

3. Specifying Pages to Prefetch or Prerender

The urls array within each rule specifies which pages the browser should prefetch or prerender. These URLs should be chosen based on user navigation patterns to optimize performance effectively.

4. Setting Conditions for Triggering Prefetching or Prerendering

Developers can control when prefetching or prerendering occurs by setting the eagerness property within each rule. This property determines how proactively the browser should load the specified resources.

Eagerness Levels:

• immediate: The browser starts prefetching or prerendering as soon as it processes the rule.

• eager: Similar to immediate, but allows the browser some discretion based on resource availability.

• moderate: The browser waits until there's a reasonable indication of user interest, such as hovering over a link.

• conservative: The browser waits until the user initiates navigation, such as clicking a link.

Example with Eagerness Setting:

<script type="speculationrules">
  {
    "prerender": [
      {
        "source": "list",
        "urls": ["/promo.html"],
        "eagerness": "moderate"
      }
    ]
  }
</script>

In this case, the browser will prerender /promo.html when it detects moderate user interest, such as a brief hover over a related link.

Additional Considerations:

• Source Specification: The source property indicates how the URLs are determined. For instance, "source": "list" means the URLs are explicitly listed, while other methods can derive URLs based on patterns or user behavior.

• Browser Support: As of now, the Speculation Rules API is supported in Chromium-based browsers like Chrome, Edge, and Opera. It's advisable to implement fallback mechanisms for browsers that do not support this API.

By thoughtfully implementing the Speculation Rules API, developers can significantly enhance the responsiveness of their websites, leading to a smoother and more engaging user experience.

What about the Browser Support

As of now, the Speculation Rules API is supported in Chromium-based browsers, including Chrome, Edge, and Opera. However, it is not yet available in Firefox or Safari. Despite this limited support, implementing the Speculation Rules API is safe because browsers that do not recognize it will simply ignore the <script type="speculationrules"> element without causing any issues.​

• Supported Browsers: Chrome, Edge, Opera (Chromium-based browsers).​ Unsupported Browsers: Firefox, Safari.​
• Market Coverage: Chromium-based browsers account for approximately 70% of the global browser market. ​
• Backward Compatibility: Non-supporting browsers will ignore the Speculation Rules API without any adverse effects. ​

Debugging in Chrome browser

To debug Speculation Rules in Chrome, use Chrome DevTools.

Here’s how:

• Open DevTools: Open Chrome DevTools before loading the page containing the speculation rules. This ensures speculations are captured correctly.
• Navigate to the Speculative Loads Tab: Go to the Application panel, then Background Services, and select the Speculative loads tab. Then choose the Speculations pane. If nothing appears, ensure you're on the correct page and DevTools was loaded before navigation; reload the page if necessary.
• Inspect Speculations: In the Speculations tab, you can view the URLs being prefetched or prerendered. Click on a line to see details if a page fails to prerender, including reasons for failure, such as incompatible JavaScript APIs.
• Check Speculative Loading Status: To confirm whether a page was prerendered or prefetched, inspect the Application panel to see the Speculative loading status for the current page.
• Monitor Network Activity: The Network track in the Performance Panel shows network activity related to prerendered resources without switching DevTools context.
• Sort by Status: Sort the Speculations pane by the Status column to identify pages that are prerendering as you hover over them. Clicking on them will show a quicker Largest Contentful Paint (LCP) time compared to non-prerendered pages.
• Examine Chrome's Address Bar Predictions: To view Chrome's predictions for URLs, go to the chrome://predictors page. Green lines indicate sufficient confidence to trigger prerendering.
• Use the Console to Test Prerendering: After a page is activated, open DevTools and type performance.getEntriesByType('navigation').activationStart in the console. A non-zero value indicates the page was prerendered.
• Simulate Different Network Conditions: Use the throttling options in the Network tab to simulate different network speeds and see how speculation rules perform under various conditions.
• Feature Detection Use feature detection code to determine if the browser supports speculation rules. If the browser doesn't support speculation rules, implement older technologies such as <link rel="prefetch">.

Practical Applications of the Speculation Rules API

E-commerce platforms greatly benefit from the Speculation Rules API. On these platforms, users regularly browse through various product pages, category listings, and search results. By applying prefetching or prerendering to these pages, the shopping experience becomes smoother and quicker. This immediate responsiveness not only improves customer satisfaction but can also lead to higher conversion rates, as shoppers are less likely to abandon the site due to slow loading times.

Blogs featuring multiple articles or content spread across multiple pages can similarly enhance user experience using this API. By prefetching or prerendering subsequent articles or pagination pages, readers experience seamless navigation. This approach encourages users to explore more content effortlessly, significantly improving their engagement and satisfaction.

Advantages of Implementing Speculation Rules API

A key advantage of using the Speculation Rules API is significantly reducing the perceived load times by preloading resources in advance. Prefetching resources or fully prerendering pages enables nearly instantaneous page transitions when navigating through the website, creating a smoother, more responsive browsing experience. Such improvements are crucial for retaining user interest and increasing their satisfaction.

Enhanced performance resulting from prefetching and prerendering also has positive effects on user engagement metrics, such as reduced bounce rates and prolonged sessions. The smoother and more responsive user experience encourages visitors to explore additional content, increasing the likelihood of conversions and repeat visits. Additionally, these improvements in page performance can positively impact search engine optimization (SEO), helping websites rank better in search results.

The Speculation Rules API also ensures efficient use of resources by allowing browsers to initiate prefetching only when sufficient resources, such as memory and network bandwidth, are available. Developers can fine-tune when resources are preloaded using eagerness settings (immediate, eager, moderate, conservative), ensuring effective utilization without wasteful preloading.

Moreover, improvements in caching mechanisms mean that prefetched or prerendered resources are stored efficiently and reused when required. Even if speculated pages are not immediately accessed, these resources provide future benefits, further improving overall site performance and responsiveness.

Key Considerations for Implementing Speculation Rules API

When implementing the Speculation Rules API, it's important to understand both the API and your website's specific needs. Ensure you avoid applying rules to sensitive routes such as logout, language-switching, or shopping cart actions to prevent unintended consequences.

Regularly monitoring and adjusting your preloading rules is crucial. Analyze user behavior using tools like Google Analytics and Real User Monitoring (RUM) to identify optimal preloading strategies. Adjust rules based on insights to balance effective resource use with performance gains.

Lastly, be aware of the potential increased server load due to prefetching and prerendering. This can impact server resources, bandwidth, and costs. Use caching wisely and update client-side scripts carefully, particularly for personalized content, to ensure optimal and efficient performance.

Summary

In summary, the Speculation Rules API is a powerful tool for enhancing web performance, primarily in multi-page applications (MPAs), by proactively prefetching or prerendering potential next pages. It allows the browser to start loading a subsequent page before a user even clicks a link, making navigation feel nearly instantaneous. By strategically implementing this API, developers can significantly improve user experience and potentially boost Core Web Vitals