Improving Website Speed by Removing Unused CSS

by Francis Onwumere

Having a quick loading website is paramount for your website success as most visitors increasingly expect a site to load in 2 seconds or less and you may end up losing them if your site takes longer to load.

With great power comes great responsibility

With browsers becoming more powerful, web developers are increasingly pushing more responsibility to the front-end of websites, as such the average website tends to increase in size over time.

Coupled with increasingly popular front-end CSS and js frameworks like Bootstrap, Foundation, Material, etc for design and interaction, and it's easy to get a bloat problem.

The Enemy of the good is the best

Front-end frameworks are not bad in themselves but they usually try to cover other use-cases that are not specific or needed for your website thus resulting in a lot of unused and inactive design code lying dormant in your website.
This unfortunately increases the time it takes your site to load.

Check your website?

There are number of testing tools to check how long it takes your website to load Web Page Test (WPT) is the simplest and best tool out there. Google Page Speed Insights is also a very good resource. It is especially useful for the clear documentation and explanation of the different terms associated with the performance.
Next thing you'll want to do is to check if you website has unused CSS lying around and increasing page load time.

Locating Unused CSS Selectors

Dust-Me Selectors is a Firefox and Opera extension that analyzes your webpage to see which CSS selectors are not being used.
You can test all the pages in your entire website and you'll end up with a profile of which CSS selectors are not used anywhere.

Google Chrome’s developer tools also has an Audit tool that can be useful in locating unused CSS

To launch the Audit Tool in Chrome:

Open Properties > Tools > Developer Tools (or press SHIFT + CTRL + I)
Click on the Audits tab within the Developer Tools window
Ensure the Web Page Performance option is checked.
Click Run

Removing the Unused CSS

After running your audit you'll get a report like the one in the image below. The report gives a summary of how much of your website CSS that is unused and breaks it down to identify each of them.

If you look at the report you'll discover that approximately 75% of the website CSS is not currently used. With the total size of the website CSS being 36kB, this means over half of that size is just dead weight not being utilized.

So far so good. We've identified the problem but how do we solve it?

You can either use the audit list to manually go through your CSS code and remove the unused code - this can be a lot of work!

If you are front-end web developer you'll probably have heard of gulp. gulp is a handy task automation tool that can help improve your workflow but automating time-consuming tasks.
We want to save time while removing the unused CSS in our website so let's gulp.

Automating unused CSS removal with gulp-uncss

There is a good gulp primer here.

We'll be using a gulp plugin called gulp-uncss. Go ahead and add it to your project with:

npm install gulp-uncss --save-dev

Now let's create a task to automate the removal of unused CSS in the pages of our website

For example

var gulp = require('gulp');
var uncss = require('gulp-uncss');
gulp.task('default', function () {
    return gulp.src('website.css')
        .pipe(uncss({
            html: ['index.html']
        }))
        .pipe(gulp.dest('.'));
});

When you run gulp, gulp-uncss it will scan website.css for any unused style in html: ['index.html'] and remove them.
Let's run gulp-uncss against the style-sheet in our previous audit. The result is shown below:

As you can see, with the help of gulp-uncss, we have shaved off almost all the unused CSS in our stylesheet, a 74% improvement that will drastically improve our website load time.

To improve your website speed you should definitely consider removing the unused CSS.