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! 

• Author
• Recent Posts

Kelvin

Hello everyone! My name is Kelvin – I’m Founder & CMO at Ltheme. I have more than 10 years in Joomla! & WordPress development, more than 4 years in Digital Marketing, SEO specialist. Everyday I make some blogs for Joomla! and WordPress, support everyone with building beauty websites based on these CMSs, help everyone from Joomla Support Board as Joomla Guru role in forum support.

Latest posts by Kelvin (see all)

• Accessible Web Design Features for Users with Low Vision, Hearing Loss, and Other Disabilities - December 18, 2024
• Top 10 Tools to Elevate Your Service Business - December 17, 2024
• Personalizing Direct Mail for Real Estate: Key Strategies to Increase Relevance - December 2, 2024