Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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
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
You need to sign up for Treehouse in order to download course files.
Sign up