Do you want your WordPress site to load faster for visitors? Removing unused CSS is one of the best ways to optimize site speed.
Extra CSS that isn‘t needed can really slow down how fast your pages load. In this post, I‘ll show you how to easily clean up unused CSS for better website performance.
Contents
Why Unused CSS Causes Slow Page Speeds
First, let‘s quickly cover why unused CSS can hurt your site‘s load times.
When a browser loads a webpage, it needs to build the CSS Object Model before rendering the page content. This model determines the styles that apply to each HTML element.
The browser must process all CSS files from the theme, plugins, fonts, etc before displaying the page. Unused CSS still gets included in the CSSOM and slows down the process.
Here are some of the most common sources of CSS bloat:
- Page builder plugins – For custom page layouts and design elements
- Contact form plugins – To style form fields and submissions
- Sliders and galleries – For image carousels and video sliders
- Social media plugins – To display share buttons and follow icons
So all that extra CSS causes the browser to take longer constructing the CSSOM. This delays how fast the page can be rendered and becomes interactive for the visitor.
Slower page speeds impact your SEO and conversion rates. Google PageSpeed Insights will even show unused CSS as an issue hurting your mobile load times.
Find Unused CSS on Your WordPress Site
You can use Google PageSpeed Insights to find if unused CSS is slowing your WordPress site.
Run your homepage through the free tool. Then look under "Diagnostics" for the "Remove unused CSS" section:
This shows CSS files that aren‘t used on your homepage and can be safely removed to speed up load times.
Now let‘s go over two methods to clean up this unused CSS from your WordPress site.
Method 1: Remove Unused CSS in WordPress with WP Rocket
An easy way to get rid of unused CSS is using the WP Rocket plugin. This is beginner friendly and highly recommended.
WP Rocket not only removes unused CSS, but also optimizes the delivery of your necessary CSS resources. This makes your WordPress site faster for visitors.
Installing WP Rocket and Enabling Remove Unused CSS
First install and activate WP Rocket on your WordPress site.
Then go to the WP Rocket settings and open the File Optimization tab:
Scroll down to the CSS Files section. Check the box to enable Remove Unused CSS (Beta).
This feature will analyze all your CSS and strip out any code not used on the current page.
Click Activate and wait for WP Rocket to enable unused CSS removal.
Optional: Add CSS Exceptions With safelist
In some cases, you may not want WP Rocket to remove certain CSS classes or files.
For example, you have CSS that‘s only used on specific pages. Or custom code for interactive elements like dropdowns.
Adding a CSS safelist prevents files or code from being removed:
This ensures important CSS isn‘t accidentally stripped out by the optimization.
Save Changes and Allow WP Rocket to Finish Processing
Once you have unused CSS removal enabled (and any CSS exceptions added), click Save Changes at the bottom.
WP Rocket will now start processing your CSS files. This may take a few minutes.
You‘ll see a progress bar like this:
When complete, WP Rocket will notify you that unused CSS removal is finished. Your WordPress site is now optimized!
Verify Speed Improvements in Google Page Insights
Go back and re-test your homepage in Google PageSpeed Insights.
Now you should see unused CSS is no longer listed under diagnostics. This means WP Rocket removed all unnecessary CSS! 🎉
But optimizing CSS delivery provides further speed benefits too…
More WP Rocket CSS Optimizations for Faster Page Speed
Removing unused CSS is just one way WP Rocket enhances CSS performance.
It has additional options like deferred CSS loading, minifying CSS, and combining files.
Deferred CSS Loading
Enabled Optimize CSS Delivery to defer non-essential CSS.
This only loads the critical CSS needed to render the initial view. The rest is loaded asynchronously.
By deferring the full CSS, pages render quicker without blocking.
Minify CSS
Turn on Minify CSS files to minify CSS and reduce file sizes.
This strips out unnecessary characters and whitespace to shrink CSS files. Smaller files are faster to load.
Combine CSS Files
Combine all CSS into one file rather than having each one load separately.
Fewer HTTP requests can improve page load speed. Just test carefully first.
Optimizing JavaScript delivery works similarly. Deferred loading, minification, and concatenation speed up JS performance.
Method 2: Remove Unused CSS in WordPress With Asset CleanUp
Asset CleanUp is a powerful plugin to remove unused CSS from specific WordPress pages. But it requires more testing and tweaking.
Install and Activate Asset CleanUp
First, install and activate Asset CleanUp on your site.
Go to Asset CleanUp > Settings and enable Test Mode:
Test mode lets you try changes without affecting visitors.
Manage Loaded CSS and JavaScript
Then go to Asset CleanUp > CSS/JS Manager to view assets loaded on your homepage:
This lists every CSS and JS file your theme, plugins, etc are loading on that page.
Review each file. If you see one that isn‘t needed, click to unload it for just that page or entirely site-wide.
For example, maybe a slider plugin‘s CSS is no longer used. You can unload it:
Repeat this for other unnecessary files or for specific pages.
Remove Unused CSS on a Per Page Basis
Access the Asset CleanUp meta box from the page or post editor.
This shows assets loaded only on that page. Unload CSS no longer needed:
With a bit of tweaking, Asset CleanUp can remove all unused CSS from your WordPress site.
Turn Off Test Mode and Update Settings
When finished optimizing, go back to plugin settings and turn off Test Mode.
Don‘t forget to click Update All Settings to save changes.
Now test your live site to enjoy faster page speeds! 🚀
Key Takeaways on Removing Unused CSS From WordPress
Here are a few closing tips when it comes to eliminating unused CSS and optimizing site performance:
-
Always test your site thoroughly after making CSS changes. Make sure nothing is broken visually.
-
WP Rocket‘s unused CSS removal is safer and beginner friendly. Asset CleanUp is more advanced but customizable.
-
Deferred CSS loading is a powerful technique. Prioritize above the fold CSS for faster rendering.
-
Minify CSS to reduce file sizes, and concatenate files to limit HTTP requests. But test carefully.
-
Removing unused JavaScript is just as important as optimizing CSS delivery for speed.
-
Enabling WordPress caching also helps improve performance by serving cached page copies.
I hope this guide helps you clean up unused CSS and speed up your WordPress site! Optimized CSS delivery really improves page load times and site speed metrics.
