Reduced unused CSS is a common error notice in tools like PageSpeed Insights. This superfluous code, often caused by themes and plugins, needlessly bloats your website’s file size, leading to slower load times and a poor user experience.
As a long-term WordPress user, I’ve seen the negative impacts of unused CSS firsthand. It can seriously slow down pages and increase network data usage, especially for mobile users.
There are many ways to remove unused CSS scripts from a WordPress site, but I will focus on beginner-friendly, most effective methods in this guide.
Also, in this guide, you will learn why unused CSS rules are a performance problem. How to detect it, and the best strategies for removing unused CSS scripts without compromising your website’s functionality.
So, let’s dive in and optimize WordPress CSS for maximum speed and performance.
What is Unused CSS in WordPress?
Unused CSS refers to Cascading Style Sheets code present in your WordPress theme or plugins that is not used to style any elements on the current webpage.
This can happen for several reasons, such as:
Moreover, some plugin functionality is not needed on certain pages, yet it executes sitewide.
An example of such a plugin is Contact Form Builder.
Most websites add contact forms only to the Contact Us page, so loading the contact form CSS script sitewide is unnecessary.
Another example is when a user is on the website’s homepage. The browser doesn’t need to load the CSS rules for styling the blog or Contact Us page.
However, because the Contact Us or blog page’s CSS is in a global stylesheet, the browser will still have to download and render it. This is not only time-consuming but also unnecessary.
You need to optimize the loading of the CSS script so it executes only on the pages where it is actually required.
Why Remove Unused CSS in WordPress?
Unused CSS is a performance killer and can significantly impact your website’s loading speed.
It adds unnecessary weight to your website’s file size, significantly slowing load times. This, in turn, can negatively impact user experience, as visitors are more likely to abandon a slow-loading website.
In addition to affecting user experience, slow load times can hurt your website’s search engine rankings.
Google and other search engines prioritize websites that load quickly, so removing CSS files not used on a page can help improve your site’s visibility in search results.
By eliminating unused CSS rules, you can:
Aside from this fact, fixing reduced CSS warnings has a significant real-world performance impact on First Contentful Paint, Largest Contentful Paint, and Time to Interactive.
Too many unused CSS files loading on a page increases FCP, LCP, and TTI, which are part of core web vitals metrics.
By resolving the unused CSS warning, you should see reduced scores for these metrics in PSI.
How to Detect Unused CSS Styles in WordPress
Several tools let you find unused CSS rules in a URL. Your technical knowledge and comfort level determine which tools you use.
Nevertheless, the most popular tool for detecting unused CSS scripts is Google’s PageSpeed Insights.
Enter the specific URL in PageSpeed Insights and click “Analyze.” Wait a few minutes; PSI will run a comprehensive performance test, both for field and lab tests.
Then, you get the result, as shown in the image below.
Other tools for finding unused CSS include Code Coverage in DevTools, PurifyCSS, and UnCSS.
These tools work differently. So, you need to understand this and know which option is right for you.
For developers, UnCSS seems to be a better option. It lets you manually remove unused CSS styles in your site code. Just paste your HTML and CSS code into the tool and let it do its magic.
Once the process is complete, copy the optimized or used code and go use it.
Pagespeed Insights is the right tool for beginners or those needing automation. It is a simpler way to investigate CSS rules not used on a page.
It pinpoints the CSS files that need to be removed and suggests resources to help you fix the problem.
Removing Unused CSS with WordPress Plugins
Several effective WordPress plugins can help you remove unused CSS and improve your website’s performance.
In my opinion, plugins are the easiest way to reduce unused CSS in WordPress and minimize its risk to the barest minimum.
Plugins automate the process. You don’t need to manually look through hundreds of code lines to pinpoint which unused scripts to remove.
Plus, if you’re a beginner with no coding experience, attempting to do it yourself will be a frustrating experience.
Here are some of the top WordPress plugins to remove unused CSS code on your site:
1. WP Rocket
WP Rocket is a popular premium caching plugin that offers a wide range of features, including the ability to remove unused CSS. The plugin lets you automatically delete unused CSS on your site.
The process is one-click and will remove render-blocking CSS styles on your site.
Undeniably, this is the best solution for optimizing CSS delivery. It improves the user experience and helps your site load more quickly.
The only problem here is that WP Rocket is a paid plugin. There is no free plan. So, you must purchase a license to use WP Rocket to remove unused CSS.
Get the WP Rocket plugin here and follow the next steps.
Once the plugin is active on your site, go to the WP Rocket File Optimization settings Tab.
First, check the Minify CSS files option. This helps remove whitespace, and developers comment on the script to reduce the file size. In turn, it reduces the WordPress database size, improves load times, and improves performance.
Next, scroll to the Optimize CSS Delivery option. This is where you enable the removal of Unused CSS styles from your site. WP Rocket offers two options: Remove Unused CSS or Load CSS Asynchronously.
However, it recommends removing unused CSS for better performance and compatibility.
At this point, WP Rocket will automatically analyze your website’s CSS files and remove any unused styles.
You don’t need to do anything else for the process to work. It automatically works every time you update your site.
Whenever you update content, delete or add a plugin, update themes, etc. The removed CSS files feature will process your site files and eliminate any leftover scripts.
Next, test your site again in PageSpeed Insights (PSI) to see how performance has been improved.
Note: You may see fewer unused CSS errors in PSI because completely removing unused CSS on a site is almost impossible. There will still be some leftovers because of how WordPress works.
Also, PageSpeed Insights will trigger the reduced CSS warning if your page exceeds its acceptable threshold.
However, the impact will be minimal to have any noticeable effect on the real-user experience.
For example, here is a page with a potential saving of 498 KB from unused CSS errors in PSI without WP Rocket. After enabling the Remove CSS files module in WP Rocket, it went down to 33 KB.
Beyond optimizing CSS files, WP Rocket automatically optimizes JavaScript files and critical images in the above-the-fold area of the website. To enable the JS file optimization features, find the settings in the same File Optimization tab.
You can enable the Minify JavaScript files option, Load JavaScript Deferred, and Delay JavaScript execution. These are the settings that work for my blog. Test which option works for your blog, and stick to that.
Each WordPress blog has a setting that works for it. After enabling an option, test your site to ensure it maintains its visual design, loads normally, and nothing breaks.
The WP Rocket Critical CSS image optimization is automatic. It works completely behind the scenes. However, it only applies to images above the fold.
Learn more about how WP Rocket handles critical CSS generation in this guide.
2. FlyingPress
Another helpful WordPress plugin that reduces the number of unused CSS scripts is FlyingPress. You can bet this plugin is extremely efficient at getting the job done quickly.
It has three ways of handling CSS code that isn’t used on a page.
However, FlyingPress is also a premium plugin. You can buy it directly from the developer’s website.
FlyingPress is a full-fledged WordPress performance plugin.
From cache and image optimization, CSS and JS optimization, and Lazy loading to database optimization and bloat removal, FlyingPress ensures your site runs smoothly for real users.
To use FlyingPress to remove unused CSS, first install and activate the plugin.
Go to the FlyingPress setting page and enable the Remove Unused CSS setting. This will open the three settings options:
The FlyingPress unused CSS Remove option delivers the best performance, but it may break your site. So, test your site’s behavior, performance, and visual aesthetics thoroughly if you enable the option.
Beyond the three settings, you can exclude specific stylesheets from the remove unused CSS process. If you have CSS files that are essential to your site’s functionality, enter their URLs or paths in the exclude stylesheet box.
FlyingPress will skip the stylesheet when deleting unused CSS rules on the page. The same goes for CSS selectors that should be included in the CSS files used.
Use this function to force FlyingPress to include the selectors in the used CSS rules.
3. NitroPack
NitroPack is a cloud-based caching and optimization service that can significantly improve your website’s performance.
It offers a beginner-friendly way to delete unused CSS rules on your site.
When you enable the Remove Unused CSS feature in NitroPack, you will have more options to fine-tune the settings. You can optimize further to achieve maximum performance.
Here’s how NitroPack optimizes CSS files and removes unused rules.
First, sign up for a free NitroPack account. Next, download the plugin and connect it to your WordPress site.
Then, go to the plugin’s Cache setting and click the HTML & CSS tab. Locate the removed unused CSS option and enable it.
Enabling the Remove Unused CSS reveals two other settings: Remove duplicates and Inline the final CSS.
Removing duplicates will delete any used CSS rules from the final optimized files generated by critical CSS. This ensures that web browsers do not load unnecessary duplicate CSS rules while rendering the page.
If a CSS rule or files are already loaded in the critical CSS above the fold, NitroPack will delete the same in the final optimized Used CSS files.
Next, the inline final CSS option will add the optimized CSS file to the HTML document. This will reduce file size and improve loading time.
Additionally, NitroPack lets you include/exclude critical CSS selectors from the process. This is handy if you want to keep or remove some CSS selectors from the used CSS process.
After activating these settings, you must test your site’s pages thoroughly to ensure that the NitroPack Removed Unused CSS (RUCSS) features haven’t negatively affect the design or user experience.
Especially if you have popups, embedded signup forms, and other dynamic content on your site.
You can test your site using the Nitropack test mode setting. This feature lets you test the impact of Nitropack on your site in an isolated environment.
In test mode, NitroPack is disabled on the production site, so you can test every feature without disrupting the user experience.
Check the comprehensive guide for more information on using the NitroPack test mode feature.
I covered all the features, pros, and cons, and showed our PSI scores after enabling it on this website in this review of NitroPack.
4. Jetpack Boost
Jetpack Boost is a free plugin that offers several performance optimization features, such as file minification and concatenation.
It also automatically regenerates critical CSS files for above-the-fold content, enabling the browser to render important elements more quickly. When you make changes that affect your site’s HTML and CSS, the files are regenerated, too.
Though these features are not the same as removing WordPress CSS codes that are not needed on a page, the performance benefits are worthwhile.
Jetpack Boost reduces file sizes (CSS & JS) through minification, so they download more quickly during rendering. The concatenation features combine multiple files to reduce network requests.
More on minification, the process strips unnecessary whitespace, comments, and semicolons from the CSS files. This significantly reduces the file size without affecting code functionality. It cleans up WordPress code and improves loading efficiency.
The file concatenation improves optimization further. Let’s say you have 200 CSS & JavaScript files each on your site.
Concatenation will combine, organize, and optimize several of these files, group them by original placement, and reduce the number to the bare minimum.
This process can help drastically reduce CSS bloat. It also has a significant positive effect on core web vitals metrics, such as First Contentful Paint and Largest Contentful Paint.
Minifying and concatenating JS and CSS files makes the first image on the page load more quickly. And the biggest element on the page appears more quickly, too.
If you’re on a tight budget, consider JetPack Boost as one of the best free code optimization plugins for WordPress. Using the JetPack Boost plugin, you can
However, the JetPack Boost Pro plan offers additional features, such as performance history insights, priority support, image auto-resize, image quality control, and more.
Conclusion
Removing unused CSS is a simple yet effective way to improve your WordPress website’s performance.
The fewer your site code, the faster web browsers can download and render the page. This provides users with a better site experience and allows them to interact with elements more quickly.
However, since time is money. The best way to reduce unused CSS styles from a WordPress site is with a plugin.
Unless you have a valid reason to find and delete unused CSS codes manually, there’s no justification for a business owner not to use plugins.
Therefore, I suggest you try WP Rocket, FlyingPress, or NitroPack.
These plugins automatically detect, remove, and optimize CSS styles, ensuring your site’s performance is at its peak.
And they do not require complex configuration. Even if you have never installed a WordPress plugin, you can get any of these plugins to work in under five minutes.
