First Contentful Paint (FCP)

[00:00:00]
>> Todd Gardner: The other metric that I think is really important to talk about is FCP, the First Contentful Paint. So this is just like largest, but first, what's the first one? What's the first time we've shown the user something? The first time the browser window switches from white to something.

[00:00:19]
Something has happened, we have given the user an indication that the request, the thing that they did, the link that they clicked on, is going to load, that they're not gonna end up with the Chrome dinosaur game, that something is going to happen, that is what we're measuring here.

[00:00:35]
So if we throw all of these things kind of together onto the same film stream. So the user first clicks on something and there's this big white page, the page is loading, network requests are happening, maybe redirects are happening, all kinds of stuff. The first thing that happens is TTFB, the first thing that will happen in all of these events will always be TTFB, it's the first thing we got the first byte of data back from the host.

[00:01:04]
Then stuff will happen, generally, we're gonna hit DOMContentLoaded. Not all the time, but generally, we're gonna hit DOM content loaded next, because we're gonna need the document in place before we can start rendering. Then the first thing that first render that happens will be FCP, it's the first render that's, by definition, the first time the background changes, text element appears, something.

[00:01:29]
Then sometime after that, LCP appears, and then, in my case, load happens after this. But if you remember from our talk about legacy metrics, load can be anywhere. Load could have happened right up back there at DOMContentLoaded, load could have happened before FCP. If you have an entirely client-side rendered architecture where the load event and the DOMContentLoaded event aren't necessarily tied to the vitals in any way, I'm including them here for completeness.

[00:01:59]
As an example of where we would expect them to show up for the architecture of dev stickers online.
>> Todd Gardner: FCP, so just like all, again, this is not a core web vital, this is not SEO impacting. But Google does recommend that this is 1.8 seconds or less. So we had 800 milliseconds to get to time to first byte.

[00:02:28]
That means we have one second, one second from time to first byte to the First Contentful Paint, one second to parse the HTML, figure out what the heck we're gonna do with it and render something is what Google's telling us to do. And these are directly related. These three metrics are tied together.

[00:02:50]
So here it is in a flame chart. The time of LCP will always be larger than the time of FCP, and the time of FCP will always be larger than the time to first byte. Now, if you have [LAUGH] a very simple document, these could all be the same, they could all fire at almost exactly the same time if you have a super trivial document.

[00:03:13]
Generally, time to first byte to FCP will have some gap. FCP and LCP happening at the same time, also a very common occurrence, especially in small websites, what yours are will depend on how your site is structured, how you have things put together, and the time for resources to come together.