Minify Assets

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