How to Add Exclusions in WP Rocket Remove Unused CSS?

Though WordPress software comes with lot of features, you need an optimization plugin to speed up the page loading speed. WP Rocket is an aggressive page level caching plugin which also offers a feature for removing unused CSS from each of your page. Removing unused CSS will help to fix render blocking and other CSS related issues in Google PageSpeed Insights tool thus improving your speed score. However, the problem comes when your layout is broken due to missing CSS styles which is common with WooCommerce stores. If you wonder how to exclude CSS, pages or sections of your site from WP Rocket remove unused feature, here are the options for you.

WP Rocket Remove Unused CSS Feature

You can enable this feature under “Settings > WP Rocket > File Optimization > Optimize CSS Delivery” section. Simply select “Remove Unused CSS” button and save your changes. The plugin will automatically start collecting used CSS for each page and store it under “/wp-content/cache/” folder. Later the plugin will inline used CSS in page header from cache thus removing all unnecessary styles not used on the page (but loaded by plugins and theme).

Since WordPress has large number of themes and plugin, removing unused CSS function will tend to break the layout in most cases. All you need is to use one of the below options to add exclusions so that the page can use correct CSS and load properly.

1. Exclude CSS Class and ID

This is the default option offered by WP Rocket. If you notice a page layout is broken, right-click and select “Inspect” option to find the correct CSS class or ID or file that affects the element.

• Go to “Settings > WP Rocket” section in your admin dashboard or got to “WP Rocket > Settings” from top admin menu bar.
• Navigate to “File Optimization” section.
• Paste the CSS class names, IDs or files in the “CSS Safelist” box under “Optimize CSS Delivery” section.
• Scroll down to bottom and click “Save Changes” button.

Make sure to add one item per line with the following formats:

• CSS classes having a dot in front like .my-class.
• IDs having # symbol in the front like #my-id.

2. Excluding CSS Files from WP Rocket Remove Unused CSS

For excluding files – WP Rocket supports multiple file formats with wildcard and you should enter the file URL without the domain name. Let’s say, a plugin function is not working and you want to exclude all its CSS from WP Rocket’s remove unused CSS feature. In this case, you need to find the location of plugin’s CSS folder and exclude with wildcard in safelist as below.

/wp-content/plugins/<plugin-name>/<CSS folder location>/(.*).css

You can use the same structure for excluding theme’s CSS as below:

/wp-content/themes/<theme-name>/<CSS folder location>/(.*).css

Though this is an easy way to fix layout issues, it is NOT recommended. Because this will make WP Rocket to load the entire CSS files in the folder on all the pages of your site as used CSS. This means you will have a huge inline CSS in page header due to file exclusions. Alternatively, try one of the below options if that works for you.

3. Exclude Sections of Your Site from Unused CSS

Let’s say, you have problem with WooCommerce or a custom post type (which is more likely with WP Rocket). Instead of excluding CSS class, ID or file, you can exclude a section to bypass the unused CSS feature only for that section like all product or portfolio pages. This is an effective way as it will not affect the used CSS on other part of your site. However, WP Rocket does not have an in-built option for this and you need a helper plugin to get things done.

The helper plugin comes with some example exclusions with the lines commented. You can either upload the plugin and then edit from WordPress plugin editor or first edit the file locally on your computer to add exclusions and then then upload it on your site. Local editing is recommended especially if you are not familiar with editing PHP files in WordPress admin panel (or through FTP / File Manager).

• Download WP Rocket | Conditionally Disable Remove Unused CSS helper plugin’s ZIP file from GitHub page.

• Unzip the file and open “wp-rocket-conditionally-disable-remove-unused-css.php” file for editing its content. The helper plugin will have only one PHP file, so you will have no confusion.

• Check line items 35 to 47 which are commented by default. You can see some default exclusions like /product, /tag, /category and /size.

• Simply edit the exclusions and add the section names that you want. For example, for you can exclude portfolio section by changing /product with /portfolio. You do not need to add the trailing slash / in the name.
• Add all your exclusions by duplicating the strpos( $url, '/product' ) !== false    || line and make sure to delete unnecessary sample lines. Remember, the last item should not have the double pipeline || symbol at the end.
• Next, remove the comment marks /* and */ from line 35 and 47 and then save your file.

• Now, archive your PHP and readme files as a ZIP file like before.
• Go to “Plugins > Add New Plugin” menu in WordPress admin panel and click on the “Add New Plugin” button.
• Upload your ZIP file to install the plugin and activate it.

Clear your cache and used CSS from WP Rocket menu in top bar for the changes to take effect.

4. Exclude Single Page from Unused CSS

This is the final and best option if you have problem with one or two pages on your site.

• Make sure you have enabled remove unused CSS feature from WP Rocket settings.
• Go to Posts or Pages or your custom posts section and edit the item you want to exclude.
• Check “WP Rocket Options” meta box in the sidebar and uncheck “Remove Unused CSS” box.
• Click “Update” button and the page will not use remove unused CSS feature of WP Rocket plugin anymore.

Not seeing WP Rocket meta box in editor? Check this article on how to enable missing meta boxes in Gutenberg editor.

Final Words

Other than caching, remove unused CSS is the prominent feature for using WP Rocket. On the name of simplicity, the feature does not have any customizations. You can’t pause or control the job running from collecting your CSS and can’t exclude sections from safelist. It is easy to exclude CSS classes, IDs and files by adding them in safelist or page level exclusion is possible using the plugin’s meta box in editor. However, you need a helper plugin for excluding sections of your site.