How to Remove Unused CSS in WordPress (The Right Way)

Hey there, WordPress speed seeker! 👋

Do you want your website to be lean, mean, and lightning-fast? One of the best ways to achieve that is by removing unused CSS.

In this guide, I‘ll show you exactly how to identify and eliminate excess CSS code safely and effectively. No more bloated stylesheets slowing down your pages!

Why Unused CSS Hurts Your WordPress Site

First, let‘s talk about why it‘s so important to remove unused CSS.

Slow Page Speed 🐌

Every KB of unused CSS code adds to your page weight and load times. Even small amounts of unused CSS across many files can really add up!

Check out this data from HTTP Archive showing how unused CSS impacts key speed metrics:

(Source: https://httparchive.org/reports/page-weight#unused-css)

Sites with more unused CSS tend to have worse First Contentful Paint (FCP) and Largest Contentful Paint (LCP) – two critical Core Web Vitals metrics.

In my experience optimizing client sites, shaving off 100-200KB of unused CSS can improve Lighthouse performance scores by 10-20 points! Every bit counts.

Frustrating User Experience 😫

Slow-loading pages create a poor user experience, especially on mobile devices.

Google found that 53% of mobile visits are likely to be abandoned if pages take longer than 3 seconds to load. Ouch!

By removing unused CSS, you‘re not just improving technical performance – you‘re making your site more enjoyable and engaging for visitors. Faster pages lead to:

📈 Higher conversion rates
🙌 Lower bounce rates
💰 More sales and revenue
😍 Happier users!

SEO Troubles 🙈

Site speed is also a ranking factor for SEO. Google has stated that they prefer to send searchers to faster-loading sites in search results.

If your competitors‘ sites are faster than yours due to leaner CSS and other optimizations, they may rank higher and steal your valuable organic traffic.

Removing unused CSS can give you an edge in the never-ending battle for SERP dominance. It‘s an easy win for healthier, speedier pages in the eyes of search engines.

How to Identify Unused CSS 🔍

Now that you know the "why", let‘s dive into the "how" of finding and removing unused CSS in WordPress. I‘ll share a few different methods and tools to cover all the bases!

Browser DevTools 🌐

Most modern browsers like Chrome and Firefox have built-in developer tools that can help pinpoint unused CSS.

In Chrome, for example, you can use the Coverage tab to see exactly which parts of your CSS files are going unused.

Here‘s how:

Open your page in Chrome and press F12 to launch DevTools
Click the three-dot menu and go to "More tools" > "Coverage"
Click the "Reload" button to start capturing code coverage
Click a CSS file in the results to see the used vs. unused code

Unused CSS will be highlighted in red, making it easy to spot.

You can hover over the bar chart to see the % used and a line-by-line breakdown.

The browser method is great for analyzing CSS usage for specific pages. But for sitewide or multi-page audits, you‘ll want something more powerful…

Google Lighthouse / PageSpeed Insights 🚀

Google Lighthouse is a nifty page speed tool that scans your site for performance issues, including unused CSS.

You can run Lighthouse from Chrome DevTools or use the web-based PageSpeed Insights tool.

Here‘s what you‘ll see after running a Lighthouse audit:

Lighthouse will flag the "Remove unused CSS" opportunity in red if it finds significant unused code. The report also estimates the potential savings in KB.

Keep in mind that Lighthouse only scans one page at a time. For more comprehensive unused CSS analysis, we need the help of WordPress plugins!

WordPress Plugins 🔌

One of the most powerful and convenient ways to find unused CSS across your entire WordPress site is to use a specialized plugin.

Some of the best options for unused CSS detection include:

Asset CleanUp – Scans your site for unused CSS and JS files, with detailed file-by-file and page-by-page reports.
WP Rocket – All-in-one performance plugin with built-in unused CSS removal. Identifies and defers unused CSS.
PurifyCSS – Online tool that crawls your site, detects unused CSS, and generates optimized code to download/replace.

These plugins make it incredible easy to see the full scale of your unused CSS and start cleaning things up.

I recommend starting with Asset CleanUp (free!) for its powerful scan tool and optimization options. WP Rocket is also excellent if you want an all-in-one solution.

Removing Unused CSS (3 Ways) 🗑️

Once you‘ve identified CSS that can be safely removed, there are different ways to actually prune that code from your WordPress site. Here are three approaches, from easiest to most advanced!

1. Automate with a Plugin 🤖

By far the simplest way to remove unused CSS is to use a WordPress performance plugin like the ones mentioned above. They can handle the entire optimization process for you!

In Asset Cleanup, for example, removing unused CSS is as easy as:

Install and activate the free plugin
Go to the CSS/JS manager page
Click the files you want to optimize
Select "Remove Unused CSS"
Save and clear your cache

Asset Cleanup will take care of stripping out the unused code, no manual editing required. Easy peasy! 🙌

The visual reports also make it simple to test different optimization combinations and instantly see the results. You may need to do some trial and error to avoid breaking your layouts.

2. Use Browser DevTools (Carefully) ⚠️

If you identified unused CSS in a specific stylesheet using your browser‘s developer tools, you can manually delete that code as well.

Fair warning: directly editing theme and plugin files can be risky. One wrong deletion could majorly break your site‘s appearance!

Always make a backup copy of any files before trying manual edits. Here are the basic steps:

In Chrome DevTools, search for the CSS rule that you‘ve confirmed unused
Copy the unused selector name or code block
Use FTP or the WordPress editor to open the corresponding CSS file
Find and delete the matching code from the original CSS file
Save the changes and clear your cache

Obviously, this approach is a bit tedious and mistake-prone. I only recommend it for surgical, case-by-case optimization, and only if you‘re sure about what you‘re deleting!

3. Use Command Line / Build Tools 💻

For my fellow developers out there, you can also leverage command line tools and build processes to automate unused CSS removal.

Popular options include:

UnCSS – Node library for removing unused CSS
PurgeCSS – Build tool to remove unused CSS, works with webpack/gulp/rollup
PurifyCSS – Gulp plugin and CLI tool

These tools can be integrated into your development workflow to continuously detect and purge unused CSS as you make changes. Pretty nifty! 😎

Here‘s a quick example using PurgeCSS and webpack:

const PurgeCSSPlugin = require(‘purgecss-webpack-plugin‘)

module.exports = {
  plugins: [
    new PurgeCSSPlugin({
      paths: [‘**/*.php‘, ‘**/*.js‘]
    }),
  ],
}

In this case, PurgeCSS will scan all PHP and JS files in your project, cross-reference them with your CSS, and remove any unused selectors during the build process.

This is a powerful way to keep your CSS lean and mean, but may require some configuration and ongoing maintenance.

Best Practices / Tips for Removing Unused CSS 💡

Regardless of which method you choose, here are some general tips and best practices to keep in mind when removing unused CSS from your WordPress site:

Always backup your site before editing CSS files or using new optimization plugins!
Start by testing unused CSS removal on a staging site to avoid accidental breakage
Use Chrome DevTools to inspect and debug any layout issues after optimization
Be extra cautious with dynamically-loaded or conditionally-applied CSS
Consider combining manual/plugin/tool optimizations for the best results
Re-test your site speed and Lighthouse scores after optimization to measure the impact
Monitor your key pages over time to catch any new unused CSS from creeping in
Remove unused CSS as part of a holistic speed optimization strategy (compress images, minify code, enable caching, etc.)

With a little QA and common sense, removing unused CSS is a safe and effective way to streamline your WordPress site and improve load times.

Is Removing Unused CSS Worth It? 🤔

After years of optimizing WordPress sites, I can confidently say YES!

While unused CSS removal may seem minor, it can have an outsized impact on performance and user experience – especially for image/style-heavy sites.

I‘ve personally seen page speed improvements of up to 30% after pruning unused CSS and combining it with other techniques.

Even if you only squeeze out a few hundred milliseconds, those savings compound over many visits and pageviews. Faster loading = happier users!

So roll up your sleeves, bust out the dev tools, and start hunting down that unused CSS. Your WordPress site (and visitors) will thank you! 😄

Key Takeaways

Unused CSS is a silent killer of WordPress site speed and performance
Even small amounts of unused code can significantly impact load times
Removing unused CSS improves Lighthouse scores, UX, and SEO
Use browser tools, Lighthouse, and plugins to identify CSS bloat
Remove unused CSS with automated plugins/tools or manual editing
Always test, measure, and monitor your optimizations for the best results
Prioritize unused CSS cleanup as part of a larger speed optimization strategy

I hope this guide has given you the knowledge and tools to confidently remove unused CSS from your WordPress sites. It may take some elbow grease, but the payoff is well worth it!

Happy optimizing! 🚀