WP Rocket is the most popular caching plugin for WordPress sites. Being a premium only, they support more than 2 million websites to speed up and improve page loading time. Once installed and activated on your site, the plugin will automatically cache the content and reduce lot of manual work required on configuration. However, remove unused CSS is a function which can create problems for you. If you stuck up and not able to use remove unused CSS function, here are some ideas you can try to fix the issue.
Understanding Used and Unused CSS
Earlier days, the speed optimization was primarily focusing on JavaScript files that delay page loading. However, things are completely changed with Google’s Core Web Vital and the focus now is to improve the user experience which ultimately should lead to improved speed. To do this, you have to optimize above the fold content on each page of your site by removing unnecessary code needed for loading below the fold content.
For example, you may have a beautiful newsletter widget showing at bottom your pages. But the plugin or theme you use for this widget will load the CSS files needed in header section of your page. It was fine traditionally as CSS files are always included in the header section. Now, focused on user experience, Google PageSpeed Insights will warn you that you have unused CSS on initial loading of the page. The problem is that you need a developer or backend skill to manually analyze above the fold area and defer unused CSS to load later. This will be more complicated when you have different page layouts like posts, pages, WooCommerce products and custom post types. You have to analyze each single page on your site to remove unused CSS and WP Rocket exactly does that with few clicks from your admin dashboard.
Benefits of Removing Unused CSS
It simply reduces the CSS files and hence the page size with reduced HTTP requests to your server. Besides that, removing unused CSS will help to fix the following items in PageSpeed Insights tool.
- Reduce unused CSS
- Remove render blocking resources
It can also help to improve loading largest contentful paint faster with the smaller above the fold styles.
Remember, removing unused CSS essentially means collecting and keeping only used CSS on each page. So, do not confuse with the terms “used” and “unused”.
How to Fix WP Rocket Remove Unused CSS Function Not Working Issue?
To remove unused CSS, go to “Settings > WP Rocket > File Optimization” section. This section contains two sub-sections for optimizing CSS and JS files on your site. Scroll down a bit and check “Optimize CSS delivery” section in “CSS Files” section. You will find two button to optimize the CSS delivery and only one option can be used at a time.
- Remove Unused CSS – we will focus on this option.
- Load CSS Asynchronously – this is to generate critical CSS for your pages. Learn more about this in our article on how to generate critical CSS in WordPress.
You can select “Remove Unused CSS” button and scroll down to bottom to save your changes. Earlier, the plugin used to show the progress as shown below.
Now, you will NOT see any progress bar, the plugin will first generate the used CSS for the home page and then process every 100 URLs per 60 seconds.
You will see the message in the dashboard indicating the service is running and processing your page.
With the version 3.11.x, WP Rocket guys made changes to the way remove unused CSS works and messed with action scheduler and logs of WooCommerce. This will make the action scheduler tables to grow in size in terms of GBs. You can update to their latest version to fix this problem and delete the unnecessary table entries manually.
Problems in Removing Unused CSS with WP Rocket
There are three major challenges you may face or need to understand when using this feature in WP Rocket:
- First problem is that many times the progress bar will stuck at middle and the process will never finish. Since this is a background process, it continues to run even if you navigate away from the settings page. With the latest version, there will be no indication to users that the process is completed. We have checked with Google PageSpeed after few days and still found the warning is showing while WP Rocket has no message whether it finished the job or not.
- Secondly, after successfully building used CSS styles, you may find the layout is suddenly broken. This happens due to manual changes you do on the site or the automatic action from WP Rocket itself.
- Third, the WP Rocket tables (as mentioned in point 5 below) will continue to grow big even with the latest version of the plugin.
- Lastly, few specific elements break and other parts load properly. You can add the CSS selectors or stylesheet URLs for those broken elements in the exclusion list to fix the issue.
Let us explain all possible cases covering the above two issues along with possible fixes.
1. Slow API Response
WP Rocket uses their cloud server to run removing unused CSS process with API calls. It’s really a complicated process and the summary is as below:
- Collect all CSS / JS file from each of your page (100 pages per 60 seconds).
- Send to their cloud server for processing the files and identify CSS selectors using an API call https://saas.wp-rocket.me/.
- Collected CSS styles will be compared with HTML of the page and classified as used or unused.
- Store the API requests and responses in database table (wpr_rucss_used_css) and save the used CSS in server (/cache/used-css/1/).
- Finally, used CSS will be retrieved inline to fix the PageSpeed Insights issue.
Therefore, it may take long time to finish the process when you have thousands of pages and different post types. You can see the progress in wpr_rucss_used_css table’s “Status” column. Sometime, their cloud service will never respond leading to the process not completed and the status in this case will be stored as “Failed”. After three attempts, WP Rocket will ignore these failed entries and will process only when you clear unused CSS and rebuild again. In addition, your request will be submitted in the queue and the time taken depends upon the number of requests already processed in the queue. As mentioned, WP Rocket supports more than 2 million sites and the used CSS generation process automatically runs after 30 days on each site. Hence there are possibilities your request is in the queue and takes long time (status will show as in-progress or pending in table).
What you can do here is to simply disable the option and save your changes. Wait for some time and try again to see if that works. Avoid, continuously toggling this feature to prevent sending multiple requests to the processing queue. It will only delay the process further and will not help you to finish quickly. As mentioned, now they control this schedule by automatically processing 100 URLs per 60 seconds. However, there are no stopping from the user end to toggle the feature on or off. So, avoid toggling this on and off and wait for some time to check the results.
2. Allow WP Rocket IP Addresses
WP Rocket cloud server IP address is 135.125.83.227. In rare situation, you might have blocked this IP which will fail the CSS generation process. Remember, you can block the IP range like 135.*.*.* or 135.125.*.* or 135.125.83.*. In all these cases, the process will fail and you need to remove the IP blocking to access their server.
3. Enable Cron Job
As mentioned, remove unused CSS process will run in background using the default WordPress cron job (WP-Cron). The process will run after 60 seconds when someone visits the page and every 30 days automatically to rebuild the used CSS styles. All these use WP-Cron and make sure you did not disable this feature on your site. Many users and developers disable the default WP-Cron in WordPress as it can slow down the admin section. In this case, you can setup your own cron job on the server side to make sure it can be used by WP Rocket.
If you are confused, there is a WP-Cron Status Checker plugin which can help you to notify cron is not working on your site. This plugin will run every 24 hours to check the status of WP-Cron running on your site. You need to understand the frequency of Cron job will affect your CSS generation process. When you suspect cron is not running on your site, first make sure it works before trying to enable remove unused CSS option in WP Rocket plugin’s settings page.
You can also consult with your hosting company to confirm WP-Cron is running and not disabled on your site. If you are using Cloudflare, learn more about fixing WP-Cron issues with Cloudflare.
4. Clean Used CSS After Update
When you initiate the process, WP Rocket will immediately start showing a new menu item for clearing used CSS. You can see this from your top admin bar under “WP Rocket > Clear Used CSS”. Clicking on this menu will delete all stored used CSS styles from your server’s cache folder.
- You should delete used CSS when changing theme, installing additional plugins that add styles, when manually adding CSS using theme panel or customizer. Otherwise, you will see the layout is broken indicating your used CSS is not working. In this case, CSS generation will automatically run and there are no options for you to verify whether it is completed successfully or not. So, make sure to test your site frequently when using remove unused CSS option in WP Rocket. Otherwise, suddenly the layout will break due to your actions or automatic CSS rebuild from WP Rocket plugin.
- When you stuck while generating CSS (based on database table status or errors in Google PageSpeed), first clear your used CSS and disable optimize CSS delivery option. Verify the above points 2 & 3 and wait for some time before retrying. Though it may take additional time to build the CSS again, it helps to confirm there are no problems from your side.
5. Empty Backend WP Rocket Tables
Simply enabling remove unused CSS function in WP Rocket does not end there. It can create problem anytime with updates where you can use “Clear Unused CSS” and rebuild the used CSS as explained in above point 4. However, the problem can happen due to the large backend tables that WP Rocket creates. WP Rocket will create two database tables which you check by using phpMyAdmin, Adminer or any other database management tool.
- wp_ wpr_rucss_resources – all CSS and JS files (WP Rocket checks and remove unused CSS from this table once in every 30 days)
- wp_wpr_rucss_used_css – used CSS
Resources table can be of large size when your theme or plugins use many CSS and JS files. Similarly, used CSS table can grow quickly when you have separate cache enabled for mobile devices. The larger size of the tables will directly affect the performance of your site though you will not see reduce unused CSS warning in PageSpeed. You can check out the issue opened in GitHub for this topic. Below is one of the complaints registered there, mentioning the DB size went from 8MB to 800MB due to this problem.
The problem can happen due to page builder plugins like Elementor, dynamic advertisement scripts and themes using custom CSS for individual pages. The solution here is to disable dynamic content on individual pages or manually empty the database table so that the plugin will rebuild again. You can simply click “Empty” option in MySQL database table and confirm the pop-up to delete its content.
Note that WP Rocket will not delete these table entries when you deactivate remove unused CSS feature from the settings. Check our article on how to clean up the mess left over by WP Rocket plugin if you decided to delete it from your site.
6. Check Your Security Plugin
Your security plugin can block WP Rocket server when trying to enable remove unused CSS feature. Generally, security plugins apply firewall to protect the site from malicious attacks. It could potentially block WP Rocket and halt the used CSS generation process. Therefore, when you find the remove unused process does not work, disable your firewall settings and check again. If that works, then you can whitelist WP Rocket services in your firewall settings.
Plugins like Wordfence offers a learning mode to run any desired actions so that the plugin will learn and do not block the requests when you later enable firewall setting. However, the process could differ based on the security plugin you use and you may need to consult with the plugin developer for fixing firewall issue.
7. Use CSS Safelist
This is a different issue as the process will complete in the settings page but your site’s layout will be broken due to removing CSS styles. For example, WP Rocket will break data tables with search and filter functions when you remove unused CSS.
- In this case, right click on the page and inspect the broken element in Developer Tools.
- Find the CSS stylesheet that is required for the element.
- Paste the URL of the CSS file by excluding the domain name.
- Save your changes and regenerate used CSS.
Let’s say, you find the following URL is causing issue:
https://yoursite.com/wp-content/plugins/my-plugin/css/123.cssYou need to enter the below URL in the CSS safelist box:
/wp-content/ plugins/my-plugin/css/123.cssIt is also possible to wildcard like below to exclude all CSS files in the folder from removing style.
/wp-content/plugins/my-plugin/css/(.*).cssFinal Words
WP Rocket guys heavily promote their plugin saying it will help to improve Core Web Vitals and PageSpeed Insights score. You can get a good score primarily by removing unused CSS, delaying JS and lazy loading media files. However, what they will not tell you is that they will not support you when there are problems. Especially, you will run into problems with such a complicated logic behind “Remove Unused CSS” function. This feature was also in beta level for years without cautioning about building huge database tables. If you are stuck, try the above fixes and check whether it helps. Otherwise, you need to login to your WP Rocket account for raising a ticket and wait for few days to get response from them. In simple words, you need to disable the feature and try “Load CSS Asynchronously” or look for alternate options till the time you resolve the issue.
If this is the only feature you want to purchase WP Rocket plugin, probably you can check alternate plugins like Perfmatters. Though the process is same with Perfmatters, it does not use database tables and completely stores the cache in a separate folder.
1 Comment
Leave your reply.