Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Optimize Assets Delivery using preload and prefetch

    Alex Jover MoralesAlex Jover Morales

    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.

    vueVue.js
    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss