Performance API

[00:00:00]
>> Powering any performance improvement effort should be some data, we should have some idea of what's wrong, and how are we going to fix it? And when do we know if we're done? So we need some metrics. Well, some of the most important metrics for a performance effort actually have nothing to do with performance, their business metrics or their website metrics.

[00:00:25]
Here's some analytics from request metrics that show our bounce rate, which is how many times does a user hit our site and then immediately leave? And then how long do they spend on our site? When they do what's, how long is their session and here's the chart over time.

[00:00:43]
There's a couple of things that are maybe a little weird about this. There's some anomalies, there's a big decrease or a little decrease in session time right here. There's a whole bunch of wonky stuff going on right here and a little bit of wonky stuff going on right there.

[00:01:03]
And the interesting to know, why did this happen? Is there a technical reason behind these changes? Or is it just the randomness of the internet? Well, in order to really understand this, we need to gather data from our website, real data, not crux data that is rolled up.

[00:01:23]
Not how our lighthouse was running on that day real data, like what did the users that were driving these actual numbers? What performance attributes did they see? And so to do that, we're gonna need to capture real field data. And that's the next thing we're gonna do. In order to do that, we're gonna need to explore a couple of API's available to us in the browser.

[00:01:48]
And the first is window.performance. This is a fantastic and huge space If you haven't already checked it out, the MDN article on it is obviously the definitive guide. I'm gonna give you the crib notes here as part of this training about what we need to do to accomplish our goals.

[00:02:08]
But to understand all of the ins and outs of it, I encourage you to go check out those docs. The first important part of the performance API is called the entries. Now, an entry is describing one network event, one transaction, one request that has happened as part of this page.

[00:02:32]
And it captures a whole bunch of interesting things about it. Now we can get those entries through any of these API's, we can just get them all, we can get all of a certain kind, we get all named this thing. And by kind I mean, you could get the navigation entry, you could say how did this page the document itself perform?

[00:02:55]
Or how long did it take to download this JavaScript file or this image or this Ajax request? Let's take a look at what we would get back from that. Any of these things is gonna return a list of entries. And that list of entry is going to have all of these many property on which is a little overwhelming to look at and be like, I don't even know where to start.

[00:03:25]
Lots going on here. But this is a navigation entry you can see from entry type navigation. What would this mean practically to a human being. Well, we can translate that to a request. Here is a diagram of a HTTP document request and all the different phases that a browser would need to go through at the beginning, if we're leaving a previous page, we might need to unload that page and do some of that work.

[00:04:01]
When that's done, we have an event called navigationStart at the beginning. And we might do some redirects, we might process some asynchronous unloading, but navigationStart is one of these properties that we have. Then we have fetchStart Which is when we actually first start making the final requests that will become this page.

[00:04:29]
We're going to reach into our caches. See if the browser might already have it. And if not, we're gonna proceed and do a DNS lookup. We'll connect over TCP, will establish an SSL connection will actually fire the request that we want, get a response back from the server, process it, render it and then trigger a load event.

[00:04:55]
And these are all the different steps in there. Now let's take a look at what this actually looks like. Let's look at some code. So here I have my example request metric site. And I have my Chrome Dev Tools open in another window. So let's explore this performance API and see what it looks like.

[00:05:19]
So hanging off of the global namespace is performance. There's a bunch of stuff on here. So I can just get all the entries through get entries. That returns a great big array of these performance timing events. Some of them are performance navigation timings, some of our performance resource timings.

[00:05:41]
There's some other kinds of things in here. But if I pop open one of these, I get all of those raw numbers. This is the actual raw data of when did each of these different phases of the network start and stop. And with this, I can get really low level data about how long each request took.

[00:06:04]
Now, you might be thinking that this sounds familiar, like isn't there a better way like justice than the raw numbers? And absolutely, there is, this is how we get this information programmatically. But you see a lot of the same information in the Network tab. If you load up a page, and on the Network tab, you see all the different requests who would go out, these numbers correspond to the same different things that you would see in the timing section here.

[00:06:34]
How long did it take to queue something up? How long did it take to process each different phase for all the different documents, all the different assets that need to go in. If I wanna pull this information programmatically and aggregate it across all of my user base, the performance API is how we do that.