Learn how to indicate to the browser which resources should be loaded early to improve page rendering performance.
- A close relative of prefetching data, which we saw in the previous example, is preloading data. Now, they may sound like similar operations, and they are, but there is an important difference. The prefetch directive we saw earlier gives a hint to the browser to fetch a resource that will likely be needed for the next navigation event. So for example, if we know that a user is very likely to visit a specific page after the one that they are currently on, because it's the next page of search results or the next page of a form, then we can ask the browser to get it in advance. Preload, on the other hand, has a similar syntax in that it also uses the link tag. However, you also need to specify what kind of resource it is. CSS, Script, Image, and so on, and this resource is very likely to be needed in the current page. So, let's take a look at a very simplified example. So, here are my code. I'm going to open up my preload start file. And, let's take a look at this in the browser first, so I'll bring this up in the live server. You can see, when I load the page, that there's an image here and back in the code you can see that it's actually a div element, which is this div element right here, and the div element has a style applied and the style definition has a background image. So, let's go back to the page and look at the network panel. So I'll bring up the Tools, and here's the network panel, and let me refresh the page. Okay. So, you can see that the page, when the page loads there's some processing that happens, and then the image loads after the CSS is parsed. Now, again, this is a fairly simple page, but you can imagine that if this were a complicated CSS style that wasn't loaded right away, there could be a significant delay in the image loading. And remember, this issue isn't limited to images, this can happen to script code, or style sheets, or other media resources that load after some point when the initial page gets brought up. So, to help with this, we can use the preload attribute, which essentially allows us to declare high-priority resources that the browser should load first. So I'm going to add my preload directive to the top of the page. So back in the code, and I'm going to write my link tag and, in this case the rel attribute is going to be preload, and then the href is going to be a link to my image. So that's going to be...oops...images... And that's going to be my tulips image. And then I have to say as=image, so I've got to tell the browser I'm loading this resource as an image. All right, so I'll save, and now let's go back and refresh the page again. So, when I refresh, you can see now that the image has loaded much, much sooner in the process. So here, the style sheet got loaded and parsed, and the image got loaded almost immediately. So, when the CSS is being parsed, and the image is discovered, my link tag has told the browser to already go out and get it because I know it's going to be used in the page. So, that dramatically speeds up the loading process for that particular resource. Now, does that mean that you should just preload all the things, and then you don't have to worry about loading performance? No, of course not. You're web app will be different than everyone else's, and that's why it's important to use the browser tools, like this network panel, to figure out what makes sense for your app. Preload can be a great way to increase the performance of your app, but you need to use it properly. It turns out that there is a W3C spec for this. So, if you want to learn more about this capability, you can check out the spec at this link.
- Integrating with native notifications
- Caching data with the Cache API
- Faster page loading with prefetch and preload
- Improving animation with requestAnimationFrame
- Making storage persistent on devices
- Detecting network conditions and quality
- Displaying page content in full-screen mode