How To Remove Unused CSS In Wordpress

pattern 25

Boost your website speed & performance.

*No spams

To remove unused CSS from Wordpress, you either use Jetpack Boost, Asset Cleanup, Perfmatters, or Wp Rocket.

With Wp Rocket, you can either use “Remove Unused CSS” 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.

How to remove unused CSS in Wordpress with a free plugin

Jetpack recently launched Jetpack Boost. The plugin generates Critical CSS for your homepage, posts, and pages. What Critical CSS does is that it creates an inline critical CSS of your website.

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

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

image 15

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.

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. You may prefer Wp Rocket’s “Critical CSS” feature if you’re using a page builder or a slow-loading theme.

remove unused css

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

progress bar remove unused ss

After finishing a confirmation will show up.

remove unused css wp rocket

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.

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

If you are using WP Rocket’s ‘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 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.

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

Remove unused CSS Perfmatters

You can use Perfmatters with a cleaner interface as an alternative for Asset Cleanup:

Perfmatters 20% OFF Coupon: WPALPHA

image 2
Perfmatters Remove Unused JS interface

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.

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.

Get your WordPress Unused CSS removed and your Core Web Vitals Optimized!

guest

0 Comments
Inline Feedbacks
View all comments