30

My website has many webpages and I am trying to clean up my stylesheets and scripts. About 10% or more of each js/css are not being used by any of the html pages in my website. What I need is to remove the common unused and redundant css and js. I did a bit of research and found this. But it is not free.
NOTE:

  • Some of the js/css are being called by more than one html page and still there is a portion of each js/css not being used by any of the html pages which are calling them.
  • My website is only compatible in Chrome.
Improve this question
5
  • davidwalsh.name/uncss - Maybe this one could help a bit for the css?
    – Nick
    Commented Feb 13, 2015 at 10:20
  • The uncss will make one single file which has all the required css content for each page. But I want to keep the current css files and remove the unused css from within them.
    – HackCode
    Commented Feb 16, 2015 at 15:46
  • if you can get all your js code to work in one big file, you can use the closure compiler to remove unused javascript. there are free unused css extensions for chrome and firefox.
    – dandavis
    Commented Feb 17, 2015 at 5:23
  • i still don't think anything would correctly handle modern pages that use stuff like body.mobile h1 {}, :target {}, input:invalid{}, even just :hovers...
    – dandavis
    Commented Feb 23, 2015 at 7:42
  • 1
    I wrote an unused CSS-finder tool for myself, then made it public, check it out jitbit.com/unusedcss
    – Alex from Jitbit
    Commented Feb 2, 2018 at 20:19

7 Answers 7

Reset to default
8

Yeah, you should use Addy Osmani's grunt-uncss plugin to clean up unused CSS. I am not so sure whether you can use a tool for removing unused JS, since it depends on application logic, which part of JS code will be called.

Improve this answer
1
  • For JavaScript, someone elsewhere suggested JSLint. This doesn't automate the process, but will warn of unused variables, functions, etc.
    – Sam Dutton
    Commented Apr 20, 2016 at 15:42
7

Open chrome DevTools, under Audits you can Audit the present state or reload the page and Audit on Load

Then under Web Page Performance there's a section that says: "Remove unused CSS Rules

Now it when I used it, I saw that it was listing some css that I was using problem was at the present state it wasn't being used so if you're toggling classes then obviously it'll show it if the class is not currently applied.

BTW if that doesn't show up as far as I know It works in chrome canary. Also I don't remember if I enabled a flag for this. (I don't think so)

Improve this answer
3

First of all, there are complete solutions, some of which are probably already referenced on SO, but I'm not familiar with any of them, and many are likely to cost money. If I were you, I'd start searching around with the keywords "clean up css lint" and "clean up javascript lint" or something similar. I would not go and write my own code for this purpose.

Now if I weren't you or after a few hours of searching I still hadn't found anything that met my needs, I might decide to try this myself. What you could do if you're willing to get dirty, at least for the CSS, is run a script locally to run through each served HTML file and

  1. Extract all of the referenced stylesheets from each, making a list
  2. Extract the names of all CSS classes and ids from each, making a list
  3. Match the list against the classes and ids actually used in the HTML
  4. Make a list of all those that aren't, and store it in a file for easy access

You could throw something like this together in Python in maybe a few hours if you're familiar with it. Of course, this depends on what language you use for quick and dirty scripting.

Analyzing javascript files would be a bit more difficult, because of the issues with logic. You could do something similar, but it might not be in your best interests to basically write your own javascript interpreter for the purpose of cleaning out a few unused functions. Yes, you code do it, but you'd be reinventing the wheel. It might actually be a decent idea to look into IDEs that have this functionality built-in. Some are free, and most importantly, you don't have to write them yourself.

Improve this answer
3

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.

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.

Improve this answer
3

You can use GTmetrix to clean up CSS code at http://gtmetrix.com/remove-unused-css.html. Give the URL and press GO!

http://www.peterbe.com/plog/mincss is a tool that when given a URL (or multiple URLs) downloads that page and all its CSS and compares each and every selector in the CSS and finds out which ones aren't used. The outcome is a copy of the original CSS but with the selectors not found in the document(s) removed.

you can also use the google chrome audit tool refer to this website http://blackbe.lt/removing-unused-css-selectors-with-google-chrome-tool/

or you can use the google chrome extensions

  1. https://chrome.google.com/webstore/detail/unusedcss/dokggbghedajooenkgjbamikfgnngeik
  2. https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh?hl=en-GB
Improve this answer
1
  • 1
    I don't see where gtmetrix gives you an option to download the clean css file. It just displays a report.
    – Tony_Henrich
    Commented Sep 1, 2015 at 17:53
0

You know your code well but this should help you do all the work just read through it. Spring-cleaning Unused CSS With Grunt, Gulp, Broccoli or Brunch

Improve this answer
-1

You can use mention below link and clean your html code and css.

http://validator.w3.org/#validate_by_uri+with_options

Improve this answer
1
  • 1
    Please do not just add urls.
    – Nikos
    Commented Feb 23, 2015 at 12:24

Not the answer you're looking for? Browse other questions tagged or ask your own question.