Automatically removing unused CSS using Grunt
I have previously blogged about the importance of keeping your web pages lean and the impact that unused CSS can have on your page performance. Apart from causing cluttered files, unused CSS can can slow down page load times due to the unnecessary weight of the file. Google Chrome developer tools has some great features that can help you detect any unused CSS. By using the audit feature, you can view all the CSS selectors that arent used by the current web page. This feature is really handy, but it can be tedious to manually go through each page and remove the unused CSS.
In this post, I am going to run through the process of setting up Node.js on a Windows machine, installing Grunt and getting the UnCSS plugin running on a simple project. By the time you get to the end of this post, you should be able to automatically remove unused CSS from your stylesheets as well as minify them on the fly. You'll be pretty impressed with the results that we achieve!
The Example Project
For this example, I am using a simple HTML page that uses the Twitter Bootstrap CSS as a template plus some custom CSS. The combined weight of the CSS files is 124 KB.
In order to get Grunt running on your machine, you will need to install Node.js. Start by heading over to the Node.js website and download the latest distributable. It is easy to install and only takes a couple of minutes.
Next up, you will need to install Grunt. If you haven't used Grunt before, be sure to check out the Getting Started guide, as it is a useful guide to installing this and many other Grunt plugins. In order to install Grunt, fire up the Node.js command prompt that you have just installed. In the command prompt, type the following:
npm install -g grunt-cli
This will download and install Grunt for you - easy! Next, navigate to the folder that contains your source files that you wish to process. In my case, the command I type is:
With the Node.js command prompt still open, type in the following code:
npm install grunt-uncss grunt-contrib-cssmin --save-dev
In the code above, I am configuring the UnCSS plugin to look at my index.html file, locate any CSS and spit out a version with all the unused CSS removed. The new CSS file will be created in a new folder called "cleancss". Next, the CSSmin plugin is configured to look at the clean CSS (tidy.css) and minify the file. Finally, in line 21 to 25, we load the two different plugins and register them.
All you need to do now is run Grunt.
Remove that dirty CSS!
In the Node.js command prompt, navigate to the folder that contains your source files. This should also be the same folder that contains a Gruntfile.js with the configuration settings for the project.
Once the files have been run through the plugins, the clean, minified CSS will be created in the folder that you specified in the gruntfile. The resulting CSS file that is created comes in at a tidy 5 KB, making a saving of 119 KB. That is a saving of over 95%!
As you can see, a simple change using this tool can make a significant difference to your page load times. It's a great tool that is packed with useful plugins - it is definitely worth using it on your next project.
Check out the other great plugins available for Grunt, as well as the UnCSS project on Github. For another detailed installation guide - try this link.