1 00:00:00,220 --> 00:00:04,830 We're gonna look at one of my favorite panels which is the Network panel. 2 00:00:04,830 --> 00:00:07,560 Now in the Network panel, you can do a number 3 00:00:07,560 --> 00:00:11,400 of different things but primarily it helps you optimize your website. 4 00:00:11,400 --> 00:00:15,180 So you can see when things are being loaded in, how large 5 00:00:15,180 --> 00:00:19,170 they are, in what order they are being loaded in, and so on. 6 00:00:19,170 --> 00:00:19,880 So let's take a look. 7 00:00:21,930 --> 00:00:26,950 So here we have the Network panel open. And I'm going to go ahead and clear it out 8 00:00:26,950 --> 00:00:32,730 by hitting this little x here, and then I'm going to refresh the page, 9 00:00:32,730 --> 00:00:38,340 and when I refresh, it goes ahead and loads everything in. 10 00:00:38,340 --> 00:00:41,120 Now I'm gonna clear this again and actually do what's called 11 00:00:41,120 --> 00:00:48,160 a hard refresh, and to do that I just hit Cmd+Shift+R 12 00:00:48,160 --> 00:00:52,158 on a Mac and I believe it's Ctrl or, yes, 13 00:00:52,158 --> 00:00:57,880 Ctrl+Shift+R on Windows. Now, doing a hard refresh like 14 00:00:57,880 --> 00:01:03,540 that will pull all of the assets fresh and won't use any cached assets. 15 00:01:05,590 --> 00:01:09,390 So here you can see a couple of different things. 16 00:01:09,390 --> 00:01:12,250 We have all of these columns over here and then 17 00:01:12,250 --> 00:01:16,010 we have kinda this Gantt chart looking timeline over here. 18 00:01:17,850 --> 00:01:23,380 Here we have all the names of our files, and their path. 19 00:01:23,380 --> 00:01:29,630 So you can see that all the paths are relative to our current document. 20 00:01:29,630 --> 00:01:30,630 And it 21 00:01:30,630 --> 00:01:33,490 looks like we have some explicit paths down 22 00:01:33,490 --> 00:01:35,950 there as well, or absolute paths, I should say. 23 00:01:38,070 --> 00:01:42,730 Here we have the method column and that's just the HTTP method that we 24 00:01:42,730 --> 00:01:47,010 used to grab the assets so in this case we're using, we're using GET. 25 00:01:47,010 --> 00:01:49,070 You may see post in there occasionally. 26 00:01:49,070 --> 00:01:52,710 For example, if you're doing some AJAX and you're posting data to the server. 27 00:01:54,410 --> 00:02:00,570 You can see the HTTP status of each asset. In here, they all said 200 OK. 28 00:02:00,570 --> 00:02:02,970 That means that the asset was loaded successfully. 29 00:02:02,970 --> 00:02:05,800 If we go ahead and refresh the page without doing a hard 30 00:02:05,800 --> 00:02:11,370 refresh, you can see that these all change to 304 Not Modified. 31 00:02:11,370 --> 00:02:15,520 And that means that it's just pulling up a cached asset that it's already loaded, so 32 00:02:15,520 --> 00:02:17,450 it's not pulling it again, which is an 33 00:02:17,450 --> 00:02:19,690 efficient way for the browser to load up data. 34 00:02:19,690 --> 00:02:22,480 We're going to go ahead and do a hard refresh 35 00:02:22,480 --> 00:02:26,300 though so that all of our assets are loaded up fresh. 36 00:02:26,300 --> 00:02:28,302 And you can see that all of these say 37 00:02:28,302 --> 00:02:31,780 200 OK. 38 00:02:31,780 --> 00:02:34,950 Next up we have the type which is just the file type. 39 00:02:34,950 --> 00:02:40,120 Then we have the initiator and the initiator 40 00:02:40,120 --> 00:02:44,020 is basically how the asset was loaded up. 41 00:02:44,020 --> 00:02:48,790 So smellslikebacon.com right here is the HTML. 42 00:02:48,790 --> 00:02:52,930 And that was just loaded by default when we pulled the page. 43 00:02:52,930 --> 00:02:56,670 However, all of these other assets were loaded in by the parser. 44 00:02:56,670 --> 00:03:01,270 So, when it was actually parsing the HTML document, it noticed that 45 00:03:01,270 --> 00:03:05,640 the assets were being included and it loaded them in that way. 46 00:03:06,800 --> 00:03:11,720 We can also see the size of each asset here. 47 00:03:11,720 --> 00:03:12,590 So that's useful. 48 00:03:12,590 --> 00:03:14,880 If you wanna sort by size, for example, you 49 00:03:14,880 --> 00:03:18,425 can see that our largest asset here is this 50 00:03:18,425 --> 00:03:21,290 texture.png image. 51 00:03:21,290 --> 00:03:24,630 And that's a good way to look for site optimizations. 52 00:03:24,630 --> 00:03:26,250 We'll talk a little bit more about that soon. 53 00:03:26,250 --> 00:03:33,580 I'm gonna go ahead and refresh here, just to get the default sorting. 54 00:03:33,580 --> 00:03:36,680 Actually, I think I might need to close the dev tools there. 55 00:03:36,680 --> 00:03:37,810 There we go. 56 00:03:37,810 --> 00:03:41,320 Now, if I do a hard refresh, I have my default sort back. 57 00:03:41,320 --> 00:03:41,830 It's what I want. 58 00:03:43,480 --> 00:03:46,520 Then finally, over here, we have the time and the latency. 59 00:03:46,520 --> 00:03:51,710 So, that's basically just how long it took to load each one of these assets. 60 00:03:52,870 --> 00:03:56,890 Finally, we have a Gantt chart over here, which is called the Timeline. 61 00:03:57,940 --> 00:04:03,240 Now this shows how long, and in what order, everything was loaded in. 62 00:04:04,450 --> 00:04:09,100 You'll notice that each asset has a transparent 63 00:04:09,100 --> 00:04:13,130 bar here. And that is the request time. 64 00:04:13,130 --> 00:04:17,550 So that's basically when the request was made, and how 65 00:04:17,550 --> 00:04:20,990 long it took the server to respond to that request. 66 00:04:22,280 --> 00:04:27,860 Then, we have a solid part of the bar, and that's how long it took us to actually 67 00:04:27,860 --> 00:04:34,410 download or receive that data. So, both pieces there are important, and 68 00:04:34,410 --> 00:04:38,080 they form the whole of how long that asset actually took to load. 69 00:04:38,080 --> 00:04:40,820 From the time that we requested it, to the 70 00:04:40,820 --> 00:04:44,180 time that it was actually downloaded in the browser. 71 00:04:45,950 --> 00:04:49,430 Now, you'll notice that we also have several different colors here. 72 00:04:49,430 --> 00:04:52,480 The colors represent the type of file. 73 00:04:52,480 --> 00:04:57,940 So here in blue, we have HTML. In green, we have CSS. 74 00:04:57,940 --> 00:04:59,850 Purple is images and 75 00:04:59,850 --> 00:05:02,320 you'll notice those actually take much longer to load. 76 00:05:02,320 --> 00:05:05,420 And then we have fonts down here in orange. 77 00:05:05,420 --> 00:05:07,420 And of course, if you're loading in JavaScript or 78 00:05:07,420 --> 00:05:10,520 other types of assets, you'll have other colors, as well. 79 00:05:12,380 --> 00:05:15,710 Next, you'll notice that there are two lines here. 80 00:05:15,710 --> 00:05:19,980 We have a blue line and then we have a red line. 81 00:05:19,980 --> 00:05:23,940 The blue line is when all of the DOMContent was loaded. 82 00:05:23,940 --> 00:05:25,340 So, this is when the 83 00:05:25,340 --> 00:05:26,760 loaded event was fired. 84 00:05:26,760 --> 00:05:31,950 And, actually this is when our HTML was loaded, and you'll notice that 85 00:05:31,950 --> 00:05:37,140 as soon as the HTML is done, that's where our blue line appears. 86 00:05:37,140 --> 00:05:42,090 Now even though our HTML is downloading, we still might be loading other assets. 87 00:05:42,090 --> 00:05:44,840 And that's what that red line represents. 88 00:05:44,840 --> 00:05:50,400 The red line is when the load event has been fired off, and we've 89 00:05:50,400 --> 00:05:53,320 gone ahead and loaded everything on the page. 90 00:05:55,740 --> 00:05:59,320 So, that's basically how long it took 91 00:05:59,320 --> 00:06:03,440 our page to load. And if we scroll down to the bottom here, 92 00:06:03,440 --> 00:06:07,630 we can see that we made 15 requests. We transferred 93 00:06:07,630 --> 00:06:12,450 369 kilobytes. So that's basically the weight of our 94 00:06:12,450 --> 00:06:20,940 entire page in terms of file size. And it took us 248 milliseconds to load 95 00:06:20,940 --> 00:06:23,470 that in, which is not too bad. 96 00:06:23,470 --> 00:06:27,120 This is a fairly small page and it loaded pretty quickly. 97 00:06:28,190 --> 00:06:33,190 Some larger web pages you might notice taking several seconds to load, which 98 00:06:33,190 --> 00:06:38,730 is probably not good, and you should try to optimize at that point. 99 00:06:38,730 --> 00:06:43,760 Now, how do you actually optimize and use the network panel to do that? 100 00:06:43,760 --> 00:06:46,180 Well, there's a couple of different way that 101 00:06:46,180 --> 00:06:48,200 we can dig in here. 102 00:06:48,200 --> 00:06:53,630 First, we wanna go ahead and fix any kind of 404 errors. 103 00:06:53,630 --> 00:06:59,030 So, in the status column here, you'll see that these all say 200 OK. 104 00:06:59,030 --> 00:07:02,750 But if any of these are coming up with 404s or 500 errors, 105 00:07:02,750 --> 00:07:09,040 those are HTTP statuses that means that the assets were not successfully loaded. 106 00:07:09,040 --> 00:07:11,600 And basically, you're just wasting requests 107 00:07:11,600 --> 00:07:12,940 at that point. 108 00:07:12,940 --> 00:07:15,250 Not only does it take bandwidth to load up each one 109 00:07:15,250 --> 00:07:20,700 of these assets, it also takes bandwidth to make each request. 110 00:07:20,700 --> 00:07:24,310 So if we can remove any of those requests 111 00:07:24,310 --> 00:07:27,430 that are failing, then it's gonna be a performance win. 112 00:07:27,430 --> 00:07:31,330 In the same vein, we also wanna remove any unnecessary files. 113 00:07:31,330 --> 00:07:34,100 So, if we're loading in any images that maybe 114 00:07:34,100 --> 00:07:37,540 aren't actually being displayed on the page, for example, 115 00:07:37,540 --> 00:07:40,600 were for loading in JavaScript that we're not actually using, 116 00:07:40,600 --> 00:07:42,080 we wanna make sure that we get rid of those. 117 00:07:43,830 --> 00:07:45,460 Next, we wanna make sure that we 118 00:07:45,460 --> 00:07:49,980 combine images into a sprite map wherever possible. 119 00:07:49,980 --> 00:07:52,900 And sprite map is basically just one large 120 00:07:52,900 --> 00:07:57,110 image that has several smaller images inside of it. 121 00:07:57,110 --> 00:08:00,840 And then we use CSS to go ahead and position those images. 122 00:08:00,840 --> 00:08:02,640 We're not gonna get into that technique here. 123 00:08:02,640 --> 00:08:06,150 But that is one way that you can reduce HTTP requests. 124 00:08:06,150 --> 00:08:09,860 So you take several of these images and it would just turn into one. 125 00:08:10,860 --> 00:08:14,530 You can do a similar thing with JavaScript and CSS. 126 00:08:14,530 --> 00:08:18,160 You can combine your CSS into single files and 127 00:08:18,160 --> 00:08:21,510 you can also combine your javascript into single files. 128 00:08:21,510 --> 00:08:24,480 You can minify those files as well, and there are several 129 00:08:24,480 --> 00:08:27,970 ways that you can go ahead and do that around the web. 130 00:08:27,970 --> 00:08:31,900 So, in general, the best way to optimize your site using the 131 00:08:31,900 --> 00:08:36,960 network panel is to go ahead and reduce the number of HTTP requests. 132 00:08:36,960 --> 00:08:40,510 You want to look at any kind of assets that are failing, 133 00:08:40,510 --> 00:08:43,130 and you also want to look at assets that are taking a really 134 00:08:43,130 --> 00:08:47,070 long time to load and decide first, whether or not you need them, 135 00:08:47,070 --> 00:08:50,370 and secondly, if there's anything that you can do to further optimize them.