Web Vitals Extension

[00:00:00]
>> Todd Gardner: So we're gonna do a bunch of demos. All right so we're gonna turn something else on. So there's a really useful thing for performance called the web vitals extension. If we go out to the Chrome extension store, it's just called web vitals, and it's made by Google, it's made by the Google performance profiling team.

[00:00:17]
I'm gonna add this to Chrome, because it can do a bunch of interesting things for us if we are diagnosed with performance problems. Okay, cool, I'm actually going to go into here and pin this so it shows up here. So the metrics that show up here, i'm gonna go into the settings here, so I clicked on here, hit the little gear, and I'm gonna show turn on console logging, and I'm gonna close that out.

[00:00:48]
But what this is gonna do is it's gonna show us the Core Web Vital Scores for the page that we're on. So for example, I'm on here, and I reload the page. I'm gonna pop this to the side, and I'm gonna pop open the console here. I'm gonna reload the page, as the page is loading, when scores come in, they pop into this little extension.

[00:01:14]
It shows things live as they're happening, and then when the the page is done, which takes a moment, it dumps a bunch of details about them into the console for us to explore. Now we can pop this open and we can see what these scores are, and that's kinda cool.

[00:01:35]
But the real details, especially for us performance developers, is looking at this. And you'll notice the site is not fast, we don't get any good scores here, but we can drill in on this. We can say, all right, we got a 7.29 second LCP, which Google says is poor, and we can drill and get information, we can see what is the element that is LCP?

[00:01:57]
And it confirms that, it is this giant mobile image, and we can see information about it. We can see here are the things that make up LCP, time to first paint, or time to first byte, LCP, and then how long it took. And we can even see the whole LCP entry that we would have gotten out of, say, attaching our own performance observer.

[00:02:17]
We can get the same element here, automatic, by just turning on the web Vitals Extension. It's super useful for diagnosing these sorta things. It automates a lot of the kinda stuff that you would attach your own logging for, but you can just turn it on and off with an extension, and it gives you information about your current session.

[00:02:36]
I have this on a bunch, super, super useful. The other thing that's useful about this, is that if we go out to a public site, a real site, not local host, like this MDN article I was on, and I reloaded, it works there too. See that's so much faster like loaded instantly, it gives us the same real-time information about how this site performed generally really fast.

[00:03:00]
Notice it doesn't have an INP, cause I haven't INP'd yet. But if I click on something, Now I have an INP. But it also has a bunch of data in the background, In addition to the raw scores of, this thing loaded almost instantly from me. It shows that 99% of people also have a good score,1% of people have an okay score, and 0% of people have a bad score.

[00:03:31]
So this is showing us not only lab data from me testing this right now, but it's showing us field data from everybody else who's visited, developer.mozilla.org. Where is that data coming from, and why do I get to access it?