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:
- Identified the UNUSED CSS
- 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”.
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.
Select the CSS and Press Clean . It will clean all unused selectors from CSS and give you option to Save the file.
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.
You can also read the How to make your website load faster
Hope this will help you..