How can I find unused images and CSS styles in a website? [closed]

Question

Is there method (other than trial and error) I can use to find unused image files? How about CSS declarations for ID's and Classes that don't even exist in the site?

It seems like there might be a way to write a script that scans the site, profile it, and see which images and styles are never loaded.

Answer 1

There's a Firefox extension that finds unused CSS selectors on a page. It has an option to spider the whole site. Version 3.01 should work with newer versions of Firefox.

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

And here's another option.

https://addons.mozilla.org/en-US/firefox/addon/css-usage/

Answer 2

You don't have to pay any web service or search for an addon, you already have this in Google Chrome under F12 (Inspector)->Audits->Remove unused CSS rules

Screenshot:

Update: 30 Jun, 2017

Now Chrome 59 provides CSS and JS code coverage. See https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Answer 3

At a file level:

use wget to aggressively spider the site and then process the http server logs to get the list of files accessed, diff this with the files in the site

diff \
 <(sed some_rules httpd_log | sort -u) \
 <(ls /var/www/whatever | sort -u) \
 | grep something

Answer 4

CSS Redundancy Checker is a tool you run locally, which you pass a stylesheet and either a list of URLs or a directory of HTML files. Here's the description given on the tool's site:

A simple script that, given a CSS stylesheet and either a .txt file listing URLs of HTML files, or a directory of HTML files, will iterate over them all and list the CSS statements in the stylesheet which are never called in the HTML.

Basically, it helps you keep your CSS files relevant and compact. And it's reasonably accurate.

Answer 5

Try WARI - Web Application Resource Inspector.

It finds unused images, unused and duplicate CSS/JS.

Link: wari.konem.net

Answer 6

As noted by Tim Murtaugh on the A List Apart blog post, "Two Tools to Keep Your CSS Clean":

csscss

csscss will parse any CSS files you give it and let you know which rulesets have duplicated declarations.

And most relevant to the question:
helium-css

Helium is a tool for discovering unused CSS across many pages on a web site.

The tool is javascript-based and runs from the browser.

Helium accepts a list of URLs for different sections of a site then loads and parses each page to build up a list of all stylesheets. It then visits each page in the URL list and checks if the selectors found in the stylesheets are used on the pages. Finally, it generates a report that details each stylesheet and the selectors that were not found to be used on any of the given pages.

Answer 7

I seem to recall either Adobe Dreamweaver or Adobe Golive having a feature to find both orphaned styles and images; can't remember which now. Possibly both, but the features were well-hidden.

Answer 8

TopStyle has a suite of tools for locating and dealing with orphan classes. It will also give you reports on where IDs and classes are used in the HTML, allowing you to quickly open and skip to the relevant markup. Here's the blurb from the website regarding this feature:

Site Reports: See at a glance where styles are used in your site. Find out where you've applied style classes that aren't defined in any style sheets, or see what style classes you've defined that aren't being used.

Very useful for dissecting unfamiliar websites.

It doesn't find unused images, though.

Answer 9

Chrome canary build has an option in the developer toolbar for "CSS Coverage" as one of the experimental developer features. This options comes up in the timeline tab and can be used for getting a list of the unused CSS.

Please note that you would need to enable this feature in the settings in the developer toolbar too. This feature should probably make it to official chrome release.

Answer 10

I found this tool that works with all versions of Firefox! It takes a little while to learn how it works, but once it starts it seems pretty good. It will save a new version of the CSS with remarked out CSS selectors so you can quickly revert if you need to.

CSS Usage - Firefox Addon

Answer 11

This little tool gives you a list of the css rules in use by some html.

Here it is on Code Pen

Click on Run code snippet, then click on Full page to get in to it. Then follow the instructions in the snippet. You can run it full page to see it work with your html / css.

But it's easier just to bookmark my code pen as a tool.

/* CSS CLEANER INSTRUCTIONS
   1. Paste your HTML into the HTML window
   2. Paste your CSS into the CSS window
   5. The web page result now ends with a list of just the CSS used by your HTML!
*/

function cssRecursive(e) {
  var cssList = css(e);
  for (var i = 0; i < e.children.length; ++i) {
    var childElement = e.children[i];
    cssList = union(cssList, cssRecursive(childElement));
  }
  return cssList;
}

function css(a) {
  var sheets = document.styleSheets,
    o = [];
  a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
  for (var i in sheets) {
    var rules = sheets[i].rules || sheets[i].cssRules;
    for (var r in rules) {
      if (a.matches(rules[r].selectorText)) {
        o.push(rules[r].cssText);
      }
    }
  }
  return o;
}

function union(x, y) {
  return unique(x.concat(y));
};

function unique(x) {
  return x.filter(function(elem, index) {
    return x.indexOf(elem) == index;
  });
};

document.write("<br/><hr/><code style='background-color:white; color:black;'>");
var allCss = cssRecursive(document.body);
for (var i = 0; i < allCss.length; ++i) {
  var cssRule = allCss[i];
  document.write(cssRule + "<br/>");
}
document.write("</code>");

Answer 12

All the tools listed here are great for CSS. I don't know about Dreamweaver & Co. But I made a small program a while back to help me clean up my website projects

Find-Unused-Files

It does not help with CSS & stuff, but instead with orphaned images and other types of files.

Hope it helps!

Answer 13

Helium CSS is a great tool for this. It should be noted though that you should run this tool on a development or local version of your website. If you run this on a production version, your visitors will be able to see the Helium test environment.

https://github.com/geuis/helium-css

http://www.unknownerror.org/opensource/geuis/helium-css

Answer 14

To answer your question about a tool to find unused image files, you can use Xenu Link Sleuth to spider your site to find all of the images that your site uses. Then Xenu prompts you for ftp access so that it can crawl your directories to find orphaned files. I have not yet used it on a production server but it sounds worthy to look into.

EDIT: You just have to be careful not to delete images that are used by javascript.