Website Optimization — Part 2: CSS/JS Reduction and Minimizing
In part 1 I explored how combining your various images into CSS sprites can improve site load time by leaps and bounds, but we are far from done when it comes to optimizing a site that gets as much traffic as Boss Blueprint. Keep in mind that optimization is great for any size site, but that small amounts of bloat become large problems with enough traffic. If you want, crank the jam below to get in the mood for some good ole’ fashioned web hackery.
Removing Unnecessary Parts of jQuery UI’s CSS
While many application developers utilize jQuery UI to enhance their interfaces, they often forget to customize the included CSS for only what the application uses. With Boss Blueprint I have simple demands from jQuery UI, i.e., create some dialog boxes, resize the icons, and allow the icons to be dragged. As I do not have any future plans for a datepicker, slider, or the monstrous list of icons that are used within jQuery UI, I took the liberty of removing those lines from the CSS file.
As Google Chrome’s audit tool shows in the above image, the difference in the size of the file is significant (18KB). The reduction and removal process was repeated for the various CSS files used throughout the site, which yielded a comprehensive size reduction of 56KB.
Minimizing CSS and JS Files
To Minimize or “Minify” simply means removing unnecessary spaces and all comments from a production CSS or Javascript file. Believe it or not, spaces and comments can take up a lot of space within a file and a browser could care less about them, it just wants to know what it is supposed to display. By minifying, the overall size of the files can be reduced by as much as 80-90%.
If you want to get fancy for a truly comprehensive optimization, I would highly recommend implementing this PHP5 script that combines all of your CSS/JS files into the fewest number of files possible and minifies them. If you want something simple to use, I recommend Minify CSS and Minify JS, two great little web tools.
What’s in store for Part 3?
Part 3 of the website optimization series is probably going to be one of the most fun to write…and read! Why? Because it is all about the glorious benefits of enabling GZIP compression, explaining how it works, and why it is so damned awesome. Stay tuned!