BLOG | categories | technical seo

How to Remove Unused CSS

By Steve Founder of PageDart

After running an audit you may see this recommended opportunity:

“Remove unused CSS”

Lighthouse or PageSpeed Insights both recommended that you fix this issue.

Why do we need to fix “unused CSS”?
What is “unused CSS”?
How can we remove “unused CSS”?

In this article, we will answer these questions and show exactly what CSS you should be removing.

What is Unused CSS?

If you have CSS style rules in your stylesheet that are not used on the page, then you have “Unused CSS”.

It is common to find as a stylesheet evolves, that there are rules that are no longer used.

Even a new style sheet can include “Unused CSS”, especially if you are using a CSS framework and not using all the rules.

The reason we want to remove these Unused CSS rules is that they slow down performance.

How does Unused CSS Slow Down Performance?

When the browser renders, it needs to add each element one-by-one to the page.

For each element such as a button, it needs to see which styles it should apply.

The more styles you have in the stylesheet the longer this process will take.

So if you have 100 elements on the page and 100 rules then it will have to run through the styles 100 * 100.

The longer this list of rules, the larger the effect will be on your web performance.

We can speed up the rendering of the page by reducing the styles in the stylesheet.

Which increases web performance.

Let's look at how you can see if your site has unused CSS.

How to Identify Unused CSS

To find any unused CSS on your page we can use Chrome Developer Tools.

Visit the page that you want to test and right-click the background.

Choose the “Inspect” option and it will open up Chrome Developer Tools.

We need to open the “coverage” tool and there are a few steps to open this up.

First, make sure the “console drawer” is open by pressing the “Esc” key.

Once you have the drawer open look for the “Coverage” tab.

If it is missing then press the three-dot menu next to the word “Console” and select “Coverage”.

To start recording the coverage we need to press the record button.

Hit refresh and you should see your CSS and JS files loaded in the window.

Click on your CSS file and you will see the red and green bars next to each style.

The green bar means that this style is being used by the page.

The red bar indicates that the rule is not in use.

You can also see in the table above that the CSS file has 97.1% Unused CSS.

So we now know what is in use and what is not.

Let's look at removing it.

Remove Unused CSS

A simple way is to use an online tool such as UnCSS Online.

This simple tool allows you to enter the CSS file and the HTML file.

It will then figure out which CSS rules are being applied and output only the used CSS.

Once you have the output you can then copy this back into a CSS file and add it to the page.

This tool is ok for a one-off task and can be useful for static webpages.

If you have developers working on your site then you need to automate this process.

Let's look at some recommendations you can give to the development team.

Automatically Remove Unused CSS

The online UnCSS tool above uses this library https://github.com/uncss/uncss behind the scenes.

If we need to regularly use the UnCSS tool it can be better to use this library as part of the developer workflow.

To do that install uncss using node:

npm install -g uncss

We can then use it on the command line like this:

Usage: uncss [options] <file or URL, ...>
    e.g. uncss https://getbootstrap.com/docs/3.3/examples/jumbotron/ > stylesheet.css

Options:

  -h, --help                            output usage information
  -V, --version                         output the version number
  -i, --ignore <selector, ...>          Do not remove given selectors
  -m, --media <media_query, ...>        Process additional media queries
  -C, --csspath <path>                  Relative path where the CSS files are located
  -s, --stylesheets <file, ...>         Specify additional stylesheets to process
  -S, --ignoreSheets <selector, ...>    Do not include specified stylesheets
  -r, --raw <string>                    Pass in a raw string of CSS
  -t, --timeout <milliseconds>          Wait for JS evaluation
  -H, --htmlroot <folder>               Absolute paths' root location
  -u, --uncssrc <file>                  Load these options from <file>
  -n, --noBanner                        Disable banner
  -a, --userAgent <string>              Use a custom user agent string
  -I, --inject <file>                   Path to javascript file to be executed before uncss runs
  -o, --output <file>                   Path to write resulting CSS to

Critical CSS

There is one more improvement we can make to the CSS.

As well as removing the CSS that is not used by the page we can inline critical CSS.

This means that any of the above-the-fold styles go into the HTML file. These styles are then removed from the external CSS stylesheet.

To do this we can use another developer tool called Critical.

This will automatically take the above-the-fold CSS and add it inside a <script> tag in the <head> of the page.

This will improve the “First Paint” speed of the page as the browser does not have to request another file.

The remaining CSS (below-the-fold) becomes a separate file. It is then added asynchronously to the page using the preload link.

Taking this below-the-fold CSS we can then use the UnCSS task above to make this file as small as possible.

To run the tool using node:

  npm i -D critical

Then you can use as part of a Gulp task:

const critical = require('critical');

critical.generate({
  inline: true,
  base: 'test/',
  src: 'index.html',
  target: 'index-critical.html',
  width: 1300,
  height: 900
});

Critical can also minify the CSS output, which I would also recommend.

GulpJS

The last recommendation you can make is to use an automation workflow tool such as GulpJS.

GulpJS allows the developer to automate the process of setting Critical CSS and then removing the unused CSS.

Wrapping Up, How to Remove Unused CSS

We have looked at how to remove unused CSS.

We need to remove the unused CSS because any unused CSS on your site will cause the site to slow down.

We have looked at how you can identify the unused CSS using the Chrome Developer Tools. Use the Coverage report to see the percentage of CSS that is not used on each page.

Once you have identified the CSS then you need to remove it.

You can implement this using an online tool as a one-off task or as part of the developer pipeline.

For extra points separate the critical CSS from the below-the-fold CSS to speed up the First Paint.

Load the remaining CSS using preload and ensure you minify it.

Lastly, make sure to combine these techniques using GulpJS for an easy workflow.