Using WordPress means working with multiple style.css and JavaScript files not just from your chosen theme but also from plugins you install for the site to look/work better. Sometimes, the impact of unused CSS files on your WordPress website can be very bad. Unused CSS is one of the common issues most websites suffer when it comes to performance and page loading time – it can slow down your website causing a loose performance. You can use WordPress Cache plugins, but recommend you remove unused code, it’s better than cache function.
In this article, we will try to help you by talking about some ways of finding and removing unused CSS.
The best tools to find Used/Unused CSS
You can always manually try to remove unused CSS – if you’re using Google Chrome, the DevTools tab has a tool that detects and allows you to see what code is being executed on a page and what code is unused. Open the Chrome command menu with: cmd + shift + p then type in “Coverage” and click on the “Show Coverage” option. Select a CSS file from the Coverage tab which will open the file up in the Sources tab. All CSS next to a green line means that the code is running, and next to the red means it is unused.
Of course, most developers recommend using some of the tools rather than delete unused CSS rules one by one. And that’s pretty cool. Deleting unused CSS manually can be really hard and boring, so here’s the list of some recommended tools:
1. PurifyCSS
It’s a free tool that removes unused CSS from HTML, JavaScript, PHP and CSS files. You need to specify manually which files need to be scanned, then it outputs a new file with the optimized CSS without modifying your original files. Unfortunately, PurifyCSS doesn’t work with live websites and you only can use it during website development.
2. UnusedCSS
The only thing you need to do with UnusedCSS is to plug your site’s URL into it and let it do its work. It will identify and remove all unused CSS and also it will tell you how much memory you’ve saved. UnusedCSS is free, but you must pay for a monthly membership for downloading your cleaned CSS files. This tool is working only with live websites.
3. PurgeCSS
PurgeCSS works similarly like a PurifyCSS but it’s more sophisticated. It compares your content with CSS files then deleting the ones that don’t match. One of the things you may not like is that you must manually add CSS files not in the specified paths, so it can be pretty hard if your website uses some plugins like HTML Forms.
How to remove unused CSS
For example, Beaver Builder is one of the most used WordPress website builders, and it’s really great. But, it has one problem – it enqueues a lot of unnecessary CSS and JavaScript files your website doesn’t use. This kind of CSS file creates extra requests to the server and as a result, it increases the page loading time. There are many of them, but here’s the list of some common:
- Imageloaded – used to check whether all images are loaded.
- jQuery waypoints – used to reveal elements during the scrolling website (you don’t need it if your website doesn’t have that option).
- jQuery FitVids – if your website doesn’t have any videos, you don’t need it.
- Magnific popup – used for lightbox effect, but many websites don’t need it.
Beaver Builder, fortunately, uses usual WordPress functions to enqueue all scripts, so you can use its other functions to remove them.
You can put functions.php file in your theme’s function. The last number will be a priority for a callback function, and it will be high enough to be higher than other enqueue calls.
Using this hack you’ll be able to remove multiple scripts and styles, so your website will be faster and more lightweight.
Why is unused CSS hard to remove?
One of the reasons why there is a drama about removing unused CSS is so big is because extracting unused CSS from code is not that easy. CSS classes are implemented in JavaScript and it’s very hard to find them.
1. Code-Splitting
The concept of Code-splitting is to split the code into separate bundles, and dynamically load them only when you need it.
There are a few ways you can look at code splitting, you can: split code based on URL routes, so you don’t have to load the code for page 2 on Page 1. Or you can split the large code style.css into multiple files and inject the required files into the respective pages.
Splitting files seems easy, but figuring out which page uses which elements is extremely difficult in WordPress. It’s because all other plugins or custom HTML elements might be using them.
2. CSS that is injected to unwanted pages by plugins
Maybe it’s the developer’s laziness, or maybe it’s a lack of knowledge, but sometimes with plugins, some unwanted CSS and JavaScript files are injected into the pages that might not require them. A good demonstrative example is the Contact Form 7 plugin: it injects CSS and JavaScript files into all pages, but it doesn’t matter if those pages contain a contact form or not.
If you’re a newbie, or you’re just not into all that complicated stuff, try to get help, or simply try to think ahead and avoid this kind of scenario. A good startup strategy is half of a successful website. Of course, if you have a good, reliable hosting provider it’s much easier to prevent and solve any possible problems. There are some really good providers with affordable pricing and optimized WordPress solutions so check it out. Providers usually have online support that can help you with bigger problems, and also some really useful tutorials for solving it by yourself like a pro.
Conclusion
An unused CSS is not the end of your website – it’s a pretty common problem and it’s also pretty easy to solve. Before you use any handy tools that can help you, try to inform yourself just to be sure you pick the right one. If you need any help, ask someone with more experience, or give your trust to someone who will do it instead of you. If you’re looking for Optimized WordPress themes, just take a look via our collection Free WordPress Themes. Good luck!
- Building Value: Essential Strategies for Amazon Business Success - November 18, 2024
- Best MacBook Apps for Students and Professionals - November 5, 2024
- 3Next-Level Features That Will Help Boost Your Ecommerce Website - October 30, 2024
Awesome tips, thanks for sharing!
You’re welcome!
You explained nicely. But it’s too hard for beginner to remove. Now I am ready to operate my wordpress theme. Thanks a lot.
You’re welcome!
Yaa, You are right. Thanks for this Amazing Article!
Thank you!
you explain nice but i cant do that.
What’s your issue?
Remove unused JavaScript, Eliminate render-blocking resources this is a problem.
Thank you sir .
You’re welcome!
Thanks a lot. Really helpful
Thank you!
You have explained perfectly but I don’t see how it’s possible for me right now. I have tried the manual method, it’s even more complicated.
The tools you have listed all have their own limitations…..
Maybe I just have to learn how to use Javascript and CSS
Yes, this is adv task with CSS, so make sure that you already have some knowledge about that.
Very helpful article sir thanks
You’re welcome!
You write “Unfortunately, PurifyCSS doesn’t work with live websites and you only can use it during website development”
There is a web based tool purifycss[.]online that does that. Would you mind updating that, as it might be misleading?
Thank you 🙂
Thank you for your suggestion. That’s also good.
Awesome tips, thanks for sharing!
Thank you!
Hello Very helpful article sir thanks for this
You’re welcome!
Thanks for sharing, this is awesome. Would love to see more of these.
You’re welcome!
You have explained perfectly but I don’t see how it’s possible for me right now. I have tried the manual method, it’s even more complicated.
The tools you have listed all have their own limitations…..
Maybe I just have to learn how to use Javascript and CSS
You’re welcome!
kind an off-topic question but can you suggest to me some tool for the Seo checker. thanks
Take a look for https://ltheme.com/top-best-wordpress-seo-plugin-for-your-site-in-2019/
How to Remove unused JavaScript, Eliminate render-blocking resources this is a problem.
You can follow
– Use the defer and async attributes to eliminate render-blocking JavaScript
– Load custom fonts locally
How Can I Remove Unseen JavaScript, I also use this method but I didn’t. Anyone can help me
What do you mean with Unseen Javascript?
Thanks we find a answer form your conversation,
You’re welcome!
I got a lot of help by reading your post so you can also check my website.
You’re welcome!
I am using wp rocket plugin but it is useless as well in eliminating the render blocking despite of generating critical css.
Thank you, you can try to contact WP Rocket team about this issue.
I clear the cache all things working fine now
Nice to see it!
thank you so much best article to learn something new about unused css js files
You’re welcome!
Ok, thanks for letting us know about it, these information are really awesome
You’re welcome!