Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 5 years ago.
My website has many webpages and I am trying to clean up my stylesheets and scripts. About 10% or more of each js/css are not being used by any of the html pages in my website. What I need is to remove the common unused and redundant css and js. I did a bit of research and found this. But it is not free.
NOTE:
- Some of the js/css are being called by more than one html page and still there is a portion of each js/css not being used by any of the html pages which are calling them.
- My website is only compatible in Chrome.
Yeah, you should use Addy Osmani's grunt-uncss plugin to clean up unused CSS. I am not so sure whether you can use a tool for removing unused JS, since it depends on application logic, which part of JS code will be called.
Open chrome DevTools, under Audits you can Audit the present state or reload the page and Audit on Load
Then under Web Page Performance there's a section that says: "Remove unused CSS Rules
Now it when I used it, I saw that it was listing some css that I was using problem was at the present state it wasn't being used so if you're toggling classes then obviously it'll show it if the class is not currently applied.
BTW if that doesn't show up as far as I know It works in chrome canary. Also I don't remember if I enabled a flag for this. (I don't think so)
First of all, there are complete solutions, some of which are probably already referenced on SO, but I'm not familiar with any of them, and many are likely to cost money. If I were you, I'd start searching around with the keywords "clean up css lint" and "clean up javascript lint" or something similar. I would not go and write my own code for this purpose.
Now if I weren't you or after a few hours of searching I still hadn't found anything that met my needs, I might decide to try this myself. What you could do if you're willing to get dirty, at least for the CSS, is run a script locally to run through each served HTML file and
- Extract all of the referenced stylesheets from each, making a list
- Extract the names of all CSS classes and ids from each, making a list
- Match the list against the classes and ids actually used in the HTML
- Make a list of all those that aren't, and store it in a file for easy access
You could throw something like this together in Python in maybe a few hours if you're familiar with it. Of course, this depends on what language you use for quick and dirty scripting.
Analyzing javascript files would be a bit more difficult, because of the issues with logic. You could do something similar, but it might not be in your best interests to basically write your own javascript interpreter for the purpose of cleaning out a few unused functions. Yes, you code do it, but you'd be reinventing the wheel. It might actually be a decent idea to look into IDEs that have this functionality built-in. Some are free, and most importantly, you don't have to write them yourself.
You can use GTmetrix to clean up CSS code at http://gtmetrix.com/remove-unused-css.html. Give the URL and press GO!
http://www.peterbe.com/plog/mincss is a tool that when given a URL (or multiple URLs) downloads that page and all its CSS and compares each and every selector in the CSS and finds out which ones aren't used. The outcome is a copy of the original CSS but with the selectors not found in the document(s) removed.
you can also use the google chrome audit tool refer to this website http://blackbe.lt/removing-unused-css-selectors-with-google-chrome-tool/
or you can use the google chrome extensions
- https://chrome.google.com/webstore/detail/unusedcss/dokggbghedajooenkgjbamikfgnngeik
- https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh?hl=en-GB
Helium CSS is a javascript tool for discovering unused CSS across many pages on a web site. You first have to install the javascript file to the page you want to test. Then, you have to call a helium function to start the cleaning.
CSSESS is a bookmarklet that helps you find unused CSS selectors on any site. This tool is pretty easy to use but it won't let you configure and download clean CSS files. It will only list unused CSS files.
You know your code well but this should help you do all the work just read through it. Spring-cleaning Unused CSS With Grunt, Gulp, Broccoli or Brunch
You can use mention below link and clean your html code and css.
http://validator.w3.org/#validate_by_uri+with_options
