Preview
Video Player
00:00
00:00
Chrome DevTools
6:01The 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.
[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