Performance Matters: Optimizing Page Load

3.4 JavaScript and CSS Optimization

When dealing with JavaScript and CSS there are three things you can do to improve performance. First of all, is have Gzip compression enabled on your server, because most browsers will request Gzip by default. So you really don't have to do anything on the client side. Number two is reduce the number of http requests. As you've learned in a previous lesson, multiple http requests take up a lot of loading time. So what you can do is merge CSS and JavaScript files. Well not together, but CSS with CSS and JavaScript with JavaScript. Because the thing is, when the browser finds multiple JavaScript files, or CSS files, it will send a request to the server for each of those files. So, instead of having five different CSS files, merge them all into a single file. So then, you will get a single request. In development, you can keep as many CSS and JavaScript files as you want. You can have partials, it doesn't really matter. But when you deliver the final product, you can use some special tools to merge those files into a single one. For CSS, you can use pre-processors and partial files. So then you would use a compiler like Code Kit, Scout, Compass to take all of those partial files and merge them into a single master file. And this is a great practice, because in development, as I said earlier, it can have multiple files, and very easily you can create a single production file, which is great. For more information about that check out the lesson notes. And also you can use a php tool called minify, and this works for both CSS and Java Script. Link is down below. Finally, number three refers to minifying your assets HTML, CSS, JavaScript. So if you don't know minification is about removing any unnecessary characters from your source code without altering its functionality. So stuff that is not necessary for the compiler like white space, or white space characters, comments, line breaks, and so on. So by removing all of this you can maintain the same functionality but a lower file size. For example take a look at the file size difference between the regular jQuery file and the minified version. 247 kilobytes versus 84 kilobytes. That is a huge difference. As far as tools go, a simple Google search for CSS or JavaScript minifier will give you a bunch of results, but check out the e-lesson notes anyway for some of my recommendations, and that's about it for this lesson. Now next time we'll talk about moving assets externally and how this can help with the overall page performance, I'll see you there.