Eager Loading

[00:00:00]
>> Todd Gardner: Now there's another signal that we can we can use for this, what if instead of like decorating all the things that aren't LCP. What if we just say, hey, get started on the LCP thing faster, which is the next thing we're gonna do, which is eager loading.

[00:00:13]
If we know something is important, we can tell the browser to go faster. Here's kind of what our waterfall looks like right now, where we have this LCP element that we're starting whenever we get to it. And we're deferring, or we're lazy loading a bunch of other images, but there's still a bunch of time here that maybe we could start this thing sooner.

[00:00:38]
Well,we already learned one way we could do this, we could just add a preload for it, just like we did it for fonts. We know this thing is important, we go ahead and preload the image as an image and tell the browser to start downloading it. Now that works great, we're absolutely gonna do that.

[00:00:56]
But there's another thing that you can do, sometimes this isn't ergonomic. You don't want to necessarily add a reference to this image in two different places in your HTML. And so the other thing that you can do is there is an attribute called FetchPriority, and this is a way of instructing the browser.

[00:01:12]
Is this resource either high or low priority which is essentially the opposite of lazy load, right? And this works on image, scripts and links, now this isn't 100% right? This does not work in Gecko, this does not work in Firefox, they do not support this. This is this is too new, and so it works in Chrome, it works where LCP matters for SEO, but it doesn't work everywhere.

[00:01:38]
Link preload works everywhere. So I recommend that if you have the situation where there's one image that's so clearly the thing you should do preload, and just get started with it earlier. Now we're gonna go ahead and we're gonna do both. So here on our document, let's close all the things and go back to source.

[00:02:03]
Here in our index, we have these two images for desktop and mobile. And they are not lazy loaded, which is giving them a little bit of a priority right there, but we can be explicit about that and add the fetch priority, Hi. I'm gonna go ahead and do this to both of them.

[00:02:25]
Now this is gonna give an indication to the browser, so these are high priority things get started on them fast. Don't let other things get in the way if these things are in your queue, but it's still waiting for us to discover these things in the queue. It's still waiting until the document has been parsed down this far before it even gets started.

[00:02:47]
We can short circuit that and add some preloads like we did up here, just like we did for these fonts, I'm just gonna take a little copy of that Copy-paste development for the win as image, we can just go ahead and preload this. We know we're gonna need it, we know it's gonna be referenced, let's get started on it sooner.

[00:03:18]
We're gonna do both of them because right now they're both being loaded, Alright.
>> Student: Do you need the cross-origin still?
>> Todd Gardner: We don't actually, Not for images,okay, fetch priority. And preload LCP. Okay, I'm gonna do a load there first, and I'm gonna do that, so we're gonna do re performance profile this after that change.

[00:04:15]
And now what we'll see, Is these hero desktop and hero mobile are starting as soon as they possibly can, like we can't get it going any far, any anymore to the left. We've advanced these as far as they can go, now, still downloading these other things lazily, but we know about these things.

[00:04:35]
We're fetching them as fast as we possibly can, now, what's left is the fact that it still takes us for fricking ever to download these images out till 10 seconds, and that's the next thing we're gonna talk about.