CSS (Cascading Style Sheets) determines the styling of web pages, but some parts become unused after a while. This is a normal part of owning a website. With updates to the visual appearance or functionality, some elements stop getting utilized, yet owners forget to erase them. What’s more, some CSS rules were never called. This is especially true with modern WordPress themes that have myriad add-ons and uniquely designed pages, such as “Contact Us”. Although you may not enable an element on all or any pages, it must exist in code nonetheless. This leads us straight into how to remove unused CSS in WordPress.
Why should I delete unused CSS in WordPress?
Unused CSS represents any CSS code in one or more stylesheets that isn’t utilized as a part of a theme, plugin, or HTML element on a page. The reason is simple—the current page doesn’t call for it. Nevertheless, the code exists on your website and takes up resources. Even worse, your visitors suffer because their web browsers must download, parse, and process all stylesheets for a page to display its contents properly.
Can I get rid of it completely?
The answer, sadly, is no. Even if you eradicate all WordPress plugins and install a default WordPress theme, there will always be a sliver of unutilized CSS code somewhere. However, you can get rid of the substantial portion. This should still add up to a significant boost in loading speed and overall performance.
Where do I find unutilized CSS on my website?
While it’s no secret unused CSS code exists, you still don’t know where, what is causing it, and how significant its impact on performance is. Thankfully, there are several nifty web-based tools, none of which we have ties to, that can help you:
- Coverage in Google Chrome — Right-click on a page before selecting Inspect. Switch to the Coverage tab. You’ll see full size and unused size, plus a visual representation (unused code is in red)
- GTmetrix, PageSpeed Insights, or Pingdom — General tools. Find the “Remove Unused CSS” section after scanning
- UnusedCSS and PurifyCSS Online — Dedicated web tools
Reasons to use WordPress plugins over manual methods
We nearly always start with manual methods before diving into third-party solutions. This time, we’ll do the opposite. First, manually editing CSS in WordPress requires advanced knowledge and lots of testing. Even if you possess time and expertise, the situation is tricky. For one, you must conduct tests by hand for every page individually. Even worse, you must thoroughly note every layout and element that uses unique CSS, then disable it. Furthermore, you can run into three problems:
- Dynamic elements. Today’s websites contain a lot of dynamic elements that rely on JavaScript to trigger them. In many cases, they require styling, hence JavaScript injects CSS classes and HTML tags. Finding the code within JS, extracting it, and figuring out all pages it appears on is an arduous process.
- Code splitting. WordPress requires your theme to use a primary stylesheet named style.css. However, web designers and developers both write unnecessary code and split large stylesheets into multiple ones based on their purpose (base.css, form.css, typography.css and so forth). Piecing things together can be a massive time sink, if it even succeeds.
- CSS introduced by plugins. WordPress plugins are notorious for inserting JavaScript and CSS across the website, even if they serve no purpose on a specific page. Thus, you’ll be treating the symptoms manually instead of letting a tool take care of it or suggest you disable the culprit.
1. Remove unused CSS in WordPress via WP Rocket
WP Rocket is a leader among WordPress plugins for caching. As such, you might have it installed already. The plugin introduced various features over time, including “Remove Unused CSS” in version 3.9. If you’re already a user, you merely have to tick one box before waiting for automatic results. Those who are yet to install an equivalent plugin might have an extra reason to opt for it. It’s important to note we aren’t affiliated, but merely showcasing a well-known, powerful but beginner-friendly solution. Follow these steps to remove unused CSS through WP Rocket within WordPress:
- In case you don’t have it yet, head over to the WP Rocket website.
- Click on Get WP Rocket Now before selecting a payment plan.
- Sign up for an account, finish paying, and you can download the plugin as a ZIP archive.
- Install the WordPress plugin.
- Now that it’s active, click on WP Rocket under “Settings” in the left sidebar of your WordPress Admin section.
- A custom WP Dashboard opens. Click on File Optimization in the sidebar on the left side.
- Go all the way down until you find the section titled “CSS files”.
- Tick the checkbox in front of Remove Unused CSS.
- Optional. Set up a CSS safe list, i.e., enter names of classes that should be excluded from removal.
- Click on Save Changes.
- Wait for the progress bar to reach the end. You’ll now see a message stating “Remove Unused CSS is complete!”
2. Removing unused CSS using Asset CleanUp in WordPress
We know not everyone has money to spend, especially when starting. Additionally, you may not need a top-tier, feature-packed solution. Once again, we have zero affiliation and are solely using it for demonstration. Although the plugin does the actual removal, you still must turn the option on for every page, post, or custom post type. With that acknowledged, here’s how getting rid of unused CSS via Asset CleanUp works:
- Install and activate Asset CleanUp from the link above.
- You can now do one of the following:
- Start editing any page, post, or custom post type. Find a meta box titled “Asset CleanUp” on the right-hand side, and you’ll see a list of all JavaScript and CSS files that load.
- Select CSS & JS Load Manager under “Asset CleanUp” in the left sidebar of the WordPress Admin dashboard.
- If you chose the latter, select the tab named CSS & JS Manager. You may now decide which page to analyze.
- Click on Sample Page or Test Mode, and the plugin will generate a rundown of all CSS. You’ll also see tips, such as which plugin is responsible for CSS or the pages you should unload CSS on.
- Toggle the slider next to Unload on this page to turn CSS removal on. Repeat this for as many pages as you need.
- Click on Update once you’re done.