Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Website Optimization

Well done!

You have completed Website Optimization!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

The Network Panel

8:50 with Nick Pettit

The Network panel in the DevTools creates a chart that shows how assets are being loaded into the page. This includes, HTML, CSS, JavaScript, images, and anything else that’s being accessed with an HTTP request. The Network panel is a great tool for investigating front-end performance issues and finding parts of the page that can be optimized.

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
were for loading in JavaScript 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