The Speculation API is a browser feature that lets us define rules for speculative navigation. What this means is we are given a way that allows the browser to make educated guesses about what your user will do next and prepare the content in advance. For example; If the user is about to click a link, the browser can prefetch resources for that link. If the browser is confident enough, it might even prerender the entire page, making the navigation feel almost instant when the user does click the link.

By reducing the time it takes to load content, you can make your web apps feel significantly faster, which of course is always the defacto for a world class user experience.

The Speculation API operates by defining speculation rules in your HTML. These rules tell the browser when and how to prefetch or prerender specific resources.

Prefetch

Downloads resources that may be needed soon for exampled a linked page and ensures the browser has assets ready in the cache when the user clicks the link they want to navigate to.

Prerender

This is a more resource intensive process. It fully renders a page in the background, so when a user navigates, they see the page instantly. It’s more resource-intensive but provides the smoothest experience.

To make sure you can see the benefits of speculative navigation in your browser, navigate to your browser settings to enable web page preloading. In Chrome, you can configure this by navigating to chrome://settings/performance/ and ensuring the Preload pages for faster navigation and searching setting is enabled.

You can progressively enhance a page to use speculation rules. Using this conditional logic, browsers that don’t support speculationrules will ignore the rules and will skip prerendering or prefetching.

Prefetch HTML Setup

First, we define speculation rules in our HTML to tell the browser to prefetch resources for specific links:

In this example the "prefetch" rule tells the browser to fetch the resources for /dog/1, /dog/2, and /dog/3 in advance. This means that when the user clicks on one of the links, the browser already has the necessary data cached.

Integrating with React

This is also possible when using frontend frameworks such as React. Combining React Router with the Speculation API would look something like this.

To implement the Speculation API, we simply add a <script> tag to our index.html file with speculation rules.

Using Prerendering

Prefetching is great for small assets, but for maximum speed, prerendering is the real MVP. You can specify rules to prerender a page like so:

Of course we can also achieve this with Javascript by doing the following.

When a user visits the homepage, the browser can fully render the /dog/1 page in the background. If they click on that link, the page is already rendered and loads instantly.

It can be wasteful to prerender all links on our site, it makes more sense that we target the links that know take longer to render than others or more commonly clicked links. This is where the property href_matches comes in to specify which pages to prerender unlocking a powerful way to specify which pages to prerender.

The where property is used to specify conditions for prerendering. The and property is used to combine multiple conditions.

Using the selector_matches property allows us to specify which pages to prerender based on CSS selectors. Depending on your use case, this can lead to declarative code like this:

The speculation rules API allows you to specify an eagerness setting to control when a page is prerendered.

immediate The page is prerendered or prefetched immediately.

moderate The page is prerendered or prefetched when the user hovers over a link for 200 milliseconds.

conservative The page is prerendered or prefetched when the user initiates a click on the link.

In general a click or touch event is fired on the “release” part of the interaction. The key here is that with the speculation rule the next page will start loading in the background as soon as the mouse button goes down or as soon as the tap interaction starts on a mobile device.

While the Speculation API is powerful, there are some best practices and pitfalls to keep in mind:

Do’s

Prefetch links that users are likely to click but don’t require high resource consumption.

For prerendering, focus on the pages most critical to your app’s flow.

Use tools like Chrome DevTools or Lighthouse to analyse the effectiveness of your prefetching and prerendering strategies.

Don’ts

Don’t prefetch every link. It can overwhelm the browser and slow down the user’s current experience.

Be careful with prerendering pages with heavy content. It can degrade performance on lower-end devices.

Speculation rules might inadvertently leak sensitive data about user behaviour to analytics tools, so beware to review your rules carefully.

The Speculation API is a powerful tool for improving user experience by making your web app faster and more responsive. By letting the browser prefetch and prerender resources based on user behaviour, you can significantly cut down on load times and delight your users.

We’ve seen how to set up speculation rules in HTML and integrate them with a React app. Now, it’s your turn to experiment and see how the Speculation API can improve your own projects. As browsers continue to adopt this feature, it’s worth staying ahead of the curve and integrating it into your performance optimisation strategies.

Halpy coding!