The Network Panel

We're gonna look at one of my favorite panels which is the Network panel. 0:00 Now in the Network panel, you can do a number 0:04 of different things but primarily it helps you optimize your website. 0:07 So you can see when things are being loaded in, how large 0:11 they are in what order they are being loaded in, and so on. 0:15 So let's take a look. 0:19 So here we have the Network panel open. And I'm going to go ahead and clear it out 0:21 by hitting this little x here, and then I'm going to refresh the page, 0:26 and when I refresh, it goes ahead and loads everything in. 0:32 Now I'm gonna clear this again and actually do what's called 0:38 a hard refresh, and to do that I just hit Cmd+Shift+R 0:41 on a Mac and I believe it's Ctrl or, yes, 0:48 Ctrl+Shift+R on Windows. Now, doing a hard refresh like 0:52 that will pull all of the assets fresh and won't use any cached assets. 0:57 So here you can see a couple of different things. 1:05 We have all of these columns over here and then 1:09 we have kinda this Gantt chart looking timeline over here. 1:12 Here we have all the names of our files, and their path. 1:17 So you can see that all the paths are relative to our current document. 1:23 And it 1:29 looks like we have some explicit paths down 1:30 there as well, or absolute paths, I should say. 1:33 Here we have the method column and that's just the HTTP method that we 1:38 used to grab the assets so in this case we're using we're using GET. 1:42 You may see post in there occasionally. 1:47 For example, if you're doing some AJAX and you're posting data to the server. 1:49 You can see the HTTP status of each asset. In here, they all said 200 OK. 1:54 That means that the asset was loaded successfully. 2:00 If we go ahead and refresh the page without doing a hard 2:02 refresh, you can see that these all change to 304 Not Modified. 2:05 And that means that it's just pulling up a cached asset that it's already loaded, so 2:11 it's not pulling it again, which is an 2:15 efficient way for the browser to load up data. 2:17 We're going to go ahead and do a hard refresh 2:19 though so that all of our assets are loaded up fresh. 2:22 And you can see that all of these say 2:26 200 OK. 2:28 Next up we have the type which is just the file type. 2:31 Then we have the initiator and the initiator 2:34 is basically how the asset was loaded up. 2:40 So smellslikebacon.com right here is the HTML. 2:44 And that was just loaded by default when we pulled the page. 2:48 However, all of these other assets were loaded in by the parser. 2:52 So, when it was actually parsing the HTML document, it noticed that 2:56 the assets were being included and it loaded them in that way. 3:01 We can also see the size of each asset here. 3:06 So that's useful. 3:11 If you wanna sort by size, for example, you 3:12 can see that our largest asset here is this 3:14 texture.png image. 3:18 And that's a good way to look for site optimizations. 3:21 We'll talk a little bit more about that soon. 3:24 I'm gonna go ahead and refresh here, just to get the default sorting. 3:26 Actually, I think I might need to close the dev tools there. 3:33 There we go. 3:36 Now, if I do a hard refresh, I have my default sort back. 3:37 It's what I want. 3:41 Then finally, over here, we have the time and the latency. 3:43 So, that's basically just how long it took to load each one of these assets. 3:46 Finally, we have a Gantt chart over here, which is called the Timeline. 3:52 Now this shows how long, and in what order, everything was loaded in. 3:57 You'll notice that each asset has a transparent 4:04 bar here. And that is the request time. 4:09 So that's basically when the request was made, and how 4:13 long it took the server to respond to that request. 4:17 Then, we have a solid part of the bar, and that's how long it took us to actually 4:22 download or receive that data. So, both pieces there are important, and 4:27 they form the whole of how long that asset actually took to load. 4:34 From the time that we requested it, to the 4:38 time that it was actually downloaded in the browser. 4:40 Now, you'll notice that we also have several different colors here. 4:45 The colors represent the type of file. 4:49 So here in blue, we have HTML. In green, we have CSS. 4:52 Purple is images and 4:57 you'll notice those actually take much longer to load. 4:59 And then we have fonts down here in orange. 5:02 And of course, if you're loading in JavaScript or 5:05 other types of assets, you'll have other colors, as well. 5:07 Next, you'll notice that there are two lines here. 5:12 We have a blue line and then we have a red line. 5:15 The blue line is when all of the DOMContent was loaded. 5:19 So, this is when the 5:23 loaded event was fired. 5:25 And, actually this is when our HTML was loaded, and you'll notice that 5:26 as soon as the HTML is done, that's where our blue line appears. 5:31 Now even though our HTML is downloading, we still might be loading other assets. 5:37 And that's what that red line represents. 5:42 The red line is when the load event has been fired off, and we've 5:44 gone ahead and loaded everything on the page. 5:50 So, that's basically how long it took 5:55 our page to load. And if we scroll down to the bottom here, 5:59 we can see that we made 15 requests. We transferred 6:03 369 kilobytes. So that's basically the weight of our 6:07 entire page in terms of file size. And it took us 248 milliseconds to load 6:12 that in, which is not too bad. 6:20 This is a fairly small page and it loaded pretty quickly. 6:23 Some larger web pages you might notice taking several seconds to load, which 6:28 is probably not good, and you should try to optimize at that point. 6:33 Now, how do you actually optimize and use the network panel to do that? 6:38 Well, there's a couple of different way that 6:43 we can dig in here. 6:46 First, we wanna go ahead and fix any kind of 404 errors. 6:48 So, in the status column here, you'll see that these all say 200 OK. 6:53 But if any of these are coming up with 404s or 500 errors, 6:59 those are HTTP statuses that means that the assets were not successfully loaded. 7:02 And basically, you're just wasting requests 7:09 at that point. 7:11 Not only does it take bandwidth to load up each one 7:12 of these assets, it also takes bandwidth to make each request. 7:15 So if we can remove any of those requests 7:20 that are failing, then it's gonna be a performance win. 7:24 In the same vein, we also wanna remove any unnecessary files. 7:27 So, if we're loading in any images that maybe 7:31 aren't actually being displayed on the page, for example, 7:34 we're for loading in JavaSscript that we're not actually using. 7:37 We wanna make sure that we get rid of those. 7:40 Next, we wanna make sure that we 7:43 combine images into a sprite map wherever possible. 7:45 And sprite map is basically just one large 7:49 image that has several smaller images inside of it. 7:52 And then we use CSS to go ahead and position those images. 7:57 We're not gonna get into that technique here. 8:00 But that is one way that you can reduce HTTP requests. 8:02 So you take several of these images and it would just turn into one. 8:06 You can do a similar thing with JavaScript and CSS. 8:10 You can combine your CSS into single files and 8:14 you can also combine your javascript into single files. 8:18 You can minify those files as well, and there are several 8:21 ways that you can go ahead and do that around the web. 8:24 So, in general, the best way to optimize your site using the 8:27 network panel is to go ahead and reduce the number of HTTP requests. 8:31 You want to look at any kind of assets that are failing, 8:36 and you also want to look at assets that are taking a really 8:40 long time to load and decide first, whether or not you need them, 8:43 and secondly, if there's anything that you can do to further optimize them. 8:47