Skip to main content

How To Remove Unused CSS Code From Your Stylesheet

Every blogger try to increase SEO score and page speed of their blog. Since CSS is the most important area of web design and almost every page has stylesheet and class selector codes that's why this is the vital point of a blog where every blogger need to concentrate most. Read also : how to resolve Gmail / PlayStore login problem on smartphone.

To increase SEO score, page speed CSS (Cascading Style Sheet) plays an important role in your blog. An unused CSS code decrease your page speed to load your blog quickly. Consider that you have added a new widget and the associated styles of that widget went into the stylesheet to your blog.

After some times you believe that it is outdated and decide to remove the widget from your blog. But most times we remove the widget from the layout and forget to dig out the styles from the stylesheets. After that stylesheet becomes an unused or dead CSS selectors. Read also : how to protect your computer from WannaCry ransomware virus.

These unused entries in your CSS files increase the page load time and also affect the site’s performance as the browser has to do extra work for parsing all the extra rules. And even if the impact on performance is minimal, it would make your task of maintaining CSS easier if the files are kept clean and well-structured. That's why it is important to remove the unused CSS selectors to speed up browser rendering of your blog. Google also recommends to remove unused CSS

There are several tools that lets you find and locate unused CSS selectors within your site pages. Among the Chrome Audit tool is the best because it does not require any plugins.

Google Chrome Audit Tool

Chrome browser has an awesome and overlooked feature built in its Developer tools called 'Audit tool'. To use the Audit tool you need to do the below steps.

Step 1. Click customize and control Google Chrome button i.e, horizontal bars located extremely top right corner of Chrome browser.

Step 2. Click More tools  and then Developer tools.

Step 3. Click on the Audits tab within the Developer Tools window.

To skip the above steps just press Ctrl + Shift + I on the keyboard to open Audit tool.
Step 4. Now make sure that Web Page Performance and Reload Page and Audit on Load options is checked.

Step 5. And after that click Run button. Wait for a while till the Audit tool display the results.

Step 6. Now expand the Remove unused CSS rules group and then select the CSS files that are linked from your blog. Read also : How to put adsense ad below blogger post title.

Now you can easily locate and remove the unused CSS files from your template / stylesheet. You need to ignore the CSS files added by social plugins and widgets since you do not have control over them. Read also : Private Browsing in Web Browser

Firefox Dust-Me Selectors

Dust-Me Selectors is a Firefox extension which help you to find unused CSS codes of your blog. After adding this extension to Firefox, you need to click the Scan this page which is a Dust-Me Selectors icon looks like a broom located right side top corner of Firefox. Once you click on it, start scanning the web page and display the results. You can export the results also.

Once you remove the unused CSS codes from blog, browser starts rendering your blog speedily and decrease the load time.

Thanks for reading. Please share your views on the same. Share the post with your friends on social media. Your one comment and one share can appreciate me lot.