In a digital era where speed equals engagement, website performance optimization has become an integral aspect of delivering exceptional user experiences. There are many ways to improve site speed, from using caching strategies to implementing Content Delivery Networks (CDNs), but one powerful method is to send signals to browsers to prioritize and load certain pages faster—even before they're needed. Enter Speculation Rules API, a powerful tool that enables browsers to preload the next likely step a user will make on their browsing journey. By utilizing real-time user behavior or a clear set of rules, the Speculation Rules API ensures seamless transitions between pages, minimizing load times and boosting performance across your website.

This guide will explore the two main strategies for the Speculation Rules API, why they are becoming essential in modern web performance optimization, and how businesses can use them to dramatically improve user experiences.

What is the Speculation Rules API and How Does It Work?

The Speculation Rules API is a web standard developed by the Chrome team to anticipate and preload user navigation based on their browsing behavior. It allows developers to give the browser advanced instructions and sets of rules on prefetching or prerendering resources (typically full pages), effectively speeding up the site's overall performance. The browser then in turn can choose to honor those instructions or ignore them.

In practice, this API acts as a layer of intelligence between the browser and the user. By analyzing user patterns, such as hovering over links or frequenting specific paths, the browser can "speculate" which resources or pages the user will need next and load them in the background. These predictions allow the site to deliver content more rapidly, improving metrics like Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS).

What is the benefit of the Speculation Rules API?

As websites become increasingly complex, integrating multiple heavy resources like third-party scripts and rich media content, maintaining smooth performance becomes a real challenge. This is where the Speculation Rules API shines. By allowing browsers to anticipate user behavior and preload or prerender key resources, it offloads a significant portion of the "heavy lifting" to the browser itself. This ensures that resources are fetched and ready by the time a user interacts with the next page, drastically reducing perceived load times.

In short, the Speculation Rules API works behind the scenes to:

• Ensure seamless user flow: By preloading the pages a user will most likely navigate to next, users don’t experience lags, long waits, or interrupted interactions.

• Improve user experience: Faster navigation between pages leads to reduced user frustration and boosted engagement.

• Optimize SEO: Better user experience and performance are rewarded by search engines with higher rankings, contributing to improved organic traffic and engagement.

The API is particularly beneficial for content-heavy sites or e-commerce platforms where user journeys tend to be predictable. By anticipating their next click, it preloads resources, ensuring a smooth transition between pages.

Browser signals for speculative loading

Generally, there are two approaches an engineer can take when sending speculative fetching signals to the browser - they can choose to prefetch the resource or to prerender it. Both approaches offer several benefits but also have certain drawbacks.

As Barry Pollard mentioned in a recent webinar on “Loading Pages Instantly”:

