Removing the Unused CSS Files to Reduse the Size of your Stylesheets
The CSS files of website have several rules but they are no longer used by any element on the web pages. For example you have added a site search box on your website and the associated styles went into the stylesheet. If we want to remove the search box, the styles may continue to exist in your CSS they are not used anywhere.
The unused entries in CSS files will increase the page load time of website and also affect the site performance as the browser has to do the extra work. if the impact on the performance is less, if the files are kept clean and well-structured it would make your task of maintaining CSS easier.
Dust Me is the popular add-on in Opera and the Firefox browser that scans the current web page and lists all the unused CSS that are defined in the stylesheet but in webpage. Google Chrome users do not install add-ons the Developer Tools will built inside the Google browser itself.
How to Remove Unused CSS from the Stylesheet
We have some points for this unused selectors in your CSS files in Google Chrome:
1. Open any page of your website in Google Chrome and then copy the Dev Tools available under File -> Tools -> Developers Tools.
2. Then Click the Audit tab in the Dev Tools and select the “Web Page Performance” and “Reload the Page and Audit on Load” options. click the “Run” button to begin the CSS audit process.
3. Expand the results page, “Remove Unused CSS Rules” group and select the CSS file that are linked from your site. we can also ignore the CSS files added by social plugins and widgets as we do not have control over them.
You will get a sorted list of all styles that are defined in the CSS file but they are not used anywhere on the current page.
Finally we can copy and save the results in a text file and repeat the steps for other pages on your site. This is essential because all selectors may be used on all pages. You can find the count of various selectors in the combined resultset, By using Google Sheets, and the selectors with the highest count can probably be removed “safely”.
The CSS files of website have several rules but they are no longer used by any element on the web pages. For example you have added a site search box on your website and the associated styles went into the stylesheet. If we want to remove the search box, the styles may continue to exist in your CSS they are not used anywhere.
The unused entries in CSS files will increase the page load time of website and also affect the site performance as the browser has to do the extra work. if the impact on the performance is less, if the files are kept clean and well-structured it would make your task of maintaining CSS easier.
Dust Me is the popular add-on in Opera and the Firefox browser that scans the current web page and lists all the unused CSS that are defined in the stylesheet but in webpage. Google Chrome users do not install add-ons the Developer Tools will built inside the Google browser itself.
How to Remove Unused CSS from the Stylesheet
We have some points for this unused selectors in your CSS files in Google Chrome:
1. Open any page of your website in Google Chrome and then copy the Dev Tools available under File -> Tools -> Developers Tools.
2. Then Click the Audit tab in the Dev Tools and select the “Web Page Performance” and “Reload the Page and Audit on Load” options. click the “Run” button to begin the CSS audit process.
3. Expand the results page, “Remove Unused CSS Rules” group and select the CSS file that are linked from your site. we can also ignore the CSS files added by social plugins and widgets as we do not have control over them.
You will get a sorted list of all styles that are defined in the CSS file but they are not used anywhere on the current page.
Post a Comment