Find Unused Images, CSS Rules, Js Script Blocks

find unused images, css rules, js script blocks

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?

How Do I Make a Bash Script To Find Unused Images in a Project?

With drysdam's help, I created this Bash script, which I call orphancheck.sh and call with "./orphancheck.sh myfolder".

#!/bin/bash

MYPATH=$1

find "$MYPATH" -name *.jpg -exec basename {} \; > /tmp/patterns
find "$MYPATH" -name *.png -exec basename {} \; >> /tmp/patterns
find "$MYPATH" -name *.gif -exec basename {} \; >> /tmp/patterns

for p in $(cat /tmp/patterns); do
    grep -R $p "$MYPATH" > /dev/null || echo $p;
done

Find out what CSS styles are being used on a given page

I think this website does what you want: CSS Trashman. It takes a little while to run, but it works. It reduced my personal site's CSS from 3.31 KB to 402 Bytes.

If you would rather use a command-line tool, CSS Rationator powers CSS Trashman.

Is it worth removing unused CSS?

Is it worth removing unused CSS rules?

I would say yes. To have any unused code in your production build is not cool .

However, unless something has gone very wrong, it is highly unlikley that your CSS is the reason for slow page loads, in fact the impact of loading a couple pages of unused css rules will be almost neglible. It's more likley to be images/ media, or maybe scripts.

You should probably investigate whats slowing down your page. Have a look in the network tab of your dev tools to start debugging why page load is slow, Google Page Load Insights may also help. Have a look at this blog series, about speeding up your web apps too.

If you've not done so already you should probably minify and bundle your CSS and JS for production also.

---

How to find and remove unused CSS rules

Removing unused CSS is a common task, and there are a lot of packages and tools out there which make it strait-forward. There are several options, going forwards:

1. Manually remove unused CSS.

If your app is still quite small, this will probably be the easiest approach.

1. Open Chrome DevTools
2. Open the command menu with: cmd + shift + p
3. Type in “Coverage” and click on the “Show Coverage” option
4. Select a CSS file from the Coverage tab which will open the file up in the Sources tab

Source: Google Developer, Chrome 59

2. Use an online tool

There are tools out there, where you can just feed it a link to your site, and it will search and find unused CSS. The drawback here, is that this won't work locally.

• The best tool available it probably UnusedCSS, however it only
  allows you to do one site for free.
• UnCSS it totally free, but not as comprehensive.
• PureifyCSS is also good, and free.

3. Automate CSS removal

uncss allows you to automate unused CSS removal, either at built-time, or complile-time. It also works with Grunt and Babel.

---

A word of warning, some of your CSS might be detected as unused, when actually you are using it later on, such as when a request has finished loading. Be sure not to delete classes that are indirectly used.

Edit:

Be careful when using coverage for CSS usage, it considers media
queries, hover effects and others as useless since they're not applied
when loading your page

See also: https://css-tricks.com/unused/

Extracting only the css used in a specific page

I've used Dust-Me Selectors before, which is a Firefox plugin. It's very easy to use and versatile as it maintains a combined list across a number of pages of which CSS values are used.

The downside is that I wasn't able to automate it to spider an entire site, so I ended up using it just on key pages/templates of my site. It is very useful nonetheless.

http://www.sitepoint.com/dustmeselectors/

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

Contrary to the comment above Dust-Me Selectors 2.2 is compatible with Firefox 3.6 (I've just installed it).

---

Related Topics