Transcription

♪♪♪ Hmm... 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 at all a 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 pre-fetch or even fully pre-render the next navigation. This gives a faster or even instant loading experience. Okay, 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 next2.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 will be switched with the current one to give an instant page load. That's really cool. Can we see that in action? Absolutely. 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 of hunting around 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 nec3.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 nec3.html, as is the Console, and the Network panel. Wow. That's really cool. I never realized 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 prefetch 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 maximize 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 emitted first, so you can start to trigger 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 URLs to pre-render are discovered in the HTML of the document. We choose to match any URL, including those with query params or anchor links. However, we exclude the slash articles pages. That's our control group. And we set the pre-render ignorance to moderate. That means on any hover or mouse down event, the pre-render will be triggered. 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 in DevTools. When we open DevTools, and remember to reload the page, we 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 DevTools showing them pre-rendering. And when we actually click on a link, you can see that instant load we were hoping for. Nice! That makes 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 prefetch options, the HTTP header sent for speculative navigation, and the URL comparison feature for when pages fail to pre-render. Thanks, Barry. You certainly got me interested in this subject, so I will definitely check that out. Bye for now! Ciao! ♪