Check out a free preview of the full Mastering Chrome Developer Tools v2 course:
The "The Waterfall" Lesson is part of the full, Mastering Chrome Developer Tools v2 course featured in this preview video. Here's what you'd learn in this lesson:

Jon demonstrates the Network panel, which displays a lot of information about how the page loaded including a filterable waterfall diagram that shows when and how long each asset took to load. Detailed information about each asset including size, type, and an initiator is listed at the bottom.

Get Unlimited Access Now

Transcript from the "The Waterfall" Lesson

>> Speaker 1: So the next section we're gonna do is networking. So if we kinda go back over to our app, we can do it really on any page. I'll do it on this main page here. We open up the devtools, go to the Network tab here, and I'm just gonna kinda make this bigger and just do a refresh with the Network tab open.

[00:00:18] And you'll start seeing a lot of stuff starting to come through. So there's a couple of things to look at. Kind of the meat of it is gonna be this section here of the two sections, and these are the waterfall, right? So you can kind of see, you'll start seeing really familiar shapes, right?

[00:00:34] So basically what this is is as your website loads every single issued peer request that comes will be shown here, who called for it, how long it took, how big it was, all these things. So the x-axis over this middle bar here is time, right? So it's at 10, 20, 30 milliseconds, things like that.

[00:00:51] And then each one of those little bars is a single item. So if I were to hover over one of them like this I can see that the first thing requested is this document. So, when I was talking about patterns you'll start to see that are familiar, all websites work basically the same way, right?

[00:01:06] So I hit your website, the first thing I get back is an HTML file, right? A document. It's always gonna be the first thing that comes back. So I get that document and then I parse it. And I'll look inside that document or the browser will look inside that document and start finding any calls to other resources.

[00:01:19] So these could be images, they could be a link tags with CSS in it, they could be script tags with JavaScript in it. So let's start going through this process. So you'll always see this pattern, right? Which is like your document, and then as soon as your document comes down it kicks off a bunch of other jobs, right?

[00:01:33] So document comes down, gets parsed and then starts asking for all these other things, like all the JavaScript files, all the css images, etc. So yeah, so you can see kind of another view is down here. So this other view is this top down waterfall view. So you can see the first thing that came down was the document, and the second thing that came down was the CSS file.

[00:01:55] And what these will kind of relate to, like if we were to go back into the Elements tab and we were to look in the head you'll start seeing these in the order they appear, right? So it's parsing the document, the first thing it hits is this normalize.css, sends a request for it.

[00:02:08] Then style.css, sends a request for it. When we go into network we can see that they came in that exact order, right? So it's like as it sees these requests, or as it sees these scripts it sends out a request for them. There are exceptions which we're gonna get into in a little bit, which is that the browser really tries to be helpful for you.

[00:02:28] And so it often times, when it's doing its initial run of the document, it'll do a little bit of magic trying to prioritize what scripts to fetch first. So for like example it deprioritizes images underneath let's say css, right? Cuz its like the CSS is needed to render the page, it's gonna look really weird if the page renders and then its CSS changes everything.

[00:02:48] So if for example you were to do an antipattern, like put an image and then a CSS tag under it, the browser's gonna be smart enough to pluck that CSS call up and give it a higher priority. So it'll do some of those things for you, but for the most part what you're seeing here is the order that you declare files in.

[00:03:04] So whatever CSS file you declare first will be the first thing to show up. We can see a bunch of information. We can see its status, so these are HTTP response codes. You can see the type over here. So the first one's a document, we've got style sheets and scripts.

[00:03:17] We can see the initiator, which is really cool. As you start getting, like if you have scripts that call other scripts that call other scripts, it might be confusing. Like why am I fetching this? Like I have some JavaScript file, what's fetching? And I don't see it in my index.html.

[00:03:32] So you can look in here and you can say that's getting fetched by this other JavaScript, right? So if you have file a.js which has a fetch call on it for b.js, then b is initiator as a as opposed to being the HTML. There's also like a hello cool trick you can do so you can hold the SHIFT key while you're moving around here, and it'll show you in green when you're hovering, what file called it, right?

[00:03:54] So like where did you come from? It shows you in green, and vice versa it'll show you in red what files it called. So shift is kind of like this neat visual representation of how these things do. You can see the size. Size is a little bit tricky.

[00:04:08] Let me make this a little bit, so you'll see two things here. For a lot of them you'll see the actual size of the file, and then you'll see it's compressed or cache size. So when we get into things like image compression or script compression or whatever, like using gzip on your server, you'll start seeing drastically different sizes there.

[00:04:27] But we get into caching, we'll actually see instead of a bottom size, it'll just say from this cache. It's like I didn't even have to touch that thing. So it's not really the black size that you want to pay attention to, as much as it's the gray size.

[00:04:40] Again with caveats though, the first time a user hits your page they're gonna have to freshly download everything, even if you have quick caching. So things to keep in mind. You can see the time that it took to come down. And then kind of all that information is summarized in this nice visual here.

[00:04:56] So, these are all these color coded. Again, the x axis is time. So the longer it is, the longer it took to download. And the colors all represent different things, what it spent its time doing. So this tool can become really powerful. It's especially helpful, not in a blame game way, but for figuring out why your requests are slow.

[00:05:17] Is it too big? Am I asking for too many? Is it a server problem? Is it they're coming from two different sources? All these things can be gleaned just from the Network tab, which is a lot more information than it's slow.