Identify and Remove unused CSS from Page

If you are working on a website using some templates which comes with the framework like Bootstrap or foundation or may be your website using Metro-UI CSS, then it might possible that you are not using all the properties/selector that are included the CSS file. And believe me guys this is BIG NO to just copy that file which includes several lines of code.

I had a same scenario in which I was working on a website that uses the website template. After development I noticed that my website is taking too much time to load. Then I looked into the Network and realized what I had done. The template CSS that I included is around 5000 lines of code, which is roughly 160Kb in file size. So when every time when my page loads, it takes time because browser has to download 160Kb file.

So What I DID ?

Just 2 Simple Steps:

  1. Identified the UNUSED CSS
  2. Removed it.

How to Identify the UNUSED CSS?

#Chrome Developer Tool

  • Open your website
  • Open developer tool (Ctrl+Shift+I) or Press F12 on browser window
  • Go to Audit Tab
  • Select “Audit Present State” and click “Run”.

Developer Tool

 

Result:

Result


How to Removed it?

#Firefox Dust-Me Extenion (I Recommend)

Dust-Me Selectors is a Firefox extension (for v1.5 or later). You can install it and start using it.

Dust me is my all time favorite extension. It extracts all the selectors from all the style sheets on the page you’re viewing, then analyzes that page to see which of those selectors are Not Used.

Dust-Me

 

Select the CSS and Press Clean . It will clean all unused selectors from CSS and give you option to Save the file.

#Online Tool

unused-css.com

unused-css.com is an online tool to clean up your CSS code. Just type  your site URL and than just Press Detect There is a PRO version avaliable, which creates the “clean” CSS. To download it, you have to subscribe to paid version.

unused-css

 

You can also read the How to make your website load faster

Hope this will help you..

2 thoughts on “Identify and Remove unused CSS from Page”

  1. Right here is the right webpage for anyone who hopes to understand this topic.You know so much its almost hard to argue with you (not that Ipersonally would want to…HaHa). You definitely puta new spin on a subject that’s been written about for many years.Excellent stuff, just great!

Leave a Comment

Your email address will not be published.