🔥 🥳 Get your Wordpress Pagespeed optimized today for $99 🔥 🥳 Conditions apply.

How To Remove Unused CSS In WordPress

Last updated on September 8, 2021 | By

To address Pagespeed and remove unused CSS from WordPress, you either use free plugin Asset Cleanup, paid plugin Wp Rocket, or manually using code dequeuing the assets on functions.php.

How to find unused CSS to remove

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.

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.

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
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.

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.

It also offers the logic of removing css/js everywhere(all pages of the website), and removing 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 on its paid plugin, that scans and processes each page and creates an inline CSS optimized, 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 finished 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.

If you haven’t bought Wp Rocket yet, consider using my reflink for a +10% discount.

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

Get a Core Web Vitals Boost

Send us your request!

Leave a Comment