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 from when it comes to performance and page loading time – it can slow down your website and hurt its performance. You can use WordPress Cache plugins, but we recommend removing unused code; it works better than caching.
In this article, we will help you by covering 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 a red line means it is unused.
Of course, most developers recommend using some of the tools rather than deleting unused CSS rules one by one. And that’s pretty cool. Deleting unused CSS manually can be really hard and boring, so here’s a list of 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 can only 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 it will also tell you how much space you’ve saved. UnusedCSS is free, but you must pay for a monthly membership to download your cleaned CSS files. This tool only works with live websites.
3. PurgeCSS
PurgeCSS works similarly to PurifyCSS, but it’s more sophisticated. It compares your content with CSS files and then deletes 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. These files create extra requests to the server and as a result, it increases the page loading time. There are many of them, but here are some common ones:
- Imageloaded – used to check whether all images are loaded.
- jQuery waypoints – used to reveal elements as the visitor scrolls (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 standard WordPress functions to enqueue all scripts, so you can use other WordPress functions to remove them.
You can put the code in your theme’s functions.php file. 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 removing unused CSS is such a big deal is that extracting unused CSS from code is not that easy. CSS classes are also used in JavaScript, and it’s very hard to find them.
1. Code splitting
The idea of code splitting is to split the code into separate bundles and load them dynamically only when you need them.
There are a few ways to approach 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 a large 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. That’s because other plugins or custom HTML elements might be using them.
2. CSS injected into 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, whether or not those pages contain a contact form.
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 problems yourself like a pro.
Conclusion
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, do some research to be sure you pick the right one. If you need any help, ask someone with more experience, or hire someone you trust to do it for you. If you’re looking for optimized WordPress themes, just take a look at our collection Free WordPress Themes. Good luck!
