Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introduction to Front End Performance Optimization!
You have completed Introduction to Front End Performance Optimization!
Preview
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
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up