Improving Pagespeed with speculative loading

As mentioned, the browser predicts which site the user might visit next and preloads that page. If the browser's guess is correct, the page loads almost instantaneously.

To use the speculation rules API, you need to add a small script to the end of your site:

                                
 1<script>
 2if (HTMLScriptElement.supports &&
 3    HTMLScriptElement.supports('speculationrules')) {
 4    const specScript = document.createElement('script');
 5    specScript.type = 'speculationrules';
 6    specRules = {
 7        "prerender": [{
 8            "where": {
 9                "or": [
10                    {"href_matches": "/"},
11                    {"href_matches": "/*.html"},
12                    {"href_matches": "/blog*"},
13                    {"href_matches": "/*-feature-matrix/"},
14                    {"href_matches": "/(imprint|privacy)/"}
15                ],
16            },
17            "eagerness": "moderate"
18        }]
19    };
20    specScript.textContent = JSON.stringify(specRules);
21    document.body.append(specScript);
22}
23</script>                            

Adjust the prerender rules to fit your specific needs. Adding all level 0 categories for a Magento 2 store is a smart approach. If you're not using category slug URLs for your products, you should consider different rules. Theoretically, you could use '*' as a wildcard and add a few exclusions for checkout and cart pages.

The "eagerness" value determines how the prerendering operates. If set to "immediate," the first 10 URLs will be prerendered. This may be suitable for small sites with just a few URLs. Setting the eagerness to "moderate" allows for dynamic functionality, where the browser preloads URLs that have been hovered over by the user for at least 200ms. This approach is especially effective for online shops.

Since each user with the preload pages feature generates multiple requests per page, overall hits against the webserver increase. This is generally manageable with solutions like Varnish. Although sites are loaded even if a user might not visit them, they will be cached in the FPC for faster load times for the next user. Be cautious with this feature on high-traffic sites. Know your setup and keep an eye on your monitoring during the initial days.

Although prerendering offers significant performance optimization, we currently see a few drawbacks.

As mentioned, the feature is not yet available in all modern browsers—~73% support sounds promising, but it's still too low for a significant impact. Another issue is that common ad-blocking browser extensions, like uBlock Origin, forcibly disable the Preload Pages Feature.

Not to pass judgment, but using this feature generally increases the number of requests, which aren't necessary initially and consume resources. As with any resources, waste isn't ideal, so code responsibly.

If you want to deepen your understanding of speculative features, particularly the speculative loading API, I have hand-picked a few resources for you to explore.

• Using Speculation Rules for Instant Page Loads
• How to Use Speculation Rules API to Load Web Pages Instantly
• Prerender pages in Chrome for instant page navigationsPrerender pages in Chrome for instant page navigations
• Prefetching, prerendering, and service worker precaching