This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "The Performance API" Lesson
[00:00:03]
>> Jon Kuperman: So the next section is performance monitoring. Kind of idea here we've talked about a little bit about this difference between you testing your app. So you've got like a local build on a fast laptop, good Wi-Fi, versus your user, who could be anywhere on any type of hardware.
[00:00:19] And so there's kind of these two schools of monitoring right. So if you ever set up, if you do a Lighthouse audit of your own site, that is monitoring, right? You're getting all this feedback. How long did the page take to load? How big are the, you know all this stuff, but it's in your use case, right?
[00:00:33] It's specific to you, and there are tools within the dev tools where you can simulate the network slow down, or simulate being offline. So you can kind of get there. But there's this other concept of user monitoring where you actually send code into production. And your users download it, and it can measure things and time things.
[00:00:50] And as it goes, it'll start feeding that information back to you. So a lot of big companies do this. Where they'll basically just send code to the user. And then as the user's browsing the site, kind of under the scenes, it starts doing stuff, like how long did it take when you clicked Reply for the reply box to show up?
[00:01:07] They'll measure that kinda stuff. And then you can get this aggregate of real information, right? So the way that we used to do that was, sorry, I'm a little out of order here. We have this cool thing called the Performance API. Before we had this performance API, the way that we used to do it was with date time.
[00:01:23] I don't know if anybody ever did stuff like that. So you would be like start equals a new day. And then you do some code, like a for loop or whatever. Open the reply box, and you'd be like n equals another new day. And then you'd be like the time it took is just the n minus the start, right?
[00:01:37] Cuz you'd get two dates like down to the second, and then you see how long they took. And then you'd send that off, it took 13 seconds or whatever. But we actually have some really cool tools with this Performance API. So the Performance API lives here under the MDN Mozilla developer network under performance.
[00:01:53] And the API that we're interested in is mark and measure. And so it's a very similar idea, right? It's just a little bit more precise. So instead of doing these date times, you can do marks anywhere, as many as you want. So I named mine start and end.
[00:02:07] And then you can do measure. And what a measure is, is that kind of subtraction thing. So you make a new measure element. It gives it a name, and then it gives it what you're measuring, as many as you want. So is this kinda making sense? So we make a new mark, do something, make another new mark, and then we measure those marks, is basically what we do.
[00:02:25] And there's some funny libraries out here that wrap it with different cool names. I think there's one that's like Marky-Mark or something like that. But there's really, really cool stuff you can do. So yeah, so the concept here is that you would, anything that you wanna time, and you really wanna know how long it takes your users to do it, you could just write code like this.
[00:02:41] This is totally safe to ship to production. The only thing that that you would need to add is something at the end that does like a post request or something, right? So you'd like have some service that you build, and you would just send that data. You would send like a user ID, and what action they took and how long they took it.
[00:02:55] And I think if you go to a lot of popular apps, and you open the network tab, and you filter by xhr, you'll start seeing these requests happening a lot. You can kinda dive into them, and you can see, they're measuring how long it took from when I clicked to when it opened.
[00:03:08] Or how long it took from when I hit Send to when it posted, all these different things that you measure. It can give you a lot more in depth information about how your users are doing things. So the Performance API is here, another really cool thing about it, which we'll see in the exercises, when you use the Performance API over the date.
[00:03:26] And you go to the Profiler screen, which is where we've been doing all the performance stuff. You'll actually see a new section just for your performance marks. So it actually gives you all that information, a really nice UI, which is another big advantage over it.