Loading
Current section: Scripting 7 exercises
Problem

Optimizing Resource Loading with JavaScript Prefetching

Transcript

00:00 One of the cool things that we can do now that we have JavaScript on the page that we couldn't do before is we can kind of anticipate what the user is going to do and let the browser know of certain resources that we need to load ahead of time. So if I come down here and I click on Notes, by this point,

00:19 I think we can pretty much assume that they're going to go to the Notes page. But when we click on Notes, that's going to load a couple of JavaScript files and some data. It could potentially load some CSS and even maybe images and different things like that to get onto this page. And the browser, or Remix, is going

00:37 to wait to navigate the browser over to this page until those things are ready to go so that it can just render the final state. So wouldn't it be cool if, because we have a little bit of knowledge about where the user's going and as they're hovering over things or tapping on things,

00:55 we can start preloading some of that stuff. Let the browser know, hey, you're going to need this resource soon so that it can all be in the disk cache. And so you're going to add a little bit of those smarts because we've got JavaScript on the page now. Another one also is when we click on one of these notes. We have some JavaScript to load, but we also have some data to load.

01:14 Even once we have that JavaScript on the page, each one of these has some data to load. So we can kind of prefetch some of this stuff. And what we're going to be doing all uses regular link tags that we learned at the very beginning of this workshop. So I want you to take some time and work on that. And so we can prefetch a couple of these links.

01:33 And make sure to have the Network tab open so that you can observe what's going on. You don't want to have the cache disabled because this leverages the cache directly. But occasionally, you might want to right-click on this with the DevTools open. You'll get this option and do a hard reload or an empty cache and hard reload so you can see what

01:52 things look like as the user's navigating around the page. Particularly, you want to start on this page and do a hard reload over here. And then hover over this link, and it should prefetch things for you when you're done, when you've got it successfully finished. So give that a shot, and I'll see you when you're done.