Menu
Possible Duplicate:
How do I identify and eliminate unused CSS styles from my bloated stylesheet?
I have a html page and a huge CSS file that has about 900 style entries. I tried to clean it with Dust-Me and it found about 700 unused selectors. So, I think I can just go crazy removing these selectors from the list manually. Is there a way to remove them automatically?
425
If you want to remove unused CSS entirely, you can use a tool such as PurifyCSS to find out how much CSS file size can be reduced. Once you get the CSS code you should eliminate, you have to remove it manually from the page.
1. Audit Tab: > Right Click + Inspect Element on the page, find the "Audit" tab, and run the audit, making sure "Web Page Performance" is checked. Lists all unused CSS tags - see image below.
Identifying unused CSS selectors using tools such as Dust-Me have some degree of error associated with them. For example, does it reliably identify a style referenced in dynamically created HTML - as might be done through JavaScript? The creators of Dust-Me may have been aware of this sort of pitfall and are actually protecting you by not offering to clean-up your CSS files.
The problem with identifying unused elements is that one has to make the assumption that because a usage was not found the element is unused. This is often a poor assumption. The site may not have been fully spidered resulting in missing references. Or, a dynamically created reference was not "visible" to the tool. In either case, automatically removing a CSS selector because some tool did not find a reference to it is a very large leap of faith - one that most likely will get you into trouble.
I recommend taking their generated list and doing the job by hand – very carefully!
50
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
