![How To Remove Unused CSS in WordPress – Safest Way [2024]](https://i0.wp.com/secure.wphackedhelp.com/blog/wp-content/uploads/2022/04/How-To-Remove-Unused-CSS-in-WordPress-Safest-Way-2022.png?resize=485%2C270&ssl=1)
Remove Unused CSS in WordPress
Table of Contents [TOC]
Do you want to know how to remove unused CSS entirely, or find out how much CSS file size can be reduced?.
Well, you may have encountered the “Remove unused CSS” warning when analyzing your WordPress site through Google PageSpeed Insights.
Many WordPress themes and plugins come loaded with tons of CSS code. However, a lot of this CSS code is not actually used on your site. This unused CSS slows down your website, which reduces user experience and hurts your SEO.
In this article, we will show you how to easily remove unused CSS in WordPress to speed up your site.
People Often ask
- How do I manually remove unused CSS from WordPress?
- How do I remove unused CSS?
- How do I remove CSS from WordPress?
- How do I reduce unused CSS and JavaScript in WordPress?
- How do I minify CSS and JS in WordPress?
So, if you want to create a better experience for your visitors, improve wordpress speed, and get more conversions — fix the issue and remove unused CSS.
But how do you find out how much CSS is actually used on your website? And what’s the easiest way to remove unused CSS?
We’ll show you how to use Chrome DevTools to find out what styles are used above and below the fold, and how to quickly remove them. Also, we’ll list two tools that help you find out how much CSS file size can be reduced.
Removing unused CSS can be a time-consuming process. It involves going through every line of CSS, looking for selectors that don’t exist in the HTML document and removing them.
Before we start removing unused CSS from style sheets, let’s understand what is unused CSS and why is it there in the first place.
Also Read – 11 Best WordPress Image Optimization Plugins 2024 [GUIDE]
What is Unused CSS in WordPress?
Unused CSS or redundant code occurs when a website’s stylesheet contains selectors and declarations that aren’t used on the page. It might be accidental or intentional.
Unused CSS is a common problem. A few years ago, we analyzed the top 1k websites and found out that their average size of unused CSS is over 500 KB (or over 80% of all the styles). The same report shows that about 28% of websites have more than 1 MB of unused CSS, which slows down their loading time.
If you’re not using a custom theme/template, chances are you’re using a theme/template designed to offer multiple layouts and different HTML elements like:
- full width
- Left sidebar
- Right sidebar
- Custom post types
- the tables
- Search bar
- Shapes
- Navigation menus
- Authors biography
- And what not!
When theme developers design a theme keeping in mind a large group of users who need different functionality, most developers write all style codes in a single CSS file called styles.css.
Also Read – 12 Best WordPress Staging Plugins To Create A Test Site [2024]
The problem here is that no matter what features/elements you use on your site, the CSS code written for all features/elements is served to your visitors.
It’s the unused CSS!
Unused CSS is code written in the style sheet(s) of the website but not used/used to style any HTML element or part of the website.
You can improve your website’s page speed performance by removing this unused CSS.
How to identify unused CSS and JavaScript?
You need to figure out what is causing your sites to load unnecessary resources. Several simple assumptions, such as a contact form, online store, or review plugins, are not required on all sites. The task, however, is more difficult than you might imagine.
First, clear caching and disable the caching plugin on your site. Now go to the Google PageSpeed Insights tool and check the speedometer.
To expand the posts, click Remove Unused JavaScript and Remove Unused CSS. All URLs that can be removed from the page will be displayed by Google.
Plugins for advertising, analytics, YouTube video embedding and social media are used to add these scripts to your site. Therefore, you should be aware that these external resources will impact your page speed, and you will have no control over them until you want to remove them.
Embedded CSS and scripts – these are not displayed in the PageSpeed tool. You will have to manually find and remove them from your website.
Disable plugin files if the plugin adds CSS or inline script. Remember that heavy themes with hundreds of style.css lines have a lot of problems.
To reduce the file size, manually remove the code from the style.css file.
Therefore, if loaded as separate files, unused CSS and JavaScript can be easily uninstalled. Loading a large style.css file or inline CSS can only be removed if you manually review them and remove unused codes. Alternatively, you may need to search for a lightweight theme or plugin to fix the issue.
You can re-enable the cache plugin on your site once you identify the source of the problem.
Also Read – Best WordPress Security Scanner Tools To Scan For Vulnerabilities
Using Asset CleanUp plugin
If you have uploaded a lot of plugin and theme files, remove them from sites where you don’t need them by following the instructions below.
Login to your WordPress admin panel and navigate to “Plugins – Add New” .
Type “Asset Cleanup” in the search field and find the “ Asset Cleanup: Speed up loading pages ” plug-in.
Install and activate the plugin.
We recommend that you read the attached documentation after activating the plugin. This is required for the plugin to work properly.
Plugin Settings
We won’t go through all the plugin options in this article. If you’re using a caching plugin on your site, such as WP Rocket, make sure you’re not using any other functionality besides eliminating unnecessary scripts and CSS.
Go to Asset Cleanup > Preferences > Plugin Usage Settings. You can select how to show and disable unnecessary CSS and scripts in your pages from this menu.
Manage in Dashboard – enable this option. This will help you analyze the page from the admin panel post editor.
Front end check – enable this option if you want to parse the page from an external browser. You can turn it off if you don’t want to use it. Keep in mind that only a registered user with administrator access can perform external analysis. During the payment process, your site visitors will not be harmed.
Asset List Layout – Select All Styles & Scripts > Grouped by Location from the drop-down menu (Themes, Plugins, Core & External). This will allow you to browse resource files organized by category.
Hide main WordPress resource list file? – Activate this option to prevent the main WordPress files from being modified.
Now go to the Test Mode tab and select Enable Test Mode from the drop-down menu. This will allow you to recheck if the site is down after disabling scripts and CSS before making it public.
Click “Update all settings” at the bottom to apply the changes.
Also Read – Best WordPress Security Plugins To Secure Your Site in 2024
Why Unused CSS is Bad for Your Website?
Every website has a certain amount of unused CSS. It’s added by your WordPress theme or plugins that you don’t really need.
Unused CSS is bad for your website because it makes your WordPress site slow and negatively impacts user experience.
A slow loading website can cost you money, traffic, and search engine rankings. It will also make your visitors unhappy.
That’s where the unused CSS code removal tool comes in handy. It helps you remove all the extra bloat from your website which improves performance and enhances user experience.
Unused CSS uses resources (bandwidth, server, etc.) aimlessly.
It also contributes to the load time (site speed) of your site. This means that unused CSS reduces the speed of your site.
The importance of site speed cannot be stressed enough. Site speed can make or break your site. Therefore, you should remove any unwanted elements to make your site lighter.
Unused CSS affects loading time and specific metrics such as the Largest Contentful Paint (LCP) and the Total Blocking Time (TBT).
Both LCP and TBT play a crucial role in the PageSpeed Insights score: each of them holds 25% of the final PSI score
Also Read – 40 Most Common WordPress Errors & Issues – 2024 [UPDATED]
Issues While Deleting unused CSS
Removing unused CSS isn’t that easy, here’s why.
Single CSS file
In most themes/templates there is only one main CSS file. This single CSS file contains CSS code for all types of pages, elements, and layouts.
This causes a problem when trying to identify unused CSS on a website.
For example:
- When you test your homepage through the Unused CSS Detection Tools given below, all CSS relating to inner pages, layouts, and elements will be detected as “unused” by the tool. This is somewhat true for the homepage – since those CSS selectors/classes aren’t used on your site’s homepage.
But such CSS is not completely unused on your site.
This means that you should test your site for every possible page, layout, element that uses unique CSS to detect all unused CSS.
Sounds tedious, doesn’t it!
Also Read – WordPress Hacked – How to Secure Your Website From Hackers
Dynamic elements (JS inserted CSS)
Consider a scenario where JavaScript is used to trigger/launch a dynamic page element like a search box, overlay notifications, etc. In this case, JS may contain CSS classes and other HTML tags used for dynamic elements.
These classes (inside the JS) are not easy to detect and therefore make it difficult to extract unused CSS correctly.
CSS inserted by plugins
Plugins, add-ons and extensions, etc. can insert CSS into a CMS like WordPress and others.
Ideally, CSS and JS should only load on pages where they are used.
Some WordPress plugins insert CSS (and JS) into all pages of the website regardless of their use on specific pages.
These WordPress plugins contribute “unused CSS”. You can offload that unwanted CSS and JS on specific pages using a simple plugin.
Also Read – Steps To Remove Malware From Your WordPress Site
How to remove unused CSS from CSS files?
This method is useful for HTML sites and websites without dynamic elements.
Before making any changes to your site’s code, learn how to make a full backup of WordPress Database Manually & With Plugins. So that you can restore your site, if necessary.
Step-by-step process to remove unused CSS:
- Choose one of the tools mentioned below.
- Generate used/unused CSS for your site.
- Manually remove unused CSS from stylesheet files.
- Save changes.
- Test your site again to see the changes.
You can use any of the following tools to find unused/used CSS on your website.
Remove (Reduce) Unused CSS – Tools / WordPress Plugin
Use Chrome Dev Tools: to find unused CSS
Here are the steps to find unused CSS using PageSpeed Insights and the Coverage tab in Chrome DevTools.:
- Open your website in a private browsing tab of Google Chrome.
- Access the Chrome Developer Tools by following the Chrome menu > Developer Tools. Or press on Ctrl + Shift + IWindows ( Command + Shift + Ion Mac).
- Press Ctrl+Shift+P to run the command. And then type Cover and click Show Cover.
- A coverage tab will open in DevTools showing all CSS files with their used/unused statistics.
- Click on the CSS file to visually check the used and unused CSS code . Where ” red ” indicates unused and “blue” (sea green) indicates CSS used.
- You need to check your site’s various page templates to fully detect unused CSS (or let’s say up to a maximum). These page templates can be – home page, single page/post, archive page, search page, 404 page and to watch list depending on your site design.
You can easily find unused CSS using the Google Chrome Developer Tools as explained above.
Also Read – How to Fix Error Establishing a Database Connection in WordPress?
UnCSS online
Unused CSS Online is a free online tool that generates a minified version of used CSS. on github
You must enter your HTML and CSS in the text boxes provided for them in order to generate a version of the CSS used.
Unused CSS
Unused CSS is a SAAS (Software as a Service) tool. It identifies unused CSS on a website by analyzing it. The tool also tells you how much you can save by removing unused CSS from your site.
You need to add your website to their platform to start finding unused CSS. Once a website is added unused CSS, it will scan the website to find the CSS.
Unused CSS is free to try, but you have to pay a monthly fee to use their premium features like unlimited scans, scheduled optimizations, and more.
Purify CSS
It is a free tool available on GitHub. This tool is very useful for developers who want to remove unused CSS from their projects during the development and testing phase.
By using purify CSS you can remove unused CSS from HTML PHP JavaScript and CSS files. It does not make changes to the original CSS files on its own. Instead, you need to create a new CSS file.
In the case of frameworks like bootstrap, you can reduce the size of your CSS by up to 75% using purify CSS.
Purge CSS
CSS purge is also a good tool for developers to identify unused CSS in their projects/websites during the development phase itself.
PurgeCSS scans and analyzes your content and CSS files to discover unused CSS. Once it finds unused CSS, it removes them from CSS files to make them more lightweight.
UnCSS
UnCSS is another for removing unused CSS from stylesheets. It can also detect CSS injected into JavaScript.
The downside is that it doesn’t work with non-HTML pages such as PHP files.
Also Read – How To Remove Malware Redirect Hack in WordPress
Remove Unused CSS in WordPress using WP Rocket
This method is easier and is recommended for beginners. It greatly improves the overall delivery of CSS files on your WordPress website, including removing most of the unused CSS.
We think it is the best solution for beginners because it is easier and achieves the main goal of providing a better experience for your users. This means your website loads fast on speed testing tools and also feels fast to your users.
First, you need to install and activate the WP Rocket plugin.
Upon activation, you need to visit the Settings » WP Rocket page and switch to the ‘File Optimization’ tab. Next, you need to scroll down to the CSS Files section and then check the box next to the ‘Remove Unused CSS (Beta)’ option. Once the ‘Remove Unused CSS’ option is active, you can then specify CSS filenames, IDs, or classes that shouldn’t be removed under the ‘CSS safelist’ box.
It will take a few minutes for the plugin to process and remove unused CSS files from your website.
You’ll see a ‘Remove Unused CSS is complete!’ message when the plugin has completed the process.
How to reduce unused CSS in WordPress?
There are various ways to reduce unused CSS on your WordPress website. However, it would be quite difficult to completely remove all unused CSS in WordPress.
Due to the way WordPress works behind the scenes, some unused CSS can be difficult to find and remove.
Choose a Lean WordPress Site Design
First, install a lightweight WordPress theme.
A good theme not only helps you avoid unused CSS problems but also offers many advantages over other heavy themes.
There are thousands of WordPress themes available for different types of website design (appearance and functionality).
But not all themes provide better site speed and security. Make sure you choose a secure wordpress theme as well.
So if you care about site speed, we want you to choose a theme that is
- optimized for performance
- carefully designed
- don’t overload your website with unwanted code.
There are several good WordPress themes offered by professional developers.
A few of the themes are Astra, GeneratePress, and Genesis, etc.
We can easily recommend any of these three for site speed.
Also Read – How to Scan & Detect Malware in WordPress Theme (Updated 2024)
Offload CSS from specific pages
You can offload unused assets (CSS and JS) from specific pages using a plugin called Asset CleanUp. This plugin is available for free on the WordPress plugin repository. And you can use Asset CleanUp to remove unused CSS files from WordPress.
Walkthrough to unload unused CSS (& JS) in WordPress:
Install and activate the plugin.
Go to plugin settings > CSS & JS Manager.
Under CSS & JS Manager, you can enable “Manage in front-end” to manage front-end files for logged-in users (admin).
If you have enabled the “Manage in front-end” option, you will see all assets on the front-end of the page when you are logged into your WordPress. Otherwise, you will need to edit the post/page to see the assets load on a specific page.
- Now go to the page where you want to unload css and/or JS.
- At the bottom of the page, you will see all assets (css, JS files) loading on this page.
- From here you can unload a CSS file (or any other element) from a specific page.
- And finally, click on the “Update” button to save the changes.
- Now test your site again with a speed test tool to see the changes.
Also Read – How To Fix Japanese Keyword Hack In WordPress Site?
Clean up the style.css file
As we mentioned above, you can clean up your theme’s style.css file to keep it light and small.
This is a manual task. First, you need to identify the unused CSS, then you can remove it from your style.css file.
For this purpose, you can use the Chrome Developers Tool method we explained above.
If you are planning to do the same, we suggest you make a backup of your files/site first. In the case of WordPress, here are the best WordPress backup plugins that you can use for backing up your site. ALSO CHECK OUT – How To Restore WordPress Site From Backup – GUIDE
Use Critical Path CSS
‘Use critical CSS and defer the rest of the CSS.’
Critical CSS is the CSS needed to render content above the fold line of the webpage. Generating critical CSS and deferring non-critical CSS can help improve a website’s First Meaningful Paint and First Contentful Paint.
In WordPress, critical CSS can be used in line with a WordPress plugin. There are several plugins available that provide this functionality. But few of them really stand out.
And Autoptimize and WP Rocket are two such plugins.
You use critical CSS and defer all non-critical CSS to improve content delivery above the fold.
Also Read – Best WordPress Security Tips & Tricks 2024
Use a Content Delivery Network (CDN)
You can use a CDN for delivering CSS files. A CDN speeds up content delivery by not only delivering CSS files, but other website static files as well.
Using CDN improves network latency and also reduces server load and download time.
You can use a CDN like StackPath CDN, BunnyCDN, etc.
Remove unused CSS and JavaScript
You can analyze the page from the editor or the front-end, depending on the settings.
Disable Scripting and CSS in Editor – Access the post editor by editing any existing post. Scroll down to see the Asset CleanUp plugin meta fields. Review all CSS and JavaScript loaded on this page and disable any you don’t need.
Disable front-end scripting and CSS – If the “Control in frontend” option is enabled, open any post in the browser interface. Remember to use another browser tab to access your WordPress admin panel. Similar meta values can be found at the bottom of the page, which disable resources loaded on the page.
All CSS and JavaScript files loaded on the page are organized according to your settings in both cases.
View the specifics of the files loaded by your plugins and themes by opening each group. You have many alternatives for each CSS and JS file as shown in the image below.
- Load the resource on the page.
- Disable the file site-wide.
- Disable for all posts (it will continue to load on pages and custom post types).
- Other features, such as RegEx support, are only accessible in the pro edition of the plugin.
- After deactivating the files, you will need to update your message on the site for the changes to take effect.
- View and delete disconnected files in test mode
- Go to Asset Cleanup > Bulk Changes.
- Click the Posts, Pages, and Custom Post Types tab and select Post from the drop-down list.
- You can see all of your site’s disabled files here.
- To re-enable file uploading, choose the Delete Bulk Rule checkbox, then click the Apply Changes button at the bottom.
- You can also adjust the file upload type and edit messages in the message editor.
- Check your website and if everything looks good, go back to the settings page and turn off test mode. All users who visit your site will be able to see the changes. Similarly, you can edit post types, pages, and custom product pages to disable CSS and JS files. To see if errors have been removed, use the Google PageSpeed Insights tool.
Bonus Tip:
Since you’re working on making your site load faster, here’s a bonus tip for you.
If you want to go the extra mile to optimize your site, we would also recommend removing unwanted/less-used CSS elements.
For starters, you can remove these fancy fonts from your site.
Yes, they increase the page size of your site!
And you should use web-safe fonts instead.
Also Read – How to Add Security Headers in WordPress [Plugins]
What to do in the case of a premium WordPress theme?
Are you using a premium WordPress theme on your site? You are then particularly prone to problems with unused CSS resources. The reason is simple, a premium theme is designed to meet all needs, and therefore contains many features.
These functionalities require lines of CSS code, which are not necessarily easily identifiable and which are often called on all pages.
Thus, your site, therefore, contains CSS which is useless and which slows down the loading time of your WordPress site.
Block unused CSS resources
As you can see, responding to Google PageSpeed’s request by deleting unused CSS resources is not necessarily easy. The gain can be significant and it could be worth investing time in this recommendation.
Also Read – WordPress CSRF Protection – Prevent CSRF Exploit
Conclusion
As mentioned earlier, the plugin will only help you to prevent plugins and themes from loading CSS and JS files. Third-party codes should be avoided and unnecessary codes should be removed from the main style.css file.
To avoid losing your changes when updating your theme, we advise you to create a template to update your style sheet.
We have already explained that deleting unused CSS is not a simple task.
In WordPress, it really gets harder to completely remove unused CSS. But you can always work on it to minimize the margin.
Therefore, you should focus on removing unused CSS as much as possible with available resources. As always, even after following the advice on our blog, you are still unable to implement the solutions presented, or simply want to make sure that the job is done properly, do not hesitate to contact WP Hacked Help.
Cheers!