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

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.

More info at http://stackoverflow.com/questions/135657/tool-to-identify-unused-css-definitions — Yasen, Jul 05 '12 at 11:52
I disagree with the close reason. https://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. — Basj, Feb 04 '22 at 00:56

Șerban Ghiță · Answer 1 · 2017-06-30T07:57:08.040

77

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

edited Jun 30 '17 at 07:57

answered Mar 05 '12 at 19:23

Șerban Ghiță

1,899
20
21

4

Good to use existing tools, but this only scans the loaded page, not the entire site? – Mark Cooper May 29 '12 at 07:53
7

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. – micah Oct 26 '12 at 06:30
2

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. – SaurabhM Oct 10 '14 at 14:35
In the new version "Coverage in green / red", how to automatically remove all unused rules (red)? – Basj Feb 04 '22 at 00:55

score 19 · Answer 2 · answered Aug 28 '08 at 20:30

19

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

answered Aug 28 '08 at 20:30

BCS

75,627
68
187
294

2

The mirror wget option is a good way to automatically prune un-referenced and unused files, i.e. `wget -m `. The style sheets should be pruned from unused selectors first though - this looks like a good candidate for automatic that task: https://developers.google.com/speed/pagespeed/psol – Daniel Sokolowski Dec 14 '13 at 20:18

score 3 · Answer 3 · answered Aug 28 '08 at 19:59

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.

answered Aug 28 '08 at 19:59

Polsonby

22,825
19
59
74

1

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. – Stuart Young Apr 22 '15 at 23:17

score 2 · Answer 4 · answered Nov 21 '16 at 16:55

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.

toddmo · Answer 5 · 2015-09-30T20:40:14.773

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

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

5 Answers5

Linked