Optimize Assets Delivery using preload and prefetch
By default, browsers load the assets in a render-blocking way. Modern browsers introduced prefetch and preload which let us specify the priority for a resource without blocking the first render..
This lesson shows you how to use preload and prefetch on an external css.
Instructor: [00:01] In order to use preload in the CSS, first we need to change the Rail attribute to preload. Then by using the as attribute, we can define which kind of resource are we loading. For JavaScript files, we'll use the script. For fonts, font. For CSS, a style.
[00:24] If we save this and reload the page, we'll see that the CSS is loaded at the beginning with the highest priority, but it's not really applied. You can see in the header, the font is not the right one, and here, in the icon.
[00:45] The thing is that this is working as it's supposed to be, because preload and prefetch, they only fetch the resource and keep in memory, but they don't apply it to the DOM. It's up to the developer to apply it when it's needed.
[01:00] Since in this case, we just want to apply it when it's loaded, then we can simply write an onLoad event. In there, we can change the Rail attribute to a style sheet again. In that way, the browser will apply it, but the resource will be already loaded because of the preload.
[01:23] Let's save this, and reload again. As you can see, now, the font and the CSS is applied, and the icon is usable as well.
[01:37] The CSS is here with the highest priority. In order to use prefetch, it's exactly the same, but using prefetch in the Rail attribute.
[01:48] The difference, basically, is that we will use preload for the very important files that we will use at the beginning, and prefetch for the rest that the application use later. That means that if we save it and reload again, we'll see that the CSS first is fetched with the lowest priority.
[02:12] In this case, because there is nothing with the highest priority in this point, it continues downloading it with the highest priority. Basically, it's up to the browser what to download, but using prefetch, we're telling it that this resource is of a lower priority.
[02:28] Finally, we make an audit. If we scroll down to the performance section to the opportunities, we don't see anymore [inaudible] hint for render blocking styles. But if we check the post audit, we pass the reduce render blocking scripts and style sheets, so this is working.