Well done!

You have completed Introduction to Front End Performance Optimization!

Preview

Chrome DevTools

The Chrome DevTools in the Google Chrome web browser include a number of tools for measuring performance. One of the most valuable tools for front end optimization is the Network tab.

Resources

Chrome DevTools Documentation

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[MUSIC] 0:00

[SOUND] One of the most important aspects of performance is measurement. 0:04

By using software tools to measure the speed of a website, you can determine if 0:09

your optimizations are actually helping or hurting Front End Performance. 0:14

Measurement will also help you determine if you're meeting the goals 0:19

outlined in your performance budget. 0:22

There are many tools to measure performance, 0:25

but we're going to primarily use the Chrome DevTools. 0:27

There are similar tools in other browsers, 0:31

but there will be differences that could make it difficult to follow along. 0:33

For that reason, you may want to use Google Chrome for these lessons. 0:37

If you are not already doing so. 0:41

Now click the Workspaces button next to this video. 0:44

There you'll find a website that is in need of optimization. 0:47

Once you have your Workspace open, 0:51

click the Preview button to bring up the website. 0:53

[SOUND] So, here we have a website that may look familiar to you. 0:57

And, I've made a few additions, but 1:03

in the process, the site has become somewhat suboptimal. 1:06

So, when we click on these Gallery images here, 1:11

you can see that they now come up, thanks to a jQuery plugin. 1:14

So we can see them larger instead of them going to a whole separate page. 1:20

So let's open the Chrome DevTools. 1:26

And to do that I'm going to hit Cmd+Option+I on my Mac. 1:28

And I'll just bring them down to the bottom there. 1:34

And we're gonna go to the Network tab. 1:37

And then we wanna make sure that we have Disable cache checked. 1:42

After we've refreshed the page, 1:47

it will generate a table that lists all of the assets we're loading into our site and 1:48

it will give us important information about each one. 1:54

This is a great way to figure out exactly what's loading into your page and 1:56

it can give you some hints about which assets might be slowing things down. 2:00

Now lets take a look at each column. 2:04

Starting from the left we have the Name and Path. 2:08

This is the Name and the URL Path of the resource. 2:11

So, for example, we have normalize.css, that's the Name. 2:17

And the Path is in the CSS folder, so 2:21

it's coming from css/normalize.css. 2:25

Then we have the Method which is just the HTTP method, 2:30

in this case it will always be GET. 2:34

Then we have the Status and in this case, we have 200, 2:37

which is OK on most of these. 2:42

That's the HTTP status. 2:45

And then, here we have a 404 error, and so 2:47

we'll need to come back to that in a little bit. 2:50

Then we have the Type, which is basically the file type or 2:53

MIME type, so you can see we have a lot of CSS. 2:57

We have some HTML, JavaScript and so on. 3:00

And we have the Initiator, and 3:05

the Initiator is basically which file started the request? 3:07

And, in this, you could have a couple of different values. 3:14

In this case, it's all parsers where Chrome initiated the request. 3:17

But, we can also have redirects, request initiated by a script, and a few others. 3:21

Then there's the Size. 3:27

And, this is basically how large the file is, 3:29

and again, with that 404 error, you can see we had 0 bytes that were transferred. 3:34

But it still took a little bit of time. 3:40

So in the Time column, you can see the total duration from the start 3:42

of the request to the receipt of the final byte in the response. 3:47

The latency is also listed and 3:52

latency is the time to load the first byte in the response. 3:55

Finally, we have the Timeline. 4:00

And the Timeline is over here on the right. 4:02

And the Timeline column displays a visual waterfall of all of the network requests. 4:06

So here you can see that these are different colors and 4:13

the colors represent different file types. 4:16

And if we hover over one of these we can see a little bit more detail. 4:21

We can also sort any one of these columns. 4:27

So, for example, if we want to focus on just the images, or 4:29

just the CSS, we can do that by clicking the column Header. 4:33

Clicking the Header of the Timeline column allows for multiple types of sorting. 4:38

So here you can see I have Timeline, Start Time, Response Time, End Time, 4:45

Duration and Latency, and one of the most useful alternative sorts 4:50

is Duration, because we can see which assets took the longest? 4:55

However if we need to go back to the Timeline sort. 5:02

We can see which assets loaded in parallel and 5:07

which assets were blocked by the requests. 5:10

And if we hover over each one of these Resources in a Timeline, 5:15

we can get a more granular breakdown of how it loaded over the network? 5:19

Sometimes this can be evidence of problems on the server. 5:23

But more often it shows where you should focus your attention for 5:27

Front End Optimization. 5:31

One last thing I'd like to point out is that the results you get in the DevTools 5:33

are only indicative of the performance on your computer, your browser, and 5:37

your Internet connection. 5:42

If a site visitor is coming from another part of the world that's 5:43

far away from your server. 5:47

Or they're on a limited Internet connection, their experience will differ. 5:48

That said, performance optimizations will almost always benefit every user, so 5:53

that's the most effective place to focus our efforts. 5:58

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace