KeyCDN Blog How to Remove Unused CSS for Leaner CSS Files

<p>It&rsquo;s no secret that leaner websites run faster than bloated ones. Don&rsquo;t let unnecessary CSS weigh down your web projects; use the tools and techniques described below to help you remove unused CSS and improve your website&rsquo;s overall performance.</p> <h2 id="what-is-unused-css">What is Unused CSS?</h2> <p>No matter how experienced you are as a developer, there&rsquo;s a good chance that your website contains CSS that have no impact on current page elements. For example, frameworks like <a href="https://www.keycdn.com/blog/bootstrap-vs-foundation" target="_blank" rel="nofollow noopener">Bootstrap</a> come with dozens of CSS styles that you probably don&rsquo;t need. If you added a feature during development and removed it later on, there could still be rules associated with that feature lingering in your stylesheets. <strong>Unused CSS just adds dead weight to your applications</strong> and contributes to the <a href="https://www.keycdn.com/support/the-growth-of-web-page-size">growth of web page size</a>, so you want to make sure that you have as little excess code as possible.</p> <h2 id="why-should-you-remove-unused-css">Why Should You Remove Unused CSS?</h2> <p>Since CSS defines how content in an HTML document gets displayed, the user&rsquo;s browser must download and parse all external CSS files before it can start rendering content. Consequently, the more CSS a web page contains, the longer users must wait to see anything on their screens. <a href="https://www.keycdn.com/support/inline-small-css-and-javascript">Inlining small CSS</a> within your HTML file and minifying your external stylesheets can help optimize content rendering, but cutting out useless CSS is a far more effective strategy for improving overall performance. Combining all of these methods ensures that users see content as quickly as their internet connection will allow. Aside from slowing down your website&rsquo;s overall performance, excess CSS can cause headaches for developers. Clean and orderly stylesheets are easier to maintain than disorderly ones. Do your users and yourself a favor by ditching unused CSS.</p> <h2 id="how-to-remove-unused-css-manually">How to Remove Unused CSS Manually</h2> <p>If you&rsquo;re using Chrome, the DevTools tab has a handy tool that allows you to see what code is being executed on a page on what isn&rsquo;t. To access this tool, follow the steps below:</p> <ol> <li>Open <a href="https://www.keycdn.com/blog/chrome-devtools">Chrome DevTools</a></li> <li>Open the command menu with: <code>cmd + shift + p</code></li> <li>Type in &ldquo;Coverage&rdquo; and click on the &ldquo;Show Coverage&rdquo; option</li> <li>Select a CSS file from the Coverage tab which will open the file up in the Sources tab</li> </ol> <p>Any CSS that is next to a solid green line means that the code was executed. Solid red means it did not execute. A line of code that is both red and green, means that only some code on that line executed.</p> <figure><img src="https://www.keycdn.com/img/blog/devtools-unused-css.png" alt="devtools unused css" class="img-fluid rounded"></figure> <p>Just because a style isn&rsquo;t used on one page doesn&rsquo;t mean that it&rsquo;s not used elsewhere, so you should audit several pages on your site and keep track of which rules keep appearing on the unused list. You can do this by copying and saving the results of each audit into a Google Sheets document. The ones that appear the most can probably be safely removed.</p> <h2 id="tools-to-remove-unused-css">Tools to Remove Unused CSS</h2> <p>Most developers have better things to do than delete unused CSS rules one by one. That&rsquo;s why there are a variety of tools designed to automate the process. Here is an overview of the most popular tools designed to help web developers remove unused CSS from their web projects:</p> <h3 id="1-unusedcss">1. UnusedCSS</h3> <figure><img src="https://www.keycdn.com/img/blog/unused-css.png" alt="unused css" class="img-fluid rounded"></figure> <p>The simple name is indicative of this program&rsquo;s user-friendliness. Just plug your website&rsquo;s URL into <a href="https://unused-css.com/" target="_blank" rel="nofollow noopener">UnusedCSS</a> and let it do all of the work. In addition to <strong>identifying and removing unused CSS rules</strong>, it tells you how much memory you&rsquo;ve saved. You can try UnusedCSS out for free, but you must pay for a monthly membership to download your cleaned up CSS files. Premium members can schedule automatic CSS optimizations and have access to other features; however, it should be noted that UnusedCSS only works with live websites, so it&rsquo;s not useful in the testing phase.</p> <h3 id="2-purifycss">2. PurifyCSS</h3> <p><a href="https://github.com/purifycss/purifycss" target="_blank" rel="nofollow noopener">PurifyCSS</a> is a free tool that removes unused CSS from your HTML, PHP, JavaScript and CSS files before you go live. On the downside, you must manually specify which files to scan one by one, which makes the process somewhat tedious. Rather than modifying your original files, PurifyCSS outputs a new file with the optimized CSS. Since PurifyCSS doesn&rsquo;t work with live websites, you&rsquo;ll need to use it in a development setting. You may want to use PurifyCSS during development and upgrade to UnusedCSS later on.</p> <h3 id="3-purgecss">3. PurgeCSS</h3> <figure><img src="https://www.keycdn.com/img/blog/purgecss.png" alt="purgecss" class="img-fluid rounded"></figure> <p><a href="https://www.purgecss.com/" target="_blank" rel="nofollow noopener">PurgeCSS</a> was inspired by PurifyCSS, so it looks very similar, but it&rsquo;s a bit more streamlined and intuitive to use. It works by comparing your content to your CSS files and removing selectors that don&rsquo;t have a match. The only major downside is that you must manually whitelist CSS not in the specified paths, which can be a headache if your website uses certain plugins such as HTML Forms.</p> <h3 id="4-uncss">4. UnCSS</h3> <p><a href="https://github.com/uncss/uncss" target="_blank" rel="nofollow noopener">UnCSS</a> is more accurate than PurgeCSS since it looks at actual web pages rather than the individual files, but its slower and requires more manual set up. UnCSS is most helpful when used with other tools. For example, you can combine UnCSS with Grunt and Node.js to automate unused CSS removal.</p> <h2 id="alternative-methods-for-removing-css">Alternative Methods for Removing CSS</h2> <p>Many web auditing tools offer CSS optimization as part of their services. New stand-alone tools for removing unused CSS are also coming out all the time, so don&rsquo;t hesitate to experiment. Older versions of Opera and Firefox support an add-on called <a href="https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/" target="_blank" rel="nofollow noopener">Dust Me</a> that detects unused CSS, but it hasn&rsquo;t been maintained since 2015. Fortunately, Mozilla is currently working on a new tool called <a href="https://developer.mozilla.org/en-US/docs/Tools/CSS_Coverage" target="_blank" rel="nofollow noopener">CSS Coverage</a> to help developers optimize their CSS.</p> <h2 id="a-word-of-warning-about-removing-unused-css">A Word of Warning About Removing Unused CSS</h2> <p>The tools discussed in this tutorial are <strong>not perfect</strong>. There are a few different methods for identifying rouge CSS selectors; however, matching selectors to elements in the DOM can be tricky if you have elements that depend on APIs and third-party scripts. If you want to try removing unused CSS manually, then you need to be extra careful so that you don&rsquo;t accidentally cripple your application by deleting something important. That said, you should know your website better than anyone else, and the DevTools auditing feature can provide some valuable insight to help you create tighter CSS from the start.</p> <h2 id="how-to-automate-unused-css-removal-with-uncss">How to Automate Unused CSS Removal With UnCSS</h2> <p>Now, let&rsquo;s see how we can use one of the tools listed above to trim down your stylesheets. This tutorial, thanks to <a href="http://deanhume.com/automatically-removing-unused-css-using-grunt/" target="_blank" rel="nofollow noopener">Dean Hume</a>, will explain how to set up Node.js, Grunt, UnCSS and another plugin called CSSmin on a Windows machine to automatically remove unused CSS and minify the results.</p> <h3 id="1-install-node-js">1. Install Node.js</h3> <p>Download the latest distribution from the <a href="https://nodejs.org/en/" target="_blank" rel="nofollow noopener">Node.js</a> website and follow the installation instructions.</p> <h3 id="2-install-grunt">2. Install Grunt</h3> <p>Open Node.js and enter the following into the command prompt:</p> <pre><code class="language-none">npm install -g grunt-cli </code></pre> <p>Grunt should download and install automatically.</p> <h3 id="3-open-your-project-folder">3. Open Your Project Folder</h3> <p>Using the Node.js command prompt, navigate to the folder containing the files you want UnCSS to scan. You can do this by entering the file path. For example:</p> <pre><code class="language-none">cd C:TestProject </code></pre> <h3 id="4-install-uncss-and-cssmin">4. Install UnCSS and CSSMin</h3> <p>Enter the following into the Node.js command prompt:</p> <pre><code class="language-none">npm install grunt-uncss grunt-contrib-cssmin --save-dev </code></pre> <p>UnCSS and the CSSMin package will be installed in the specified project folder.</p> <h3 id="5-create-a-grunt-js-file">5. Create a Grunt.js File</h3> <p>Create a JavaScript file called <code>gruntfile.js</code> in your project&rsquo;s root directory. The <code>gruntfile.js</code> acts as a configuration file for plugins like UnCSS. Enter this code into the Node.js command prompt:</p> <pre><code class="language-javascript">module.exports = function (grunt) { grunt.initConfig({ uncss: { dist: { files: [ {