Waterfall Charts

[00:00:00]
>> Todd Gardner: Hopefully at this point you feel like, crap, is my site fast enough? Web performance seems important. Hopefully, you're a little worried, and that's okay. Cuz now we're gonna talk about measuring web performance. Now, what do we talk about? What's in measuring? Well, first we're gonna talk about the legacy metrics, so metrics that as far back as the Internet has existed, that we use to decide whether or not a page is fast.

[00:00:28]
We're gonna talk about what they are, and why they may not be as relevant anymore. Then we're gonna talk about the core web vitals, which I mentioned already, the core web vitals being Google's metrics to decide whether or not your SEO is good enough for performance. We'll talk about a few other metrics that exist out there and why they're relevant.

[00:00:48]
We'll talk about capturing them, how you collect them. And then some discussion of browser support of these different metrics. Along the way, we're also gonna talk about waterfall charts and flame charts, which we'll need in order to kind of explain these metrics and what they mean. So let's get into it.

[00:01:05]
Let's talk about, measuring web performance. What does that mean? How do we measure fast? Well, in order to measure fast, we need to know how to look at that data. And often, fast is measured in a thing called a waterfall chart. Have any of you here heard of a waterfall chart?

[00:01:27]
You feel comfortable with waterfall charts? Yeah, all right. In my career, I saw waterfall charts forever, but it really wasn't until the last four or five years that I really got into the details of understanding them and what they tell you. Because you can get 60% of the information kinda just glancing at them, but I didn't really understand them until I really dived into performance.

[00:01:53]
And so that's what we're gonna do a little bit now. So here is a super simple waterfall chart with one thing in it. So, waterfall chart measures time. And usually, we're measuring very small amounts of time. We're measuring in milliseconds or microseconds, depending on what kind of thing we're doing.

[00:02:11]
Now, there'll be multiple streams in this waterfall. This particular waterfall chart only has one thing. And it looks like we're loading a document. We're loading some web page, some HTML document. And we see a line at the start, is when we know we need to do something, we know we need to make a request, a request is going to be made.

[00:02:32]
And then there's some amount of time where might know that we need to make a request, but we can't do it yet. Because we're busy, because the computer is doing something else or the queue is too long, or various other things have gotten in the way. And so the time between start and when the document starts is the queue and connecting time.

[00:02:55]
Then we're going to actually make a request. We're gonna send a request to a host that says, hey, give me this thing, and we're gonna spend some time waiting. We're gonna wait for how long that host, how long that server on the other end of the internet takes to figure out what the hell it wants to do and starts sending us some data.

[00:03:13]
Then when we get into the darker color, that's when we've started getting content. There's a stream of data coming to us and we have to figure out what to do with it. So we're streaming in that data, we're collecting it, we're parsing it, we're trying to figure out if it makes sense.

[00:03:27]
And then we might need to do something with that data, but we might not be able to do it right away. The browser might be busy doing other things. We're waiting on the main thread before we're actually done. Now, this is just the anatomy of a single row of a waterfall chart.

[00:03:46]
Now, the colors mean things, generally, in the web world. And it breaks down like this, so blue is an HTML document, we're asking for the HTML itself. The purple is stylesheets. Yellow is JavaScript. Green is images. We also request fonts, which are in this teal color. And then there's lots of other things that you also end up requesting on the web, fetches, iframes, other media files, all kinds of crazy stuff.

[00:04:13]
That's just generally in gray because, what other color do you do? So let's look at a real example of this. How does this actually put together? Here's a super, super simple website, waterfall chart. So we're gonna start, and the user navigates to a webpage. And the browser might be busy, there might be redirects or other things happening, and so we can't start right away.

[00:04:37]
There is a small time right there where we are unable to get started. And then the browser downloads the HTML document. Now, as part of downloading that document, we figure out all the things in it. Are there stylesheets? Are there images? Are there references to JavaScript? And we discover those pretty much all right away.

[00:04:57]
We see, hey, there's all of these different things. There's two stylesheets, a JavaScript file, and two images. But the browser can only download so many things at once, it doesn't have infinite capacity. In this case, the browser had the capacity of two, which isn't what the browser's capacity actually is, it just works functionally for this example.

[00:05:15]
Now we download these two style sheets, and when they're done, we download this bit of JavaScript, and we start a couple of images. Maybe we run out of capacity again, we only have the capacity of two, so the second image is delayed. And we're not all the way done until we hit the very end of this thread.

[00:05:33]
So here we're able to trace a set of dependencies, or a sequence of things that have happened, so that we can try and optimize it. Now, we're gonna use these charts to explain a lot of the different sequences for web performance metrics.