![\"\u201cReduce](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/12\/Reduce-Unused-CSS-PageSpeed-Insights.png\")
<\/figcaption><\/figure>
The PageSpeed Insights result above shows that the page loads stylesheets for dash icons and block libraries. But not all of the styles in them are used on the page. Removing dashicons.min.css <\/strong>results in 100% potential savings. This extra code slows down your website, resulting in poor user experience. <\/p> Why does this happen? Many popular WordPress themes, plugins, and page builders are designed to satisfy diverse users requiring various functionality. However, customizing the final CSS output to include only the used elements is complex. Hence, they\u2019re all bundled together in a single CSS file. Typically, this file is named style.css<\/strong> or stylesheet.css<\/strong>. <\/p> Some themes may go the extra mile to optimize this by splitting the stylesheets into multiple CSS files. For instance, they may have separate stylesheets for buttons, navigation menus, icons, tables, galleries, etc. <\/p> But the core issue remains. Even if you use just one type of button on a page, it\u2019ll load all button styles. <\/p> That\u2019s unused CSS. <\/p> Reducing or removing unused CSS will improve your page speed performance and SEO. <\/p> Unused CSS are CSS styles that are not needed to render a page correctly. They can be added as files or as internal styles for elements on a page. Even if you remove all of them, the page will display just fine to the user. <\/p> They can have several performance impacts on your website, affecting load times and user experience. Here are their most critical performance impacts:<\/p> Unused CSS contributes to larger stylesheets, leading to longer download times for your users. It\u2019s especially critical for those using slower network connections or mobile devices. <\/p> Larger CSS files also increase network overhead as browsers need to download more data. This can be particularly problematic for sites attracting high traffic. The same holds for users with limited bandwidth or on networks with high latency. <\/p> If you\u2019re on a hosting plan that limits your bandwidth usage, you may also pay more to upgrade to costlier plans. The higher traffic your site attracts, the more serious unused CSS becomes. <\/p> If unused CSS is included on the page, the browser must download, parse, and process it before displaying or rendering it. <\/p> Browsers typically don\u2019t display content before processing the stylesheets, as they may contain CSS rules to style the page. Hence, whether used or not, the browser must download each CSS file from the network. <\/p> Unused CSS extends this process, delaying the rendering of the visible content and potentially impacting the perceived performance of your site.<\/p> Unused CSS also affects how fast a page loads its above-the-fold content \u2014 the first thing a user sees on the page. This section should be displayed as quickly as possible so the users can start interacting with the page immediately.<\/p> Mobile users, who often have limited resources compared to desktop users, may experience more pronounced performance issues when downloading and rendering large CSS files. This is especially critical given the increasing number of users accessing websites on mobile devices.<\/p> Large and unused CSS files complicate maintaining your website. More CSS rules mean identifying and fixing issues becomes more challenging. That can also make it harder to collaborate with others on maintaining the website.<\/p> Unused CSS might also include additional dependencies, such as fonts or images, further increasing the load time and negatively impacting page performance. Removing such unused CSS rules will also reduce the number of HTTP requests<\/a>, further boosting the page speed. <\/p> To mitigate these performance impacts, you must regularly audit and optimize your CSS, ensuring only the necessary styles are included in your web pages. <\/p> You can use various tools and techniques to help identify and remove unused CSS from your stylesheets.<\/p> The first step towards reducing or removing unused CSS is finding out which CSS rules are unused on a page. <\/p> However, this process can be challenging depending on multiple factors:<\/p> For instance, a page may not use a CSS rule when initially loaded, but depending on a user’s action, it may have to use that rule to style an element.<\/p> An example is adding a product to your shopping cart and displaying the item on your page\u2019s navigation menu or sidebar. Such elements also need styling. <\/p> Typically, these user actions dynamically load CSS rules using JavaScript-added CSS selectors or AJAX elements. <\/p> The following points cover step-by-step instructions on auditing and identifying unused CSS.<\/p> Most browsers have built-in developer tools to help you identify large or unused CSS rules and JavaScript code. We\u2019ll use the Chrome browser and its built-in DevTools to demonstrate this.<\/p> First, load the page you want to audit for unused CSS. Then open DevTools (use these keyboard shortcuts: Control<\/strong>\/Command+Shift+C<\/strong> or F12<\/strong>). <\/p> Here, go to the Coverage<\/a> tab. If you don\u2019t see it, open the Run command menu (Control+Shift+P<\/strong>), start typing coverage<\/strong>, and then select the Show Coverage<\/strong> command.<\/p> You\u2019ll now see the Coverage tab in the DevTools drawer.<\/p> Next, you can start recording code coverage by clicking the Start Instrumenting Coverage And Reload Page<\/strong> button. If the page is interactive, you may see the Instrument Coverage button instead. It\u2019ll also record the code used as you interact with the webpage. <\/strong><\/p> Once you\u2019ve finished loading and interacting with the page, click the Stop Instrumenting Coverage And Show Results<\/strong> red dot button. <\/p> The Coverage<\/strong> tab\u2019s table shows you all the recorded resources and how much code from each resource was used. It uses a red vs. green horizontal bar graph to illustrate the unused vs. used code. <\/p> You can click any row here to analyze the resource in detail inside the DevTools Sources<\/strong> tab. Any unused code will be marked with a vertical red line on its left. <\/p> In the example above, the page doesn\u2019t use Open Sans font but still loads it. Hence, 100% of its CSS code remains unused. It\u2019s recommended to remove this font from loading on this page. <\/p> Note:<\/strong> Finding unused CSS styles is relatively easy, but refactoring your website code so each page only ships the CSS it needs can be challenging. It varies depending on your site\u2019s unique technology stack.<\/p> You can also use browser extensions like Unused CSS Tracker<\/a> and Sniper CSS<\/a> to track and avoid unused CSS. <\/p> Unused CSS Tracker will track every user interaction on a webpage, even if you navigate to a different page. You can manually stop the tracking and view the unused CSS results on each page.<\/p> Sniper CSS works a bit differently. It\u2019ll emulate various interactions and collect all your site\u2019s CSS rules. Then, it\u2019ll compare them with all the loaded CSS code to show you unused CSS styles. <\/p> Prioritizing loading your page\u2019s critical CSS<\/a> is critical to speed up your website. Critical CSS path generators automatically remove or defer any unused CSS in the page\u2019s above-the-fold content. <\/p> You can use various tools to identify and generate critical CSS. The most popular of them is Critical<\/a>, maintained by Google engineer Addy Osmani. Critical extracts, inlines, and minifies critical-path CSS from HTML.<\/p> You may be reading this article because of the suggestion to \u201cReduce unused CSS\u201d from the PageSpeed Insights site performance audit tool. It\u2019s powered by Google Lighthouse and highlights all the major unused CSS stylesheets on your page.<\/p> <\/p> Likewise, most page speed testing tools, like GTmetrix<\/a> (also powered by Google Lighthouse), include a Waterfall chart to check for large CSS files.<\/p> Going through these results will hint you towards areas on your site where you can potentially trim down unnecessary CSS. <\/p> Some CSS frameworks or libraries provide tools or options for removing unused styles during the build stage itself. That way, you don\u2019t have to do that later.<\/p> For instance, Bootstrap can include only its used components<\/a> and styles. You can comment out or delete Bootstrap components you\u2019re not using from your asset pipeline. <\/p> As an example, if you\u2019re not using carousels or spinners on your website, you can avoid importing them while compiling CSS, resulting in an optimized CSS file size. <\/p> As mentioned, you can use PurgeCSS<\/a> to automatically remove unused CSS from CSS frameworks or libraries. <\/p> Audit your CSS files and look for styles not applied to any elements on your page. You may also find some duplicated rules across different stylesheets. <\/p> However, this approach requires a thorough understanding of your project’s code structure, including CSS, JS, and PHP templates (if any). This task is better suited for website developers. <\/p> Finally, if your site is built with WordPress, you can use its many plugins to find, check, and reduce unused CSS. <\/p> Some plugins, like Asset CleanUp<\/a> and Clearfy, will help you remove the unused stylesheets manually from the page load. In contrast, plugins such as WP Rocket have more advanced features to tackle unused CSS automatically. We\u2019ll cover them in detail in a later section. <\/p> \u26a0\ufe0f Important:<\/strong> You must actively monitor the page design after removing or reducing unused CSS. There\u2019s a high chance that the process is not 100% thorough. Before removing any CSS, ensure it doesn’t impact your page functionality or appearance. And as always, keep backups of your original stylesheets if you need to revert changes.<\/p> Removing or reducing unused CSS automatically is an advanced feature not included in most WordPress plugins, especially free plugins. However, once you\u2019ve identified which CSS styles aren\u2019t necessary, you can manually remove or reduce unused CSS using several tools and techniques. <\/p> We\u2019ll outline some tools and WordPress plugins you can use to manually reduce or remove unused CSS. <\/p> Several tools like PurgeCSS<\/a> and UnusedCSS<\/a> can help analyze your HTML, CSS, and JS files, and extract only the used CSS.<\/p> You can get started quickly with UnusedCSS or UnCSS Online<\/a>, as they\u2019re online tools and don\u2019t require much setup. <\/p> Note:<\/strong> UnCSS only analyzes a page\u2019s HTML and JS that runs on page load. It cannot handle user interactions. <\/p> The other tools require some development knowledge. PurgeCSS has handy step-by-step guides for most platforms, including WordPress<\/a>. You can also run UnCSS on your server if using the online tool isn\u2019t your thing. <\/p> \u26a0\ufe0f Important<\/strong>: Running on your server can be demanding on its resources, especially if you\u2019re using PHP. Monitor your website server and site uptime while performing this task. <\/p> Minifying and combining CSS and JavaScript files can only do so much. Those assets still have to be loaded and parsed by the browser. What if the page doesn\u2019t need those assets to load and display correctly? <\/p> The free Asset Cleanup plugin<\/a> does exactly that. It lets you eliminate page bloat without much effort on a per-page basis.<\/p> For instance, if your homepage doesn\u2019t have a contact form, it doesn\u2019t have to load CSS styles and JavaScript files to generate contact forms. Likewise, you may have many other pages that do not use contact forms. Now imagine the page bloat you can reduce by restricting only pages using contact forms to load assets related to them. <\/p> Another example is removing Gutenberg CSS if you\u2019re not using it on your site. Enabling Asset Cleanup\u2019s Disable Gutenberg CSS Block Library Site-Wide<\/strong> option will unload all Gutenberg Block CSS files. <\/p> Asset CleanUp detects all your page assets and lists them cleanly in your WordPress page editing dashboard. Here, you can select all the unused CSS and JS assets, reducing the page bloat considerably. It works best with page caching enabled. For that, you can use a cache plugin<\/a> like WP Rocket, a hosting company that offers server-level page caching, or a CDN like Cloudflare with page caching enabled. WP Rocket is compatible with many hosting companies<\/a>, so you can also combine them to maximize your site\u2019s performance optimization. <\/p> WordPress Assets Manager<\/a> is another assets cleanup plugin to speed up your WordPress site. You can use it to remove unused scripts and styles on WordPress pages.<\/p> Like with the Asset CleanUp plugin, you can choose which styles and scripts to load on each page. However, this plugin combines helpful functions from various popular plugins, such as Asset Queue Manager, WP Asset CleanUp (Page Speed Optimizer), Clearfy (discussed below), Disabler, and Admin Tweaks.<\/p> The plugin authors have also released other related free plugins, the most relevant among them being Clearfy<\/a> for this use case.<\/p> Clearfy Cache<\/a> is another site optimization plugin by the authors of WordPress Assets Manager. It\u2019s a multipurpose plugin with many features, including over 50 helpful functions to optimize your WordPress site. <\/p> Clearfy is primarily a caching plugin at its core, but its assets management feature is relevant here for removing unused CSS. Clearfy also includes video tutorials to help you understand its various plugin settings and get started with it quickly.<\/p> There aren\u2019t many WordPress plugins to automate Remove Unused CSS processing. WP Rocket is one of the few that does it without a hitch, and it does it automatically!<\/p> WP Rocket<\/a> is one of the easiest and simplest WordPress plugins to remove unused CSS. It is a powerful caching and performance optimization plugin that automatically enables essential web performance best practices to boost your page speed. <\/p> One of WP Rocket\u2019s standout advanced features is removing unused CSS. Enabling this option automatically removes all the unused CSS for each page, keeping only the used CSS.<\/p> You can enable it under WP Rocket\u2019s File Optimization<\/strong> tab, inside the Optimize CSS delivery<\/strong> feature.<\/p> After you\u2019ve enabled the Remove Unused CSS feature, WP Rocket will start generating Used CSS files for all the non-cached versions of your webpages, starting with your homepage. <\/p> All the other pages will require a visit to generate Used CSS files. To avoid this, you can enable the Preload<\/strong> feature to speed up this process. Enabling it will allow WP Rocket to simulate visits to your pages, creating and applying Used CSS. <\/p> These Used CSS files are stored locally on your server and compressed with the GZIP algorithm. <\/p> Note:<\/strong> WP Rocket\u2019s Remove Unused CSS feature will reduce the overall page size but may increase the HTML document size. That\u2019s because the used CSS is added inline in the HTML document. This is in line with Google\u2019s suggestions<\/a>. <\/p> Removing unused CSS is a fairly advanced feature. If you make any changes to your stylesheets or add custom CSS, you must manually clear all Used CSS through your WP Rocket toolbar menu. However, WP Rocket will automatically clear the Used CSS whenever you edit a post\/page, clear the post\/page cache, and edit\/delete items. It\u2019ll also clear the Used CSS when a new comment is detected. <\/p> You can also disable the Remove Unused CSS feature<\/a> on specific pages or posts with the WP Rocket Options meta box. The documentation also includes a link to a helper plugin that lets you do this process in bulk. <\/p> Furthermore, enabling this feature will automatically disable the Preload Fonts<\/a> feature, as all the used fonts will be preloaded on the page before the CSS block. <\/p> WP Rocket is 100% compatible with most WordPress hosting providers and plugins, including popular page builders, WooCommerce, and other WordPress tools. If you encounter issues using the Remove Unused CSS feature, refer to WP Rocket\u2019s documentation<\/a> or contact WP Rocket\u2019s customer support<\/a>. <\/p>Why You Should Reduce\/Remove Unused CSS<\/h2>
Increased Page Load Times<\/h4>
Delayed Browser Rendering<\/h4>
Mobile Performance Issues<\/h4>
Increased Maintenance Effort<\/h4>
Loading Dependencies<\/h4>
How to Diagnose and Identify Unused CSS<\/h2>
![\"Online](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/12\/Shopping-Cart-Dynamic-CSS.png\")
<\/figcaption><\/figure>1. Browser Developer Tools<\/h3>
![\"Chrome](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/12\/Chrome-DevTools.png\")
![\"Chrome](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/12\/Chrome-DevTools-Run-Command.png\")
![\"Chrome](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/12\/Chrome-DevTools-Coverage-Show-Coverage-Command.png\")
<\/figcaption><\/figure>![\"Chrome](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/12\/Chrome-DevTools-Coverage-Tab-Drawer.png\")
<\/figcaption><\/figure>![\"Chrome](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/12\/Chrome-DevTools-Coverage-Recorded-Results.png\")
<\/figcaption><\/figure>![\"Seeing](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/12\/Chrome-DevTools-Coverage-Sources-Unused-Sources-Panel.png\")
<\/figcaption><\/figure>2. Browser Extensions<\/h3>
![\"Unused](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/12\/Unused-CSS-Tracker-Chrome-Browser-Extension.png\"){kind=tracking}
<\/figcaption><\/figure>![\"Sniper](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/12\/Sniper-CSS-Chrome-Browser-Extension.png\")
<\/figcaption><\/figure>3. Critical CSS Path Generators<\/h3>
4. Site Performance Audit Tools<\/h3>
![\"PageSpeed](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/12\/Reduce-Unused-CSS-PageSpeed-Insights-1.png\")
<\/figcaption><\/figure>![\"GTmetrix](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/12\/Waterfall-Chart-WPRocket-GTMetrix.png\")
<\/figcaption><\/figure>5. CSS Frameworks and Libraries<\/h3>
![\"Bootstrap](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/12\/Bootstrap-Lean-Sass-Imports.png\")
<\/figcaption><\/figure>6. Manual Code Review<\/h3>
7. WordPress Plugins<\/h3>
Tools to Reduce\/Remove Unused CSS Manually in WordPress<\/h2>
1. CSS Remover Tools<\/h3>
![\"UnusedCSS](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/12\/UnusedCSS-homepage.png\")
<\/figcaption><\/figure>2. Asset CleanUp: Page Speed Booster<\/h3>
![\"Asset](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/12\/Asset-Cleanup-WordPress-Plugin.png\")
<\/figcaption><\/figure>3. WordPress Assets Manager<\/h3>
![\"WordPress](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/12\/WordPress-Assets-Manager-WordPress-Plugin.png\")
<\/figcaption><\/figure>4. Clearfy Cache<\/h3>
![\"Clearfy\n\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/12\/Clearfy-Cache-WordPress-Optimization-Plugin.png\")
<\/figcaption><\/figure>How to Automatically Reduce\/Remove Unused CSS with a WordPress Plugin<\/h2>
WP Rocket<\/h3>
![\"WP](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/12\/Optimize-CSS-Delivery-WP-Rocket-Remove-Unused-CSS.gif\")
<\/figcaption><\/figure>How WP Rocket Remove Unused CSS Feature Works<\/h3>