{"id":2587,"date":"2024-06-07T09:32:51","date_gmt":"2024-06-07T15:32:51","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2587"},"modified":"2024-06-08T13:07:19","modified_gmt":"2024-06-08T19:07:19","slug":"playing-with-the-speculation-rules-api-in-the-console","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/playing-with-the-speculation-rules-api-in-the-console\/","title":{"rendered":"Playing with the Speculation Rules API in the Console"},"content":{"rendered":"\n

Improving the loading speed of web pages is often about making series of small incremental improvements: better CSS minification here, higher compression setting there, reducing JavaScript dependencies and so on. Rarely we see an opportunity that has the potential of altering “the game” completely. This post is about one such opportunity of not just making pages load 10% or even 50% faster, but rather make them appear to load immediately.<\/p>\n\n\n\n

At the recent Google I\/O<\/a>, announcements around the re-invigoration of page prerendering made quite a splash among the web performance-minded developers. There is a blog post<\/a> that\u2019s a good start, providing an overview of the Speculation Rules API<\/a> and some context of how we got here. This post is about trying out the new API in the good ol\u2019 console, just checking it out commitment-free, seeing-is-believing style.<\/p>\n\n\n\n

What is the Speculation Rules API?<\/h2>\n\n\n\n

Imagine if the browser didn’t have to fetch all the resources and render the new page when you click on a link to load a new page. Because… it had already done it! That’s what the Speculation Rules API is all about. It’s bit of JSON data you put inside a <script><\/code> tag with a special attribute that contains rules on pages you want to do this rendering ahead of time on. This information can be updated in real time as needed. The point is making new page loads feel instant. It’s a great tool for web performance and thus happy users.<\/p>\n\n\n\n

It’s as if you\u2019ve loaded a new page in a hidden iframe and then swapped with the original page when necessary. Except, there are no iframes involved, it\u2019s all done by the browser and comes with a nice API to boot.<\/p>\n\n\n\n

According to its specification<\/a>, the Speculation Rules API is not yet a standard nor it is on the W3C standards track. However it\u2019s already publicly available in various Chromium browsers, totaling over 70% global reach (source: caniuse.com<\/a>)<\/em><\/p>\n\n\n\n

Potential Confusion with Prior \u201cPre\u201d Usage<\/h2>\n\n\n\n

There\u2019s a potential for confusion here because we have overused the \u201cpre\u201d prefix over the years. We have the <link><\/code>\u2019s rel attribute for example, with values preload<\/code><\/a>, prefetch<\/code><\/a>, preconnect<\/code><\/a>, which all do different things. Those will still exist.<\/p>\n\n\n\n

One last thing before we begin: I\u2019m using a WordPress blog as a playground because many of us have seen or managed a blog at some point and it\u2019s familiar. However, if you want to use the new API without a care in the world, you can simply install the existing WP plugin<\/a> created by WP\u2019s perf team. <\/p>\n\n\n\n

Adventure Time<\/h2>\n\n\n\n

Let’s play with Speculation Rules API, all in the browser console, with no server-side changes necessary.<\/p>\n\n\n\n

Step<\/strong> 1)<\/strong> Load a web page, e.g. https:\/\/phpied.com<\/a><\/p>\n\n\n\n

Step<\/strong> 2)<\/strong> Open the browser console and add a new class name to three links of your choosing. In this case the class name is prerenderosa<\/code> and the links of my choosing are the links to the latest 3 blogposts.<\/p>\n\n\n

document<\/span>.querySelectorAll('.entry a[rel=bookmark]'<\/span>)\n  .slice(0<\/span>, 3<\/span>)\n  .forEach(e<\/span> =><\/span> e.classList.add('prerenderosa'<\/span>)\n);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Step<\/strong> 3)<\/strong> Set up the speculation rules JavaScript object:<\/p>\n\n\n
const<\/span> pre = {\n  \"prerender\"<\/span>: [{\n    \"source\"<\/span>: \"document\"<\/span>, \/\/ optional, since Chrome 121<\/span>\n    \"where\"<\/span>: {\n      \"and\"<\/span>: [\n        \/\/ prerender pages where the link has the new class name<\/span>\n        { \"selector_matches\"<\/span>: \".prerenderosa\"<\/span> }, \n      ]\n    },\n    \"eagerness\"<\/span>: \"immediate\"<\/span>, \/\/ be eager!<\/span>\n  }]\n};<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Step<\/strong> 4)<\/strong> Add the speculations rules to the page, using a script<\/code> element.<\/p>\n\n\n
const<\/span> spec = document<\/span>.createElement('script'<\/span>);\nspec.type = \"speculationrules\"<\/span>;\nspec.append(JSON<\/span>.stringify(pre)); \ndocument<\/span>.body.append(spec);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
And that’s it! Pages are prerendered. Clicking on any of the 3 links shows the page loaded immediately.<\/p>\n\n\n\n
Debugging<\/h2>\n\n\n\n
How do we know things worked as expected and what happened exactly? DevTools to the rescue. Open the Application tab and find “Speculative loads” in the menu. This is where you can inspect the results.<\/p>\n\n\n\n
Prerendering Prerequisites<\/h3>\n\n\n\n
<\/p>\n\n\n\n
There are conditions to be met<\/a> before the prerendering can happen. Most importantly you need to check if any extensions have disabled prefetching. This is common with ad-blocking extensions. This means disable the setting for all sites, not just disable the extension on the current page. For example in uBlock Origin, unselect the option called \u201cDisable pre-fetching\u201d. Research by DebugBear<\/a> into extensions that harm performance points to two other additional popular extensions (where “popular” means over 1 million installs): Windscribe and Privacy Badger.<\/p>\n\n\n\n
Luckily, DevTools provides a link to the extension management area as well as the preload settings (they were off by default for me).<\/p>\n\n\n\n
\"Speculative<\/figure>\n\n\n\n
Below is the view you see when you click on \u201cPreload pages settings\u201d link. Note that the “standard” preload setting is good enough, no need for the “extended”. <\/p>\n\n\n\n
\"Preload<\/figure>\n\n\n\n
You may notice that the toggle is off and\u00a0disabled so you cannot turn it on. This is a sign that possibly an extension is preventing it. In this case you should be able to see a little puzzle icon. Mouse over that icon should reveal who’s disabling the setting.<\/p>\n\n\n\n
\"Preload<\/figure>\n\n\n\n
Note that prerendering won\u2019t work if the link is opened in a new browser window\/tab (e.g. with target=\"_blank\"<\/code>). But the benefit of the downloaded resources of the new page (scripts, styles, images) still exists. And support for window targets<\/a> is coming soon.<\/p>\n\n\n\n
Next Steps in Debugging<\/h3>\n\n\n\n
Now let’s see what happens every step of the way. First we load a page and pop open the new “Speculative loads” and the console.<\/p>\n\n\n\n
\"Normal<\/figure>\n\n\n\n
Now we paste the generic code from above: the one that adds class names to three selected links and adds the speculationrules<\/code> script element.<\/p>\n\n\n\n
Lo and behold: 3 pages are prerendered and ready.<\/p>\n\n\n\n
\"3<\/figure>\n\n\n\n
You can click to the “Speculations” submenu to see which pages were prerendered.<\/p>\n\n\n\n
\"Details<\/figure>\n\n\n\n
Also in the Network panel you can now pick which waterfall to explore: the original page or any of the preloaded ones.<\/p>\n\n\n\n
\"Subpages<\/figure>\n\n\n\n
If you click on a link to a prerendered page, the load is immediate, because it’s just a swap.<\/p>\n\n\n\n
On the next page you can also see that the “Speculative loading status” is a success. This is the prerendered page. It doesn’t have any speculation of its own but was itself loaded speculatively.<\/p>\n\n\n\n
\"Speculative<\/figure>\n\n\n\n
Everything in Moderation<\/h2>\n\n\n\n
The snippet above had \"eagerness\": \"immediate\"<\/code> speculation rule. But you have other options. Let’s try moderate<\/code>. We keep everything the same, just change one setting:<\/p>\n\n\n
const<\/span> pre = {\n  \"prerender\"<\/span>: [{\n    \"source\"<\/span>: \"document\"<\/span>,\n    \"where\"<\/span>: {\n      \"and\"<\/span>: [\n        { \"selector_matches\"<\/span>: \".prerenderosa\"<\/span> }, \n      ]\n    },\n    \"eagerness\"<\/span>: \"moderate\"<\/span>, \/\/ easy there tiger<\/span>\n  }]\n};<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Now nothing is prerendered, until you mouseover for 200ms over a link that is a prerendering candidate. And as you can see out of the three candidates for prerendering one is indeed prerendered, the other two are not.<\/p>\n\n\n\n
\"Only<\/figure>\n\n\n\n
This is much less aggressive and easy on your server.<\/p>\n\n\n\n
There\u2019s one more eagerness option: \u201cconservative\u201d. With it, the browser only prerenders on mouse\/pointer down. There\u2019s still an early start but the effect may not be the same.<\/p>\n\n\n\n
Concerns?<\/h2>\n\n\n\n
If you\u2019re like me, you probably have a lot of questions for example:<\/p>\n\n\n\n