Are you willing to remove Unused CSS in wordpress so that your webpage can load faster?
CSS in WordPress is CSS code that loads on your website but isn’t actually needed in order to display the page. CSS code improves WordPress performance and user experience.
So we’ll show you how to easily remove unused CSS in WordPress without breaking your website.
What is Unused CSS in WordPress?
Contents
Unused CSS is a CSS file that is present in a page but is mostly not needed for the page to load. When a visitor opens a website, the browser typically has to download, parse, and process all external stylesheet on the visited page before it can display the page content to the visitor.
This is added by your WordPress theme or plugins that you don’t really need.
You can see how unused CSS code is affecting your website by using Google Pagespeed Insights. It will show you a section titled ‘Remove unused CSS’ with details of which CSS files are affecting your loading times.
Why Is Unused CSS Added in WordPress?
Most of the time, CSS is used to style the appearance of your WordPress website. Your WordPress theme includes CSS, with most of it included in a single style.css file. In addition to your theme’s CSS, your WordPress plugins will also load their own CSS. For example, MonsterInsight will load more css file tp style your website. You also have your web fonts, icon fonts, and other elements that will need to add their own CSS files as well.
How to Identify Unused CSS?
Finding unused CSS and JS is a very easy thing to do.analyze your website through Google PageSpeed Insight. Check if your website has a remove unused CSS issue. Click on it and you will be able to identify the component of your site responsible for it, like the image above.
So let show you two methods to remove unused CSS, and you can choose the one that works best for you.
Easy Way Remove Unused CSS in WordPress
There are different methods in removing CSS in WordPress, but we recommend the easier way for beginners, This method not only remove CSS, but also improve overall delivery of CSS files on tour WordPress site.
Remove Unused CSS in WordPress using Asset CleanUp
Asset CleanUp scans your page and detects all the assets that are loaded. All you have to do when editing a page/post is just to select the CSS/JS that are not necessary to load, this way reducing the bloat.
Note: It is a bit complicated and you will need to test your website functionality and appearance thoroughly to make sure nothing is broken.
It has a lots of benefits including;
- Decreases the number of HTTP requests loaded and eliminate render-blocking resources by unloading useless CSS/JS
- Preload CSS/JS, Local Fonts & Google Fonts files to instruct the browser to download the chosen assets as soon as possible
- Minify CSS files
- Minify JavaScript files
- Combine remaining loaded CSS & JavaScript files
- Inline CSS Files
- Defer combined JavaScript files by applying “defer” attribute to the SCRIPT tags
- Site-wide removal for Emojis, Dashicons for guest users and Comment Reply if they are not used
- Reduces the HTML code of the actual page
- Makes source code easier to scan in case you’re a developer and want to search for something
- Remove possible conflicts between plugins/theme
- Better performance score if you test your URL on websites such as GTmetrix, PageSpeed Insights, Pingdom Website Speed Test
- Google will love your website more as it would be faster and fast page load is nowadays a factor in search ranking
- Your server access log files will be easier to scan and would take less space on your server
You need to install and activate the Asset Cleanup plugin. For more details, see our step by step guide on how to install a WordPress plugin. After activation you need to visit the Asset CleanUp » Settings page and switch to the Test Mode tab. Then ‘Enable Test Mode’ option.
After ‘Enable Test Mode’, you need to visit the Asset CleanUp » CSS/JS Manager page. From here, you can unload unwanted CSS and JavaScript files on a page by page basis.
It will first fetch your homepage and will show you all the CSS and JavaScript files loaded on that page.
You need to scroll down and review the loaded files. If you see a file that you don’t need, then you can unload it for that particular page, post type.
The plugin also allows you to choose specific posts or pages from here, or you can access the same options by editing the post or page as you normally would.
On the post edit screen, you’ll find the Asset CleanUp box just below the post editor.
The plugin will automatically fetch and list all the files and assets loaded when a visitor views this page on your website. You can then simply unload the unused CSS or JavaScript files that you don’t need on that page.
Once you are done unloading and removing unused CSS and JavaScript files, you can go to back to the plugin’s settings page and switch off the ‘Test Mode’.
Don’t forget to click on the Update All Settings button to store your changes.
Remove Unused CSS in WordPress using WP Rocket
For fast loading and speed, we recommend wp rocket. WP Rocket is a cache plugin for WordPress. WordPress experts recognize it as the most powerful caching tool, I mean very powerful to speed up your website. WP Rocket caching ensures websites will load blazing faster than your competitor, which is essential to improve SEO rankings and increase conversions rate. It greatly improves the overall delivery of CSS files on your WordPress website, including removing most of the unused CSS.
First, you need to install and activate the WP Rocket plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you need to visit the Settings » WP Rocket page and switch to the ‘File Optimization’ tab.
scroll down to the CSS files section. From here, you need to check the box next to the ‘Optimize CSS delivery’ option.
This option generates a CSS file that only contains the CSS code needed to display the visible part of your website. It loads that file first, displays the page to your visitors, and then loads other CSS files using a technology called deferred loading.
By removing this render-blocking CSS, your website becomes viewable to users much more quickly than it would if you had to load all the CSS files before the page is displayed.
After enabling the ‘Optimize CSS delivery’ option, click the Save Changes button and wait for WP Rocket to generate the necessary CSS file for all your posts and pages. It will also automatically clear the cache for your website.
Once finished, you can go ahead and test your website performance again using Google Pagespeed Insights.
We hope this article helped you learn how to easily remove unused CSS in WordPress. If you liked this article, then please like our page on Facebook so we can get you more information about it.