Preview
Video Player
00:00
00:00
Google PageSpeed
4:05Google PageSpeed is a family of tools that can help you analyze the performance of a website. PageSpeed can be installed to Chrome in the form of a plugin and used via the Chrome DevTools.
Google PageSpeed is a family of tools that
can help you
0:00
optimize the performance of a website.
0:03
The PageSpeed website is available at
developers.google.com/speed,
0:06
and you can find a link in the notes
associated with this video.
0:10
These tools can be used in a number of
different ways, but in these lessons,
0:16
we're going to install the page speed
insights extension for Chrome.
0:19
So here I am at
developers.google.com/speed,
0:25
and like I mentioned there are several
different ways to use page speed but
0:29
we are going to analyze with Chrome.
0:34
And down here there will be a button that
says install Chrome extension.
0:38
So I'm going to click that.
0:42
And then I'll go ahead and click this
button up here and then click add.
0:45
So now PageSpeed insights has been
installed.
0:53
So I'll close this.
0:57
And here we have my workspace's preview up
and if I just close this and
0:59
bring it back up you'll see that I now
have this PageSpeed tab.
1:05
So lets click on that.
1:10
And there will be a button here that says
start analyzing.
1:12
So let's click on that, and once the
analysis is complete
1:16
the extension will point out some problem
areas in the overview.
1:21
It can be difficult to optimize all of
these and make every item go away,
1:25
but that's not the goal.
1:30
Rather, you should just do the best you
can to eliminate as many as possible.
1:31
You'll notice that they're also
prioritized.
1:36
H means high priority, M is medium, and L
is low.
1:39
Focusing on the higher priority items will
give us the largest performance benefits.
1:43
So, let's take a look at some of these
suggestions.
1:49
Here it says, in-line small CSS.
1:52
In-line small JavaScript.
1:54
So, if maybe we have some small JavaScript
on our site we can
1:57
instead of using an HTTP request, just
embed it directly into the HTML.
2:02
So that's a pretty good suggestion.
2:06
Then we also have a few suggestions that's
say minify.
2:08
So minify JavaScript, minify CSS, and
2:12
that's telling us to use a process called
minification, which we'll cover later.
2:16
There's several other suggestions here.
2:21
And you can scroll through them.
2:24
And then also read the ones that are
already complete, over here on the left.
2:26
Now that we have some tools available to
us, we should take
2:31
a basic measurement of the page load time
so we know where we're starting.
2:35
So instead of using the page speed
suggestions,
2:40
I'm going to go back to the network tab.
2:43
And let's just refresh this page one more
time.
2:46
And here down at the bottom, it says I
have 20 requests,
2:51
I transferred 819 kilobytes, and
2:56
took 509 milliseconds, at least on this
particular page load.
3:01
So, if we just refresh this a few more
times.
3:06
The 20 requests and 819 kilobytes will
always be the same, but
3:10
depending on network traffic and many
other variables that
3:15
are mostly beyond our control, we'll see
different page load times here.
3:19
So that time it took 521 milliseconds,
let's just do this a few more times.
3:24
That was a little better with 351,
3:29
but generally we wanna try to get this
number as low as possible.
3:31
And on a slower internet connection this
will take longer.
3:36
I'm actually on a pretty fast internet
connection right now.
3:40
But this could take up to one or maybe
even two seconds on a slower connection so
3:43
that's not good, we want to try to get all
of these numbers down, fewer requests,
3:49
less kilobytes transferred and then a
faster response time.
3:54
Next, we'll finally learn how to actually
take a website and
3:58
perform optimizations that will make it
faster.
4:02