How To Remove Unused CSS In WordPress

Last updated on May 22, 2022 | By

To remove unused CSS from WordPress, you either use Asset Cleanup, Wp Rocket, or manually with code dequeuing the assets on functions.php.

How to remove unused CSS in WordPress with a free plugin

Asset Cleanup is a free plugin that allows the removal of CSS and Javascript files from the page.

After installing Asset Cleanup, you’re prompt with welcome messages guiding you through the plugin. You can use Asset Cleanup with a compatible cache plugin but avoid enabling overlapping features, which may cause issues.

Some advanced options such as removing hardcoded (non-enqueued) CSS are only available on Asset Cleanup Pro.

To use Asset Cleanup, go to the WordPress page or post page, and you will notice a new button “Manage CSS & JS”, click on it and a new page opens with the css and javascript enqueued files from that specific page.

image 5
A new button on the WordPress interface “Manage CSS & JS”

Remove the unused CSS enabling the “unload on this page” button. Only remove 100% unused CSS files, and after clicking and interacting with all elements on the page.

image 2

To better assist you with removing unwanted css, you can change the assets list layout to “grouped by size”(image below), which will list assets by size. Dequeueing large unused files will have a higher impact on load time.

image 4

Asset Cleanup also offers previews of what your site looks like with a specific asset removed, you can test any combination of removed assets using the “Test Mode“ feature.

image 3

It also offers the logic of removing css/js everywhere(all pages of the website), and removing it on a specific post type, with both options being able to add exceptions(where you want to keep loading it).

Asset Cleanup has a note box where you can write down why you removed that asset from loading.

How to remove unused CSS with Wp Rocket

Wp Rocket recently launched a feature that scans and processes each page and creates an inline optimized CSS, without unused CSS code. It’s still in beta and you may find some issues.

file muZwd1Xy2S

After checking the option, a progress bar will show marking how much time it will last.

file EQa7agdPYJ

After finishing a confirmation will show up.

file oXLjKdzoGK

Unused CSS will be removed from the HTML, and used CSS will be added as inline CSS with the following markup if the Optimize CSS Delivery feature is disabled.

<style id="wpr-usedcss">.css-class{example: 0;}</style>
Press Ctrl+U(Windows) on Chrome and Ctrl+F to find the above code on your page's HTML.

Notice that you need to manually visually test your pages to encounter any visual issues, as this feature is still in beta. We will soon publish a guide on how automatically test your page’s visuals and find errors.

How to remove unused CSS with Wp Rocket Critical CSS

You can also use Wp Rocket critical CSS to remove unused CSS. Go to the file optimization tab and enable “load CSS async”:

image 2

It will then create inline critical CSS for the pages, improving load time.

If you haven’t bought Wp Rocket yet, consider using my reflink.

How to fix CLS(Cumulative Layout Shift) issue caused by WP Rocket Critical CSS

If you are using WP Rocket ‘Optimize CSS’ feature to improve Core Web Vitals and are having CLS issues, you can try the following to fix it:

  1. Add the following code to your WordPress functions.php file, or use a plugin such as Code Snippets to remove the plugin CSS files that are causing the high CLS:
add_filter('rocket_exclude_async_css', function($excluded_files = array()) {
	$excluded_files[] = '/wp-content/plugins/plugin_causing_high_cls/css/style.min.css';
	return $excluded_files;
});
image

This filter may fix Elementor CLS issues when using Wp Rocket’s Optimize CSS feature.

In our tests, we had a custom hook element of GeneratePress causing high CLS when using Critical CSS.

We removed ‘main.min.css’ using the filter and it solved the high CLS while keeping the low LCP from using critical CSS aka Critical Path CSS(CPCSS).

How to remove unused CSS in WordPress without plugin using code

While dequeue using code may be a simple task for developers, creating the correct logic to dequeue the asset to not break things may require attention. In the example, we dequeue the css asset only when the user is logged out, and targeting a specific page.

/**
 * We will Dequeue the Dashicons as an example.
 **/
function wp_remove_unusedcss() {
// check if user is admin
	if (current_user_can( 'update_core' )) {
            return;
        } 
	else {
    // Check for the page you want to target
    if ( is_page( 'homepage' ) ) {
        // Remove Unused CSS
		wp_deregister_style( 'dashicons-css' );
	    }
	}
}
add_action( 'wp_enqueue_scripts', 'wp_remove_unusedcss', 99 );
⚠️ Be careful placing code on functions.php or in the Insert Head and Footer plugin, it can brick your website. Always backup your site before any changes.

How to find unused CSS

Use Chrome DevTools to find unused CSS. Go to the website page you want, click F12 on Chrome(Windows), press Control+Shift+P, start typing coverage, select the Show Coverage, and press Enter to run the command. The Coverage tab opens in the Drawer.

image 11

Click the reload button and start to record your css usage. The page will reload and show your code usage. Click “Filter coverage by type” and choose “CSS” in the dropdown to only show CSS usage.

image 12
Caution: Only remove 100% unused CSS after interacting and clicking on ALL elements on the page. Also only dequeue the CSS from that specific tested page.

Stuck on Core Web Vitals?
Get your site optimized today

Leave a Comment