“[Using prefetching and prerendering] It’s about the balance trying to figure out what you can do to reduce waste efficiency (% of correct predictions) and increase prediction accuracy (# of predictions used).”

Read on to understand the main differences between the two.

Prefetching: A moderate performance boost

Prefetching downloads the response body of the referenced page, but none of the subresources referenced by the page and does not include the full rendering of the page. Therefore, it essentially cuts down the loading time of a page. It can be triggered by hovering over a link, scrolling through a webpage, or another set of rules.

When a page is prefetched by the Speculation Rules API, the following resources are typically loaded

• HTML Document: The main HTML content of the page is fetched and stored, so the browser doesn’t need to reload it when the user navigates to the page.

Prefetching is best for optimizing performance without heavy resource consumption, particularly on pages with predictable navigation but where full prerendering may not be necessary. In other words, in situations where you may only need a small boost in your site performance to achieve a good user experience. It is a safe approach since it is a less resource-intensive process but the lead time for preloading the next page is moderate.

While prefetching can be manually implemented using JavaScript commands within a page’s HTML, there are more accessible, automated solutions available that leverage the Speculation Rules API. These tools simplify the process by automatically setting rules for prefetching, ensuring an optimized user experience without the need for extensive manual configuration.

Speed Brain by Cloudflare

Cloudflare’s Speed Brain integrates the Speculation Rules API to predict user behavior and prefetch resources. By leveraging Cloudflare’s global CDN, Speed Brain reduces load times by fetching pages likely to be visited next.

Benefits of Speed Brain:

• Global Reach: Cloudflare’s extensive infrastructure ensures that resources are preloaded from the nearest server.

• Improved Performance: Prefetched pages load up to 45% faster, thanks to predictive preloading.

• Minimal Setup: Cloudflare has automatically turned on Speed Brain for all free users.

Limitations of Speed Brain:

• Generic Approach: No adaptation to data or user behavior of the preloading strategies, prefetching happening only after a user clicks on a link.

Instant.page

Instant.page is a tool that enhances web performance by prefetching pages based on where the user is about to click. By tracking hover behavior, Instant Page starts loading the next page before the user even clicks, reducing page load times.

Benefits of Instant.page:

• Simple integration: You only need to install a code snippet to your site

• Visibility: Instant.page gives clear visibility on the rules it has set for prefetching

Limitations of Instant.page:

• Changelog: There aren’t many recent updates of the solution and it requires technical background to implement it.

Prerendering: The superior preloading strategy

Prerendering takes it a step further by not only downloading and saving the necessary page resources but also fully rendering the entire page in the background. This means that when a user navigates to the page, it appears instantly, without needing to fetch or render any additional resources. This results in zero Time to First Byte from the user’s perspective, offering the smoothest and fastest possible experience.

When a page is prerendered via the Speculation Rules API, the following elements are fully processed, leading to near-instantaneous page load times:

1. HTML Document: Like prefetching, the main HTML file is downloaded. However, unlike prefetching, the page is fully rendered and stored in the browser’s memory, ready for immediate display.

2. Subresources: All subresources (CSS, JavaScript, fonts, and images) are fetched and rendered, ensuring that the page is visually complete.

3. JavaScript Execution: In prerendering, JavaScript is executed as if the user has already visited the page, making all elements interactive without delay.

Key Benefits of Prerendering:

• Instant Page Load: With the entire page rendered in the background, navigation to the next page feels instantaneous, eliminating the need to re-fetch or reprocess resources.

• Reduced TTFB: Since the page is already fully rendered, users experience zero TTFB, meaning the server doesn’t need to process any further requests for that page.

• Smoother User Experience: For pages with complex interactions or dynamic content, prerendering ensures that the page is fully interactive the moment the user clicks on the link, without any visual or interactive delays.

Prerendering is perfect for pages with high user interaction or complex content, where seamless navigation is essential, such as e-commerce sites, SaaS platforms, and digital studios with high-fidelity graphics and animations. It eliminates load times by fully rendering and storing entire pages in advance, ensuring instant transitions. It provides the highest level of performance optimization, but it requires more thoughtful implementation because it can lead to greater waste of browser resources.

While prerendering can also be manually implemented, the process is far more complex than prefetching. It requires defining clear rules to ensure accuracy and prevent wasted resources. Without precise configuration, prerendering can lead to inefficiencies by loading pages the user may never visit. Given these challenges, it is often advisable to use an automated solution that optimizes prerendering decisions, ensuring better accuracy and minimizing resource waste.

Speculative Loading

Speculative Loading is a WordPress plugin developed by the Core Performance Team to leverage the Speculation Rules API, bringing advanced preloading capabilities closer to WordPress users. The solution aims to improve the performance of WordPress sites by predicting and preloading pages or resources when a user is hovering over a certain link.

The plugin is designed for WordPress users who may not be as familiar with complex performance optimization techniques, providing an easier way to implement speculative preloading and boost site speed. It automatically triggers speculative actions for WordPress frontend URLs, reducing load times and enhancing the overall user experience.

Benefits of Speculative Loading:

• Supports both prefetches and prerenders: Depending on the interaction, the plugin will either prefetch resources or prerender entire pages.

• Custom exclusions: Users can exclude certain pages or paths from preloading, providing fine-tuned control over which resources are prioritized.

• Native integration for WordPress users: The solution is available as a free plugin in WordPress.org.

Limitations of Speculative Loading:

• Limited scope: The preloading strategies do not take into account actual user behavior

Uxify: AI-Driven Prerendering

Uxify takes prerendering to the next level by integrating machine learning and AI to predict user behavior across entire websites. Unlike basic prefetching or prerendering, Uxify’s Navigation AI uses data-driven models to identify which pages to preload, resulting in faster load times and a more personalized experience. In many cases the algorithm is able to predict and preload the navigation to the next page more than 4 seconds before the user makes the action, leading to a truly instant loading experience while browsing.

Key Benefits of Uxify:

• AI-Driven Decisions: Uxify’s algorithms predict user behavior, offering better and more precise results than traditional prefetching.

• Business-driven dashboards: Uxify is the only solution on the market that offers you comprehensive data on your user navigations and benchmarks it against the rest of your performance results.

• Platform-agnostic: It integrates easily with every platform and requires no technical setup.

Speculative loading techniques, such as prefetching and prerendering, offer significant performance enhancements by reducing load times and ensuring a smoother user experience. Prefetching is a lighter approach, downloading resources like HTML and images in advance to shorten load times when users navigate to the next page. Prerendering, while more resource-intensive, goes a step further by fully loading and rendering the page in the background, offering near-instant page loads.

Although prerendering delivers superior performance, it demands stricter rules and precision to avoid resource waste, as it involves more computational power. Both techniques can be manually implemented, but solutions like Uxify automate these processes using AI-driven decisions, providing an efficient, low-effort way to boost site performance and ensure accurate preloading with minimal waste.

FAQ

1. What does predictive page preloading refer to?

Predictive page preloading refers to the process of using algorithms or user behavior patterns to anticipate which web page or resources a user is likely to interact with next. Technologies like the Speculation Rules API leverage prefetch and prerender techniques to load a page in the background before the user clicks a link or hovers over it. This significantly reduces load times, ensuring a smoother user experience with near-instant loading of the next page. Predictive preloading is especially beneficial for sites with predictable navigation paths, like e-commerce or content-heavy websites, and helps optimize performance by minimizing delays.

2. Do Speculation Rules API work on mobile?

Yes, the Speculation Rules API can work on mobile devices, but its support depends on the browser in use. As of now, it is supported mainly in Chromium-based browsers, including mobile versions of Chrome and Edge. This means that mobile users on these browsers can benefit from improved performance through prefetching and prerendering. However, the API may not be supported in other mobile browsers like Safari or Firefox, where the benefits of speculative preloading may not be realized.

3. Are there pages that should not be preloaded?

Yes, there are instances where certain pages should not be preloaded. Pages that contain sensitive information, such as payment or login forms, should generally not be preloaded for security reasons. Additionally, pages that are resource-heavy but unlikely to be accessed during a user session may also be excluded to avoid unnecessary bandwidth consumption and server load. Developers can manage these scenarios by using the no-prefetch or no-prerender directives, ensuring that speculative preloading doesn't lead to wasted resources or security risks.

4. Do browsers always honor preload/prefetch signals??

No, browsers do not always honor preload or prefetch signals. While developers can suggest which resources to prefetch or preload using resource hints or the Speculation Rules API, the browser has the final say in whether to follow these instructions. Factors like user bandwidth, device performance, or memory availability can cause the browser to skip prefetching or prerendering to optimize overall performance. Additionally, some browser extensions, like ad blockers, may disable preloading features entirely.

5. How are the Speculation Rules API and the resource hints different from each other?

The Speculation Rules API and resource hints both help improve website performance, but in different ways. The Speculation Rules API focuses on preloading entire pages based on user actions, like hovering over a link, giving developers more control over which pages load next. On the other hand, resource hints (like DNS-prefetch, preload, and prerender) guide browsers on which resources (such as images or fonts) to load sooner, but apply to individual resources rather than full pages. Depending on your site's needs, you can use either method to help improve load times and user experience.