Baseline First Contentful Paint

[00:00:00]
>> Todd Gardner: Great, so we just talked about time to first byte, some strategies to improve it, which also improved FCP and LCP. Let's talk about FCP specifically now and some more tactics we can use to focus on that. So first contentful paint, as you recall, is how fast our site visibly loads something, like anything.

[00:00:24]
Doesn't matter what it is, could be anything on the screen. Now again, there's this interrelationship. By improving time to first bite, we improved first contentful paint, and by improving first contentful paint further, we're gonna improve largest contentful paint. Let's take a quick look at our Baseline First Contentful Paint based on here we left things before.

[00:00:45]
So I have our local run at dubdubdub@devstickers.shop and our last run, I'm actually just gonna generate another one quick.
>> Todd Gardner: Yep.
>> Todd Gardner: Just to make sure there's nothing weird about that first one. We're gonna generate one, another performance profile with everything throttled at, on coffee shop Wi Fi.

[00:01:19]
And we're gonna have a look at where we are at right now. So if we zoom in on the start, we see that first Contentful Paint is happening at about 871 milliseconds, that's what we're trying to make better. So it's pretty fast, it's pretty good already, to be honest, but I think it can be faster.

[00:01:40]
What are some tactics we can use to do that? Now, for your purposes, you always need to think about whether or not you need to worry about this. So we are already faster than Google's benchmark, we are already faster than that 1.8 seconds. So before you spend a bunch of time and effort and dollars, and blood, sweat and tears trying to fix this, make sure that your RAM or your CrUX data is telling you that this is a problem for you.

[00:02:06]
And not something that you should focus your effort elsewhere. There's three really important tactics for fixing FCP, and that's we're gonna remove sequence chains, we're gonna preload some resources, and we're gonna lazy load some other resources.