Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The CSS and JavaScript that we write is often filled with spaces, line breaks, comments, and long variable names. The web browser doesn't need any of these things to parse properly, and yet they still are being downloaded when a site visitor loads up the page. Minifying assets removes these extra bits and reduces overall page weight.
Concepts
- Minify Assets - Minification reduces the file size of JavaScripts and CSS by removing spaces, line breaks, comments, long variable names, and via other optimizations.
- Combine Assets - Combining CSS into one file reduces HTTP requests.
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
The CSS and JavaScript that we write is
often filled with spaces, line breaks,
0:00
comments, and long variable names.
0:05
The web browser doesn't need any of these
things to parse properly, and yet
0:07
they still are being downloaded when a
site visitor loads up the page.
0:12
We could try removing these ourselves, but
0:17
that would be very tedious and time
consuming.
0:19
Instead, we can use a process called
minification.
0:21
When we minify a CSS or JavaScript file,
we keep a copy of the original,
0:25
but the one that we actually reference in
our HTML is the minified version.
0:31
There are many different sites, programs,
and
0:37
web services that can help you minify your
code.
0:39
However, we're going to use Google's
closure compiler for our JavaScript and
0:42
CSS minifier for our CSS.
0:47
We could also minifcation from the command
prompt then create an asset pipeline to do
0:50
this automatically every time we make
changes, but
0:55
that's a little beyond the scope of the
basics.
0:58
Instead, we're going to simply copy our
code into the minifiers and
1:00
then copy the output into new minified
versions on our site.
1:04
So let's start with the JavaScript.
1:09
We only have one JavaScript file that's
not minified.
1:12
You can see that jquery.magnific-popup.min
is already minified,
1:17
and then, we're not even using this jQuery
file.
1:23
We're using the Google hosted library.
1:26
We just have app.js.
1:29
The file is already pretty small but
1:31
if we had a lot more JavaScript, this step
becomes even more important.
1:35
We're going to go to the closure compiler
service,
1:40
so closure-compiler.appspot.com.
1:48
And you can find a link to this in the
notes associated with this video.
1:54
And here is where we will minify our
JavaScript.
1:58
So I'm going to copy everything that's
here.
2:01
And then I'm going to paste it by removing
everything there.
2:05
And I'll paste it in, and I'll click
compile.
2:11
[BLANK_AUDIO]
2:15
So, it went ahead and compiled the little
bit of JavaScript that we have.
2:17
But, our JavaScript is so small that it's
actually better to save an HTTP
2:22
request and simply paste it directly in
line into the HTML.
2:26
The HTTP request would take longer than it
would to just
2:31
download these characters and the HTML
file.
2:35
So let's open up index.html.
2:38
And i'm going to scroll down to where were
including app JS.
2:42
And i'm just going to remove the src
attribute and it's value.
2:46
And between the two script tags,
2:52
I'm going to paste what we got from the
closure compiler.
2:54
Next, let's do the same for our CSS.
2:59
For this, we're going to use another
hosted service called CSS Minifier.
3:02
There's a link to CSS Minifier in the
notes for this video.
3:06
We're also going to put all of our CSS
into a single minified file.
3:10
This will combine all the HTTP requests of
separate CSS files into one request.
3:16
So, I'm going to create a new file here.
3:24
[SOUND].
3:27
And I'll call it all.min.css.
3:30
And, this is going to include all of our
CSS, and we are even going to include
3:37
some stuff from the jQuery plugin, even
though we are not using it on other pages.
3:44
Just because if we can grab all this in
one request, it will be cached and
3:50
we can use it on other pages.
3:54
So it's not, not big of a deal.
3:57
It's also a very small amount of CSS, so
in this case, it's fine.
3:59
So I'm going to open CSS Minifier.
4:05
It's at cssminifier.com.
4:07
Again, this is in the notes.
4:11
And first, I'm going to go back to my
workspace.
4:14
And we need to make sure that we get these
in the proper order.
4:18
So, if we go to index and scroll up, we'll
see that we have normalize,
4:23
and then we have a font from Google, and
then we have main,
4:28
responsive, and then, magnific dash popup.
4:32
And we need all of these, but
4:36
we can't actually just put this font in
there because it's hosted elsewhere.
4:39
So, I'm going to actually move normalize
so it's just below the font.
4:44
And that really should not effect the look
of the site or any of its functionality.
4:50
So it should be fine.
4:55
We'll put that all.min.css file right
there.
4:57
So, normalize is first, so let's grab
that.
5:03
I'm just going to copy the entire file,
and
5:07
then I'll go to CSS Minifier and paste it
in.
5:11
And, I can make a ton of space there just
so I know what's going on,
5:15
because CSS Minifier is just going to
remove it.
5:19
So that's fine.
5:21
So let's look at index again, after
normalize is main.
5:23
So let's get that.
5:27
[NOISE] And next,
5:28
we need responsive.CSS.
5:32
So, let's grab that file.
5:38
[NOISE] And then finally,
5:40
we need our jquery.css.
5:44
So let's grab that and paste it there.
5:48
And then we will click minify, and
5:52
it's put it all into giant file with no
spaces or comments.
5:55
So we'll just copy that.
6:00
And then let's go to all.min.css.
6:04
And paste it in.
6:08
And we'll save that file and
6:09
close it, because we don't want to edit
that directly.
6:11
So let's close all these other files here.
6:15
And then in index, we just need one
include here.
6:17
So, let's remove normalize and all those
others.
6:24
And, inside of our CSS folder, we'll
reference all.min.css,
6:27
and let's just go to our homepage here to
make sure that's working properly.
6:33
Yup, everything looks good.
6:38
Our jQuery plugin still works.
6:40
So, let's do that on the other pages as
well.
6:42
So we'll copy that and we'll go to about.
6:45
And we'll remove the CSS there.
6:49
And we'll remove from normalize, being
careful to keep the Google font there.
6:52
And then same thing for contact, remove
normalize and replace it.
6:59
There we go.
7:06
So let's just spot check our other pages
here.
7:08
About still looks good, contact still
looks good.
7:12
So, one thing to keep in mind with this
method is that, any time you make a change
7:17
to your regular JavaScript in CSS files,
you'll need to minify them again so
7:22
that the changes are reflected in the
assets that you're actually using.
7:26
As I mentioned previously, there are
techniques that can work to automate this,
7:31
but that gets into more advanced material
than these lessons.
7:36
Now that we've minified our CSS and
JavaScript, let's do one final performance
7:40
check and measure the difference between
where we started and where we ended up.
7:44
So I'm going to open the chrome dev tools
here and refresh on the network tab.
7:51
And if you remember, we started out with
about 20 requests and
7:58
we had something like 800 kilobytes being
transferred.
8:02
Now, by combining our CSS and SVGs and
8:06
other files that we don't need, we're down
to 13 requests.
8:09
So that's pretty good.
8:13
We're transferring 152 kilobytes.
8:15
And most important of all, we are at a
pretty fast response time now.
8:18
So let me just refresh that a few more
times.
8:22
Looks like there is some variance in the
network,
8:24
but generally it's around 200
milliseconds.
8:29
So that is a lot better than where we
started.
8:33
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