Lazy Loading Images

[00:00:00]
>> Todd Gardner: So, more lazy loading. We're going to remove resources that are not on the critical path. We already did a bunch of this for FCP, but there's more resources, there's more stuff that happens between FCP and LCP. So here we look at a waterfall. Here's the waterfall that we're kinda generally left with at the end of the last exercise.

[00:00:23]
Which is, we've preloaded our fonts, we're accelerating and flattening our CSS files, but we have a bunch of images that are downloading. And some of those images aren't the LCP image, there are other things on the page that are not the largest, contentful paint. And honestly, they're less important.

[00:00:44]
In terms of web performance and optimizing this, we don't need those images down before the LCP. We need the LCP image as fast as we can. If we put this in LCP parts terminology, we have the resource delay, which is all of the time before we get to start our image, and we have the resource duration.

[00:01:07]
And we're gonna focus on these two halves. First, let's talk about resource delay. So, all of these other images, like, there's an image of the fast sloth sticker, or whatever is in the promo banner, that doesn't necessarily need to download first. That doesn't need to come down before our main hero.

[00:01:29]
So we could decorate that and tell the browser, hey, these images, go ahead and load them lazily. We don't need them right now. They're not above the fold. They're not the most important. You can wait on them. You can do this with images and iframes. So if you use an iframe, you can tell the browser, say, don't even bother loading this iframe yet, get the page done first, and then load the iframe.

[00:01:53]
So by lazy loading images, we could essentially shift our waterfall like this. Where all those low-priority, lazy images that we might have discovered first, we can just say, hey, don't bother starting them until you have enough resources to do it. But go ahead and do the LCP image.

[00:02:13]
So let's do that. Let's decorate lazy on all of our non LCP images. So we're gonna do this in kind of like a bulk kind of way. We're gonna search our code base for an image.
>> Todd Gardner: Everywhere in our public directory. So anytime I have an image, which occurs a whole bunch of times, In a whole bunch of places.

[00:02:41]
Sometimes it's in a JavaScript file, sometimes it's in a HTML file. I have a lot of images in our website, but I'm gonna go ahead and make them all lazy, for start. So let's replace it with image loading lazy
>> Todd Gardner: Space, yeah.
>> Todd Gardner: Yep, I wanna replace 54 occurrences across 9 files.

[00:03:10]
We're gonna live dangerously. Let's take a look at one of the things that actually changed. So let's just look at this difference. So here's the thing that changed. In this particular case, we have the header, the header of our website. So this guy right here. The header of our website has an image called the dev stickers logo.

[00:03:37]
And what we did is we just decorated it with loading lazy. We did the same thing kind of all over. So there's sometimes that images were loaded lazy in JavaScript, like we were rendering something in JavaScript, there's various times on other pages where we're loading images. We're basically telling the browser, all the images, let's load them lazily.

[00:03:57]
Except, let's not lazy-load the LCP image, which we already discovered is called hero mobile. Which is right here. Now, there's actually two hero images. We have two image tags, one hero desktop and one hero mobile. And we use CSS to flip which one we're showing based on the screen size of the page.

[00:04:22]
And so hypothetically, I would imagine that on the desktop, this is the LCP element. On the mobile, this is the LCP element. And so we probably don't want either of these things to be lazy, so let's remove both of that, and
>> Todd Gardner: Let's go ahead and push this.

[00:04:52]
>> Speaker 2: So, could you also think about this as above and below the fold, or is it not quite that?
>> Todd Gardner: You can, so, images below the fold, sometimes the browser will kind of figure out the priority of it and will do that automatically, but below the fold images can 100% be lazy loaded.

[00:05:12]
You definitely lazy load all of them. But even images above the fold that maybe are not the core thing that the users after, those could be lazy loaded as well. Just teaching the browser what the priority is here. And so, if we reload this at this point, that's fine.

[00:05:42]
>> Speaker 2: There is not a way to specify that this one image is the priority, and then?
>> Todd Gardner: No, there is, but we'll do that next. So here's what we got now. So now, when we download the page, we're downloading our critical path resources. We're also starting the download for hero desktop and hero mobile.

[00:06:02]
Cuz we didn't decorate either of them with loading lazy, we're downloading both of those things first. Now, there's a bunch of images. Some of them were discovered first, but they don't start until way out here. Because the browser says, you know what, I have network capacity at this point, I may as well go ahead and start to do them.

[00:06:21]
And so they still start downloading, they just didn't download yet. So all we really were able to do between this one and the last one, which was 49 minutes ago, one minute ago. 17 minutes ago, before we made this change,
>> Todd Gardner: I think that's the same one. I think I'm looking at the same one.

[00:06:52]
>> Todd Gardner: That doesn't matter. Before we made this change, these other images were likely downloading first, because they were discovered first. We started downloading the logo, we started downloading some stickers before because they appear earlier in the document. And what we've told the browsers that these things are not as important, go ahead and wait on them until we're ready to start.

[00:07:14]
So, like your question said, if an image is below the fold, 100% it should be lazy. If an image is above the fold, you might still wanna make it lazy, if it's not as important.