What is Unused CSS?

In WordPress, “unused CSS” refers to style rules that are defined in your website’s CSS files but are not used on the current page being viewed. This can happen when a site’s theme or plugins include comprehensive CSS files that aim to cover various elements and layout options, but not all these styles are necessary for every page.

For example, a theme might come with CSS styling for a slideshow, contact forms, buttons, and different types of headers. If a particular page doesn’t have a slideshow or specific button types, then the CSS rules written for these components are considered unused for that page. Keeping these unused rules in the CSS files can contribute to larger file sizes, leading to increased page load times, which can negatively affect both user experience and SEO.

Strategies To Reduce Unused cSS

Efficiently managing or removing unused CSS can make your CSS files smaller and your pages load faster, which is particularly crucial for achieving good performance scores in tools like Google PageSpeed Insights. Techniques such as critical CSS (where only the styles needed to render the above-the-fold content are loaded initially) and conditional loading (where certain styles are loaded only when needed) are commonly employed to handle unused CSS effectively.

1. Identify Unused CSS

Firstly, you need to identify the CSS rules that are not being used by your site. There are several tools and methods to help you with this:

• Google Chrome’s Coverage Tool: Open Chrome DevTools, go to the ‘Performance’ tab, and start recording your site. Navigate through the site to ensure you cover multiple pages if necessary. The Coverage tool will show you which CSS files are being loaded and the percentage of code that is used versus unused.
• Online Tools: Use online tools like UnCSS or PurifyCSS, which analyze your CSS files in the context of your site’s pages and identify the unused parts.

2. Use a WordPress Plugin

Several WordPress plugins can help you automate the process of removing unused CSS:

• Autoptimize: This plugin can aggregate, minify, and cache scripts and styles, injects CSS in the page head by default but can also inline critical CSS and defer the aggregated full CSS to the footer.
• WP Rocket: A premium caching plugin that offers a feature to remove unused CSS automatically. WP Rocket creates a critical CSS path and defers the larger, unused CSS until it is needed.
• Asset CleanUp or Perfmatters: These plugins allow for greater control over scripts and stylesheets, letting you selectively disable plugins and CSS files on pages where they are not needed.

3. Manually Optimize Your Stylesheets

If you prefer a manual approach, especially if you have a custom theme and know your way around its code, you can manually optimize your CSS by:

• Reviewing the stylesheets linked to your theme and removing any styles that are not applicable to elements on your site.
• Consolidating multiple CSS files into one to reduce HTTP requests.
• Using CSS minification tools to reduce the size of your CSS files.

4. Utilize Critical CSS

Critical CSS refers to the CSS needed to render the above-the-fold content of your website:

• Use online tools or plugins to generate critical CSS for your site.
• Inline the critical CSS directly into the HTML document to ensure it loads immediately without waiting for the full CSS file.
• Load the rest of the CSS asynchronously to prevent it from blocking the page render.

5. Regularly Review and Maintain CSS

As your WordPress site evolves, so should your CSS:

• Regularly review your CSS files as you add or remove plugins or change themes.
• Keep your CSS organized and well-documented, which helps in identifying unused styles more easily.
• Consider using a CSS methodology like BEM (Block Element Modifier) to help keep your stylesheets more structured and easier to manage.

6. Test and Monitor

After making changes, it’s crucial to test your website:

• Use tools like PageSpeed Insights, Lighthouse, or WebPageTest to measure the impact of removing unused CSS on your site’s performance.
• Monitor the site’s functionality and appearance to ensure that no visual elements are broken due to the removal of CSS rules.

By efficiently managing and reducing unused CSS, you can decrease page load times, improve responsiveness, and provide a better overall experience to your site visitors.