How To Remove Unused CSS In Wordpress

To address Pagespeed’s “remove unused CSS” from Wordpress, you either use Jetpack Boost, Asset Cleanup, Perfmatters, or Wp Rocket.

With Wp Rocket, you can either use the “Remove Unused CSS” feature, which strips unused CSS but may cause issues, especially with page-builder plugins, or use their “Critical CSS” feature that inlines critical CSS and solves the Pagespeed issue.

What defines what plugin/solution you will use may depend on your theme. Use Critical CSS if you’re using page builders to avoid CLS issues.

Remove unused CSS with a free plugin

Jetpack recently launched Jetpack Boost. It generates inline Critical CSS for your homepage, posts, and pages.

The plugin also offers the “Defer Non-Essential Javascript” feature which moves non-essential JS to later load, and image lazyloading. 

Install Jetpack Boost and enable the critical CSS feature. It may take a while, and once it finishes a message with how many pages it generated and the time ago will be logged.

Jetpack Boost does not require a wordpress.com login as it does with the main plugin Jetpack.

Jetpack works with static page cache plugins, such as WP Super Cache or W3 Total Cache. In our tests using Jetpack Boost with Wp Optimize, we had positive results.

Remove unused CSS with Wp Rocket

Wp Rocket recently launched a feature that scans and processes each page and creates an inline optimized CSS, removing unused CSS.

You may prefer Wp Rocket’s “Critical CSS” feature if you’re using a page builder or a slow-loading theme. Check the guide below for it.

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

After finishing a confirmation will show up.

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.

You may need to manually visually test your pages to encounter any visual issues.

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”:

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

Remove unused CSS with Perfmatters

You can use Perfmatters with a cleaner interface to remove unused CSS from loading.

Perfmatters 20% OFF Coupon: WPALPHA

Remove unused CSS with Asset Cleanup

Asset Cleanup is a free plugin that removes CSS and Javascript files from the page.

After installing Asset Cleanup, you’re prompted 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.

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

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.

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.

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 without a plugin

While dequeuing 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 );

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 Show Coverage, and press Enter to run the command. The Coverage tab opens in the Drawer.

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.

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.