Baseline for Largest Contentful Paint

[00:00:00]
>> Todd Gardner: Let's talk about improving LCP, the largest contentful paint. This is our first of the core web vital metrics, the ones that actually matter for SEO. If you recall, LCP is how fast your site visibly loads the most important elements, aka the largest element. That's what we're trying to measure.

[00:00:17]
How fast does the largest thing actually show? Why have we spent all the time talking about these other things before we got here? Because they are components. Because by improving TTFB and FCP, we made LCP better automatically. We shrunk the time that we were waiting for those things along the way.

[00:00:37]
But if we look at LCP and how LCP breaks down there's three kind of parts of LCP. There's the resource delay, the resource duration and the render delay. So the resource that we're talking about here is LCP is usually a resource. It's usually an image or a video.

[00:00:58]
It tends to be those things. It's not always those things, but nine times out of ten, it's an image. And so how long is the delay before we can start downloading our image? That's the resource delay. That's a lot of what we fixed with TTFB and FCP. Is we're trying to make the delay to get to that LCP element as small as we could.

[00:01:21]
And then the resource duration, what we're gonna focus the most on right now, is how can we make getting that LCP element as fast as we can. And then what's usually 99.9% of the time not a problem, is the render delay, which is you have the element, you're ready to show it but there's too much JavaScript in the way and I can't get a render event together to actually show this thing.

[00:01:47]
Largely, that's not an issue for almost anybody except people who use obnoxiously huge amounts of JavaScript. Let's take a quick baseline of where we're at with LCP right now. In fact, we don't even need to rerun a profile. We should have it if we back this up a little bit.

[00:02:07]
So if we zoom out, we see, here's FCP. Here's DOM content loaded. And if we back way, way out, because LCP is still a problem. LCP is hanging out here at 14.26 seconds. It's happening way out here. And honestly, if you're just looking at this, you can kind of just tell, because of how simple this site is, what LCP is.

[00:02:36]
Does anybody have a guess of what the LCP resource is?
>> Student: Hero mobile.
>> Todd Gardner: It's hero mobile because LCP is happening right at the time that hero mobile was done. We can even check that if we go in here into console and pop open LCP, you'll notice that there's two LCP events here.

[00:03:00]
You may have noticed that. And that's because there was a thing that was the largest at some reasonable amount of time. And it said, the largest thing so far has been 0.625 seconds. But then 14 seconds later, a larger thing rendered which updated LCP.
>> Todd Gardner: So LCP, the element in question, hero mobile, which is a file at 1.7 megabytes.

[00:03:28]
That's 1200 by 1200 pixels, and that's the thing that is stopping us from loading. So before you start using any of these tactics, remember make sure you need to worry about this, check what your LCP value is based on your real data or your Crux, if you're already less than 2.5 seconds, you're probably good.

[00:03:44]
You probably don't need to worry about it. In our case, we're at what, 14 seconds, 15 seconds, 14.25 seconds. In my case we definitely need it. So what are the tactics in order to improve LCP? Well, one, we're gonna do even more lazy loading. Lazy loading is the best.

[00:04:02]
We're gonna do a bunch of stuff. Second, we're gonna play with eager loading, which is the opposite of lazy loading. And then third, we're gonna talk about optimizing images, because nine times out of ten the big image is the LCP thing. So figuring out how to make images super efficient improves a lot of web performance problems.