 How can we make web browsing faster? Instant maybe? Hi! Oh Barry, where did you just appear from? I got here a while ago to set up. I was just waiting around for when you needed me. Oh, I see. So you prepare yourself ahead of time to give an instant loading experience? Yes, which is not a total contrived example to explain what we're going to talk about in this episode. Today we're going to talk about the Speculation Rules API, which is a new API from Chrome to allow you to prefetch or even fully pre-render the next navigation. This gives a faster or even instant loading experience. OK, let's go! The Speculation Rules API is triggered with a piece of JSON in the HTML of the web page. In this example, we're saying to pre-render a list of URLs, Next.html and Next.html. They will render in the background. Think of it like you've got two extra hidden tabs loading web pages for you. Then, if you click on a link going to either of these, that hidden background renderer, we switched with the current one to give an instant page load. That's really cool. Can we see that in action? Absolutely. But let's use DevTools to see more about what's going on. Oh, sure. You know I love anything to do with DevTools. On this demo site, we're pre-loading three links, much like the previous code sample. In the DevTools elements panel, we could find the JSON in the HTML source, but that takes a bit hundering round to find it. So in the application panel, we've created a set of new speculative loads paints to help debug speculation rules. Note that if you loaded the page before opening DevTools, you'll need to reload to populate this. Here, you can see the rules and also the statuses. Two pre-renders have succeeded and one has failed. Clicking on the status takes you to all the URLs, and again, we can see that one of them has failed to pre-render. This is because Next.html doesn't actually exist, so it returns a 404. Nice, much better than hunting around in the DOM and seeing the status is really handy. Exactly, but let's dig a little deeper. For pages with pre-rendering, we've added a dropdown in the top right, allowing you to easily switch DevTools between the available renderers. When you switch using that or using the inspect button in the speculation pane, all the DevTools panels will be changed to that renderer. Here, you can see the elements panels for the Next.html, as is the console, and the network panel. Wow, that's really cool. I never realised that DevTools could show anything except for the current page. Well, previously you couldn't. So it's quite a change to DevTools to get this all to work. Nice, anything else to show us? Well, there's one particular feature we've added that I think is pretty cool. The key with any kind of speculative pre-fetch or pre-rendering is to strike the balance between doing extra work to benefit the user in the future and not doing too much wasteful work that doesn't end up getting used. To maximise that, you'll need to be confident that the user will end up using a pre-rendered link. Okay, but how can you know where the user will click next? Well, one thing we've added to Chrome is the ability to pick up all the links from the document rather than a fixed list. But only pre-render when you see the user is about to click on a link. For example, if they're hovering over the link with their mouse, there's a reasonable chance they're about to click on that. When they start to click, the mouse down event is omitted first. So you can start to trigger a pre-render then. Nice. I think this would give less time for the pre-render to happen, but still give a small head start that we can use to improve the page load speed of that navigation. Exactly. Here on our site, we set up the following speculation rules. The source is set to document rather than list. This means the URLs to pre-render are discovered in the HTML of the document. We choose to match any URL, including those with query problems or anchor links. However, we exclude the slash articles pages. That's our control group. And we set the pre-render egoners to moderate. That means on any hover or mouse down event that pre-render will be triggered. Hmm. Even that simple example is already starting to get complicated. How can you know if that works? Well, this example will show the power of the new speculative load panes and dev tools. When we open dev tools, and remember to reload the page, and go to the speculative loads panes, we can see it's found 18 links and none of them have been pre-rendered yet. Clicking on that takes you to the speculations pane, which shows all the links discovered. These are all the pre-render possibilities. Then, if we sort by the status column, we can see when these statuses change. As we hover over the links, we can see dev tools showing them pre-rendering. And when we actually click on a link, you can see that instant load we were hoping for. Nice. That make debugging this so much easier. Yep. And we've really only given a quick taste of some of the features available for the new speculation rules API. Check out this blog post for lots more details that we didn't get time to cover here, including the pre-fetch options. It should be header sent for speculative navigation and the URL comparison feature from pages failed to pre-render. Thanks, Barry. You certainly got me interested in this subject, so I will definitely check that out. Bye for now. Ciao.