42

We have a fairly large asp.net website.

The images, css and javascripts are property organized in the website project but as we are changing the look and feel of the website, I would like to know if there is a tool/add-in that will help me identify which images are not being used in the website.

I would like to find the same thing with css and javascript as well. I have looked at dustme firefox extension but that only does css.

Somnath Muluk
  • 55,015
  • 38
  • 216
  • 226
Pratik Kothari
  • 2,446
  • 2
  • 32
  • 54

5 Answers5

58

Unused CSS

  1. Take a look at the Firefox extension Dust-Me at http://www.sitepoint.com/dustmeselectors/.

  2. Google Chrome has a website auditing tool in their developer console.

  3. Also I found this site for removing unused css - http://unused-css.com/ . Type the url of a site and you will get a list of CSS selectors. For each selector, a number indicates how many times a selector is used. This service has a few limitations. The @import statement is not supported. You can't configure and download the new clean CSS file.

  4. 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.

  5. 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.

  6. How can I find unused images and CSS styles in a website?

Unused Images:

  1. http://obsidience.blogspot.in/2008/06/using-powershell-to-find-unused-images.html
  2. How Do I Make a Bash Script To Find Unused Images in a Project?

Unused JS:

  1. Find unused CSS rule and js script in a web project?
  2. Find unused Javascript functions?
Community
  • 1
  • 1
Somnath Muluk
  • 55,015
  • 38
  • 216
  • 226
  • 2
    There are some broken links. Also you need to be careful when using Chrome Inspector Audits. It doesn't have any regard for CSS from a separate stylesheet file for being possibly shared with other pages, and complains about unused CSS there. It's OK to do that for inline CSS, but not for a CSS file. The audit does not scan the entire site. It just scans the current page. – ADTC Dec 20 '15 at 13:23
  • About CSS: I recommend the grunt task purifycss which also takes care about ids and classes added by javascript – user2718671 Sep 16 '16 at 14:46
  • 4
    [shameless plug] I created a free online tool that finds unused CSS: https://www.jitbit.com/unusedcss/ and *crawls your website recursively* – Alex from Jitbit Feb 09 '18 at 20:31
3

One possible approach would be:

  1. to use your browsers save-for-offline functionality and do an entire download of the site and all its resources to a local folder.
  2. Then run a little perl script that will slurp up all the *.{jpg,png,gif...etc}
  3. then do a diff on the list when you run it from your project source directory.

Obviously there are some limitations to this approach but if its all you have it might be a good start!

Somnath Muluk
  • 55,015
  • 38
  • 216
  • 226
H. Green
  • 735
  • 5
  • 10
2

Since Javascript is a dynamic language and called in dynamic ways, you wont fine a tool to find unused javascript.

You can use a tool call JSCoverage which profiles your code and lists which methods are called. This should help you a bit.

Mohib Sheth
  • 1,135
  • 10
  • 22
1

I never had luck with any browser extensions that claim to do just that.

I run a console app that relies on AgentRansack to find unused css classes in the project directory (i.e. declared but not referenced in ascx/js etc.) - then it merges the results into a usage report. I'm assuming this could be fairly easily adjusted to look for image srcs etc., as long as the project directory has unused pages removed.

Is there demand for a properly distributed tool like that?

Oleg
  • 24,465
  • 8
  • 61
  • 91
1

Server will not open unused files, so you can check last access time. Right?

Leonid
  • 3,121
  • 24
  • 31
  • 1
    CSS/JS files come in a single, sometimes 2 or more files. It may so happen that the site uses some classes in the CSS but the others are not used. However, the server will access that CSS because the HTML is referencing it. Same goes for the JS. Functions may not be used but as a JS file itself, the sever would have accessed it. – Brajeshwar Mar 16 '16 at 18:14
  • @Brajeshwar you're right, but the method is helpful nonetheless. – Leonid Mar 17 '16 at 03:44