Dev.to

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: { "prerender": [ { "where": { "href_matches": "/*" }, "eagerness": "moderate" } ], "prefetch": [ { "urls": ["next.html", "next2.html"], "requires": ["anonymous-client-ip-when-cross-origin"], "referrer_policy": "no-referrer" } ] } 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 and and The Speculation Rules API introduces a more advanced and flexible approach to resource loading, enhancing the capabilities of traditional methods like , , and . Here's how it improves upon these older mechanisms: Purpose: 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. Functionality: The traditional 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 prefe

Mar 9, 2025 - 15:03
 0
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:

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 and and

Image description

The Speculation Rules API introduces a more advanced and flexible approach to resource loading, enhancing the capabilities of traditional methods like , , and . Here's how it improves upon these older mechanisms:

  • Purpose: 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.

  • Functionality: The traditional 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 method.
    • Bypassing Cache-Control: Speculation Rules are not hindered by Cache-Control headers, making them more reliable for prefetching purposes.

  • Background: The legacy 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 , , and .

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

Welcome to My Website

href="/next-page.html">Go to Next Page

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