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.

We could try removing these ourselves, but

that would be very tedious and time consuming.

Instead, we can use a process called minification.

When we minify a CSS or JavaScript file, we keep a copy of the original,

but the one that we actually reference in our HTML is the minified version.

There are many different sites, programs, and

web services that can help you minify your code.

However, we're going to use Google's closure compiler for our JavaScript and

CSS minifier for our CSS.

We could also minifcation from the command prompt then create an asset pipeline to do

this automatically every time we make changes, but

that's a little beyond the scope of the basics.

Instead, we're going to simply copy our code into the minifiers and

then copy the output into new minified versions on our site.

So let's start with the JavaScript.

We only have one JavaScript file that's not minified.

You can see that jquery.magnific-popup.min is already minified,

and then, we're not even using this jQuery file.

We're using the Google hosted library.

We just have app.js.

The file is already pretty small but

if we had a lot more JavaScript, this step becomes even more important.

We're going to go to the closure compiler service,

so closure-compiler.appspot.com.

And you can find a link to this in the notes associated with this video.

And here is where we will minify our JavaScript.

So I'm going to copy everything that's here.

And then I'm going to paste it by removing everything there.

And I'll paste it in, and I'll click compile.

[BLANK_AUDIO]

So, it went ahead and compiled the little bit of JavaScript that we have.

But, our JavaScript is so small that it's actually better to save an HTTP

request and simply paste it directly in line into the HTML.

The HTTP request would take longer than it would to just

download these characters and the HTML file.

So let's open up index.html.

And i'm going to scroll down to where were including app JS.

And i'm just going to remove the src attribute and it's value.

And between the two script tags,

I'm going to paste what we got from the closure compiler.

Next, let's do the same for our CSS.

For this, we're going to use another hosted service called CSS Minifier.

There's a link to CSS Minifier in the notes for this video.

We're also going to put all of our CSS into a single minified file.

This will combine all the HTTP requests of separate CSS files into one request.

So, I'm going to create a new file here.

[SOUND].

And I'll call it all.min.css.

And, this is going to include all of our CSS, and we are even going to include

some stuff from the jQuery plugin, even though we are not using it on other pages.

Just because if we can grab all this in one request, it will be cached and

we can use it on other pages.

So it's not, not big of a deal.

It's also a very small amount of CSS, so in this case, it's fine.

So I'm going to open CSS Minifier.

It's at cssminifier.com.

Again, this is in the notes.

And first, I'm going to go back to my workspace.

And we need to make sure that we get these in the proper order.

So, if we go to index and scroll up, we'll see that we have normalize,

and then we have a font from Google, and then we have main,

responsive, and then, magnific dash popup.

And we need all of these, but

we can't actually just put this font in there because it's hosted elsewhere.

So, I'm going to actually move normalize so it's just below the font.

And that really should not effect the look of the site or any of its functionality.

So it should be fine.

We'll put that all.min.css file right there.

So, normalize is first, so let's grab that.

I'm just going to copy the entire file, and

then I'll go to CSS Minifier and paste it in.

And, I can make a ton of space there just so I know what's going on,

because CSS Minifier is just going to remove it.

So that's fine.

So let's look at index again, after normalize is main.

So let's get that.

[NOISE] And next,

we need responsive.CSS.

So, let's grab that file.

[NOISE] And then finally,

we need our jquery.css.

So let's grab that and paste it there.

And then we will click minify, and

it's put it all into giant file with no spaces or comments.

So we'll just copy that.

And then let's go to all.min.css.

And paste it in.

And we'll save that file and

close it, because we don't want to edit that directly.

So let's close all these other files here.

And then in index, we just need one include here.

So, let's remove normalize and all those others.

And, inside of our CSS folder, we'll reference all.min.css,

and let's just go to our homepage here to make sure that's working properly.

Yup, everything looks good.

Our jQuery plugin still works.

So, let's do that on the other pages as well.

So we'll copy that and we'll go to about.

And we'll remove the CSS there.

And we'll remove from normalize, being careful to keep the Google font there.

And then same thing for contact, remove normalize and replace it.

There we go.

So let's just spot check our other pages here.

About still looks good, contact still looks good.

So, one thing to keep in mind with this method is that, any time you make a change

to your regular JavaScript in CSS files, you'll need to minify them again so

that the changes are reflected in the assets that you're actually using.

As I mentioned previously, there are techniques that can work to automate this,

but that gets into more advanced material than these lessons.

Now that we've minified our CSS and JavaScript, let's do one final performance

check and measure the difference between where we started and where we ended up.

So I'm going to open the chrome dev tools here and refresh on the network tab.

And if you remember, we started out with about 20 requests and

we had something like 800 kilobytes being transferred.

Now, by combining our CSS and SVGs and

other files that we don't need, we're down to 13 requests.

So that's pretty good.

We're transferring 152 kilobytes.

And most important of all, we are at a pretty fast response time now.

So let me just refresh that a few more times.

Looks like there is some variance in the network,

but generally it's around 200 milliseconds.

So that is a lot better than where we started.