Preview
Video Player
00:00
00:00
Optimize JavaScript
6:14Making adjustments to when JavaScript is loaded can dramatically improve perceived performance. In this case, the page will still take the same total amount of time to load, but it will appear to load faster to the end user.
JavaScript optimization is actually a very
broad and
0:00
advanced topic that's beyond the scope of
these lessons.
0:03
But, for now, we're just going to take a
few basic steps in our
0:06
HTML that will improve performance right
away.
0:09
First, we should try to load JavaScript at
the bottom of our document.
0:12
This is not always possible, and some
JavaScript libraries and
0:17
frameworks don't allow for it, so be sure
to read the documentation.
0:20
However, with jQuery and its plugins,
which are only designed to enhance a page,
0:25
we can most definitely load it at the
bottom.
0:31
The reason we want to move our scripts to
the bottom has both a simple explanation
0:34
and a complicated explanation.
0:39
Let's talk through the simple one first.
0:41
When our page is being loaded and the
browser finds a JavaScript file.
0:44
It will block any further rendering until
the JavaScript has finished
0:48
being loaded and parsed.
0:52
Loading JavaScript at the bottom won't
really change the overall amount of
0:55
time that it takes for everything to load.
0:59
But it will improve what's called
perceived performance.
1:01
In other words, if the HTML content and
the CSS styling is loaded in.
1:05
The user can see that first, and then in
the next instant, the JavaScript
1:10
is loaded in, usually before the user can
tap or click on anything.
1:15
So the page won't actually be any smaller,
or
1:19
finish loading faster, we're just loading
things in a different order so
1:23
that it looks like it's faster to the end
user.
1:27
This might sound like it's cheating or
like it's a hack, but
1:31
perceived performance is actually just as
important, and
1:34
sometimes more important than actual
performance.
1:37
If a webpage looks like it's faster, then
for all practical purposes it is faster.
1:41
Let's take a look at our page and
1:48
think more about how we're loading in
JavaScript.
1:50
So I'm going to open up index.html here.
1:54
[SOUND] And this is the only page that we
have JavaScript on.
1:58
So let's just grab that.
2:06
And then down here, right before we close
the body element,
2:11
I'm going to paste in those script tags.
2:17
And that's it.
2:23
So if we go over to our page and refresh
here.
2:24
You can see that there's nothing really
different and
2:29
if we click on these it will load these
images in.
2:34
So putting our JavaScript at the bottom
keeps the functionality, but
2:39
the perceived performance might be a
little bit faster.
2:43
The more complicated explanation has to do
with the fairly new
2:47
async attribute introduced in HTML5, which
now has fairly decent browser support.
2:51
We can sometimes add the async attribute
to a JavaScript file if it's completely
2:57
independent of any other file on the page,
and this will tell the browser
3:02
not to block rendering and perform more
operations in parallel.
3:06
That sounds great,
3:11
but if we're already loading JavaScript at
the bottom, then there's no need to load
3:12
JavaScript asynchronously because we're
not really blocking any rendering.
3:17
So then, why not keep our scripts at the
top and use the async attribute?
3:22
Well, when we use async, scripts will be
executed immediately after they're loaded.
3:27
That's fine if the scripts are completely
independent and
3:32
don't depend on one another.
3:36
But that's not the case for our scripts.
3:38
For example, if a jQuery plugin loaded
before the jQuery
3:40
library itself, there would be errors all
over our page.
3:45
To read more about how JavaScript loads in
the browser,
3:49
check out the notes associated with this
video for a detailed article.
3:53
One more thing we should do is, make sure
that we're using hosted libraries,
3:58
wherever possible.
4:03
When we discuss CSS fonts,
4:05
we already named three reasons why we
should use hosted services.
4:06
For speed and reliability.
4:11
For additional parallel HTTP connections.
4:13
And finally,
4:16
because the user might have already cached
the resource from another site.
4:17
Just like fonts we can rely on Google to
provide us with
4:21
the most popular JavaScript libraries
rather than hosting them ourselves.
4:24
So, let's check it out.
4:29
I'm going to navigate to
developers.google.com/speed/libraries.
4:31
[SOUND] And here, you'll see a bunch of
hosted libraries.
4:40
And we want to grab jQuery.
4:48
We're using jQuery 2.x.
4:52
So, let's select that here.
4:55
And if we go back to our work space and
scroll down to the bottom.
4:59
[BLANK_AUDIO]
5:03
You'll see we're including jQuery there,
and we're hosting it ourselves.
5:06
But we can just paste that in and use the
exact same version
5:11
and save that, and now, when we load up
our site, we shouldn't see any difference.
5:17
So, let's open the Network tab.
5:24
And see if we notice any performance
difference.
5:28
So we load up the Network tab and refresh.
5:30
You'll notice that we do have a slight
performance increase.
5:33
We have 17 HTTP requests, which is the
same as before.
5:36
But we're only transferring 156 kilobytes,
and
5:40
the page is now down to 174 milliseconds.
5:44
We've never seen anything under 200 up to
this point.
5:48
So, let's refresh a couple more times, and
we're pretty consistently under 200.
5:52
So, why did that happen if we're just
replacing jQuery?
5:58
Well, we'll learn more about that in the
next lesson, but
6:02
it's because instead of using the full
jQuery library,
6:05
we are using the minified version, denoted
by .min.
6:08