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

Question

Is there a 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.

Kerns

More info at #136157 – Sternwheeler

Try gulp-delete-unused-images for images – Wartow

I disagree with the close reason. stackoverflow.com/help/on-topic: if your question generally covers… software tools commonly used by programmers; and is ... then you’re in the right place to ask your question!. It's on topic: OP doesn't ask a third-party tool, but just the built-in Google Chrome developer tools. – Haematinic

Answer 1

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

Ceria

Good to use existing tools, but this only scans the loaded page, not the entire site? – Gi

Awesome, thanks. Be careful about responsive websites because you will have to reload for different sizes in order to know that one or more of these styles aren't being used. It only detects for the styles of the viewport being viewed. – Joettejoey

This might not be a viable option for sites that compress all their css in a single file. If you audit a particular page, it will show a lot of unused css but those styles will be used on other pages. So, auditing a single page is not a good option in my opinion. – Dena

In the new version "Coverage in green / red", how to automatically remove all unused rules (red)? – Haematinic

Answer 2

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

Enunciate

The mirror wget option is a good way to automatically prune un-referenced and unused files, i.e. wget -m <your site>. The style sheets should be pruned from unused selectors first though - this looks like a good candidate for automatic that task: developers.google.com/speed/pagespeed/psol – Atalanti

Answer 3

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.

Azole

Yes you can find orphaned files in Dreamweaver. It is in Site > Check Links and then change the drop-down to Orphaned Files. However be careful of relative versus absolute links. It just told me that all my images were orphaned files because the actual links pointed to the live copies of the images on the web not to the local copies of the images. – Alcahest

Answer 4

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.

Bounty

Answer 5

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>");

Overtax