How to Remove Unused CSS to Reduce the Size of your Stylesheets?

How to Remove Unused CSS to Reduce the Size of your Stylesheets?

Over time, your website’s CSS files can be flooded with selectors that are not being used anywhere. You can easily search and delete these entries from your CSS.

CSS Unused
CSS Unused

There may be many unnecessary rules in your website’s CSS files, which are no longer used by any element on web pages. For example, you may have added a site search box to your website and related styles went to the stylesheet. Later, if you decide to remove that search box, the styles may be present in your CSS, although they are not used anywhere.

With these unused entries in your CSS files, your website’s page load time increases and the site’s performance also affects because the browser has to work extra to parse all the additional rules. And even if the effect on the display is minimal, then it will make your work easier to maintain CSS if the files are clean and well structured.

In Opera and Firefox browser a popular add-on is called Dust M, which scans your current web page and lists all unused CSS rules that are defined in the stylesheet but not used on the page. Google Chrome users do not have to install any add-ons though, because the developer tools created inside the Google browser themselves provide this option.

Remove unused CSS from the stylesheet

Here’s how you can easily find all unused selectors in your CSS files in Google Chrome:

  1. Open any page of your website inside Google Chrome and then launch the Dev Tool available under File Tools -> Tools -> Developers Tools.
  2. Click on the Audit tab inside Dev Tools and select “Web page performance” and “Audit on reload page and load” options. Now click on the “Run” button to start the CSS audit process.
  3. On the results page, expand the “Remove unused CSS rules” group and select the CSS file (s) associated with your site. You can ignore CSS files added by social plugins and widgets because you do not have control over them.

Here you will find a sorted list of all the styles that are defined in the CSS file but have not been used anywhere on the current page.

You can copy and save results in a text file and repeat the steps for adding other pages to your site. This is necessary because all selectors can not be used on all pages. You can find the number of different selectors in the combined result, perhaps using Google Sheets, and the selectors with the highest calculation may be removed “safe”.

Shares 0

Leave a Reply

Your email address will not be published. Required fields are marked *