We're gonna look at one of my favorite panels which is the Network panel.

Now in the Network panel, you can do a number

of different things but primarily it helps you optimize your website.

So you can see when things are being loaded in, how large

they are in what order they are being loaded in, and so on.

So let's take a look.

So here we have the Network panel open. And I'm going to go ahead and clear it out

by hitting this little x here, and then I'm going to refresh the page,

and when I refresh, it goes ahead and loads everything in.

Now I'm gonna clear this again and actually do what's called

a hard refresh, and to do that I just hit Cmd+Shift+R

on a Mac and I believe it's Ctrl or, yes,

Ctrl+Shift+R on Windows. Now, doing a hard refresh like

that will pull all of the assets fresh and won't use any cached assets.

So here you can see a couple of different things.

We have all of these columns over here and then

we have kinda this Gantt chart looking timeline over here.

Here we have all the names of our files, and their path.

So you can see that all the paths are relative to our current document.

And it

looks like we have some explicit paths down

there as well, or absolute paths, I should say.

Here we have the method column and that's just the HTTP method that we

used to grab the assets so in this case we're using we're using GET.

You may see post in there occasionally.

For example, if you're doing some AJAX and you're posting data to the server.

You can see the HTTP status of each asset. In here, they all said 200 OK.

That means that the asset was loaded successfully.

If we go ahead and refresh the page without doing a hard

refresh, you can see that these all change to 304 Not Modified.

And that means that it's just pulling up a cached asset that it's already loaded, so

it's not pulling it again, which is an

efficient way for the browser to load up data.

We're going to go ahead and do a hard refresh

though so that all of our assets are loaded up fresh.

And you can see that all of these say

200 OK.

Next up we have the type which is just the file type.

Then we have the initiator and the initiator

is basically how the asset was loaded up.

So smellslikebacon.com right here is the HTML.

And that was just loaded by default when we pulled the page.

However, all of these other assets were loaded in by the parser.

So, when it was actually parsing the HTML document, it noticed that

the assets were being included and it loaded them in that way.

We can also see the size of each asset here.

So that's useful.

If you wanna sort by size, for example, you

can see that our largest asset here is this

texture.png image.

And that's a good way to look for site optimizations.

We'll talk a little bit more about that soon.

I'm gonna go ahead and refresh here, just to get the default sorting.

Actually, I think I might need to close the dev tools there.

There we go.

Now, if I do a hard refresh, I have my default sort back.

It's what I want.

Then finally, over here, we have the time and the latency.

So, that's basically just how long it took to load each one of these assets.

Finally, we have a Gantt chart over here, which is called the Timeline.

Now this shows how long, and in what order, everything was loaded in.

You'll notice that each asset has a transparent

bar here. And that is the request time.

So that's basically when the request was made, and how

long it took the server to respond to that request.

Then, we have a solid part of the bar, and that's how long it took us to actually

download or receive that data. So, both pieces there are important, and

they form the whole of how long that asset actually took to load.

From the time that we requested it, to the

time that it was actually downloaded in the browser.

Now, you'll notice that we also have several different colors here.

The colors represent the type of file.

So here in blue, we have HTML. In green, we have CSS.

Purple is images and

you'll notice those actually take much longer to load.

And then we have fonts down here in orange.

And of course, if you're loading in JavaScript or

other types of assets, you'll have other colors, as well.

Next, you'll notice that there are two lines here.

We have a blue line and then we have a red line.

The blue line is when all of the DOMContent was loaded.

So, this is when the

loaded event was fired.

And, actually this is when our HTML was loaded, and you'll notice that

as soon as the HTML is done, that's where our blue line appears.

Now even though our HTML is downloading, we still might be loading other assets.

And that's what that red line represents.

The red line is when the load event has been fired off, and we've

gone ahead and loaded everything on the page.

So, that's basically how long it took

our page to load. And if we scroll down to the bottom here,

we can see that we made 15 requests. We transferred

369 kilobytes. So that's basically the weight of our

entire page in terms of file size. And it took us 248 milliseconds to load

that in, which is not too bad.

This is a fairly small page and it loaded pretty quickly.

Some larger web pages you might notice taking several seconds to load, which

is probably not good, and you should try to optimize at that point.

Now, how do you actually optimize and use the network panel to do that?

Well, there's a couple of different way that

we can dig in here.

First, we wanna go ahead and fix any kind of 404 errors.

So, in the status column here, you'll see that these all say 200 OK.

But if any of these are coming up with 404s or 500 errors,

those are HTTP statuses that means that the assets were not successfully loaded.

And basically, you're just wasting requests

at that point.

Not only does it take bandwidth to load up each one

of these assets, it also takes bandwidth to make each request.

So if we can remove any of those requests

that are failing, then it's gonna be a performance win.

In the same vein, we also wanna remove any unnecessary files.

So, if we're loading in any images that maybe

aren't actually being displayed on the page, for example,

we're for loading in JavaSscript that we're not actually using.

We wanna make sure that we get rid of those.

Next, we wanna make sure that we

combine images into a sprite map wherever possible.

And sprite map is basically just one large

image that has several smaller images inside of it.

And then we use CSS to go ahead and position those images.

We're not gonna get into that technique here.

But that is one way that you can reduce HTTP requests.

So you take several of these images and it would just turn into one.

You can do a similar thing with JavaScript and CSS.

You can combine your CSS into single files and

you can also combine your javascript into single files.

You can minify those files as well, and there are several

ways that you can go ahead and do that around the web.

So, in general, the best way to optimize your site using the

network panel is to go ahead and reduce the number of HTTP requests.

You want to look at any kind of assets that are failing,

and you also want to look at assets that are taking a really

long time to load and decide first, whether or not you need them,

and secondly, if there's anything that you can do to further optimize them.