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:
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.
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
- 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?
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
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.
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!