How to Remove Unused CSS to Improve Page Speed

When working with HTML / WordPress templates downloaded from the Internet you will need to remove dead rules from the stylesheets. Usually you will not use all the functionality provided by these templates and there could be many CSS rules that are unused and should be removed.

This article shows how to identify and automatically remove unused CSS using a command line utility. Also, you will see how to prevent loading (dequeue) entire CSS files and which files you should and should not modify in WordPress.

How to find unused CSS?

Chrome Developer Tools makes it easy to find unused CSS.
1. Open Developer Tools (from Menu > More Tools > Developer Tools or Ctrl+Shift+I; F12 works as well)
2. Go to Menu > Run command (or press Ctrl+Shift+P)
3. Type Coverage and choose Start instrumenting coverage and reload page

If you are using a plugin to combine CSS files, disable this functionality when looking for unused styles. If all your styles are combined in one big CSS file, it will be harder to identify which file you need to change.

You may find that from one CSS file only 10% is used in a specific page. This does not mean that you immediately need to remove 90%. Before removing styles, verify all your pages (all your page types at least) to see if the styles that appear unused in one page are not used in another one. For example, you will see all the styles related to comments are not used in your homepage where you don’t allow comments anyway. Visit a page where you allow comments to check if those styles are used there.

Use PurgeCSS to automatically remove unused CSS

While you can manually verify and update your CSS files for a small stylesheet, this is not really feasible for a 50Kb size stylesheet where a large portion appears unused. There are several solutions to delete unused CSS automatically. After reviewing a few, I chose to use PurgeCSS, which is a free and easy to install command line utility.

Here is how to install it on your favorite Linux distro (if you already have npm installed, you don‘t need to install it again):

Ubuntu

sudo apt install nodejs npm
sudo npm i -g purgecss

CentOS

sudo dnf install nodejs npm
sudo npm i -g purgecss

Let’s see a short example:

To keep things simple, I already created the following directories in my user’s home directory:
/home/myuser/css – I put the CSS I want to optimize here, myStyle.css
/home/myuser/css/purgecss – This is the output directory where the optimized file will be generated
/home/myuser/html – I will use wget to put the html code from my pages here

# Get HTML source from all the pages I need
# The --no-check-certificate option is useful if your test domain does not have a trusted SSL certificate
cd /home/myuser/html
wget --no-check-certificate https://mytestdomain/
wget --no-check-certificate https://mytestdomain/somePage
wget --no-check-certificate https://mytestdomain/somePost
wget --no-check-certificate https://mytestdomain/someSpecialPage

# Optimize my CSS file
purgecss --css /home/myuser/css/myStyle.css --content /home/myuser/html/* --output /home/myuser/css/purgecss/

Create a backup of your original CSS file and after that replace it with the optimized file created by PurgeCSS. Clear the cache and verify all your required styles are still there and your website works as expected.

You may find some things are not perfect and might need to put some styles back. I think the best way to compare the original with the optimized file visually is using the Compare Selected functionality of Visual Studio Code. If you don’t have VSCode installed, install it. You’re going to love it.

WordPress best practices

You should remove unused CSS only from your (custom) files. If your WordPress plugins or core stylesheets also have many unused styles, optimizing those files is not best practice as a WordPress, theme or plugin update will probably remove your work.

For these CSS files, you should make sure they are only loaded (enqueued) when they are really needed.

Let’s see some examples:

How to remove the Gutenberg CSS:

function remove_block_library_css() {
   wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', 'remove_block_library_css' );

You can remove the Gutenberg CSS files even if you use some block functionality if you include the required stylesheets in your custom CSS file.

How to remove the WooCommerce CSS and JS from non-WooCommerce pages:

function remove_woocommerce_styles_scripts() {
    if ( function_exists( 'is_woocommerce' ) ) {
        if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
            remove_action('wp_enqueue_scripts', [WC_Frontend_Scripts::class, 'load_scripts']);
            wp_deregister_style( 'wc-block-style' );
	    remove_action('wp_print_scripts', [WC_Frontend_Scripts::class, 'localize_printed_scripts'], 5);
	    remove_action('wp_print_footer_scripts', [WC_Frontend_Scripts::class, 'localize_printed_scripts'], 5);
        }
    }
}
add_action( 'template_redirect', 'remove_woocommerce_styles_scripts', 999 );

One more tip: Test when you are not logged in. When logged in to WordPress, some additional styles are loaded. Don’t worry about optimizing those as your users (who are not logged in) will not be affected.

After removing the dead styles, you might also want to look into how to minify CSS and JS and improve your page speed even further.