I am working on cleaning up pages that were built wth Twitter Bootstrap. Every page has the complete set of Booststrap Javascript codes that COULD be used. But to speed up the page I want to delete all the JS that is not used. (see example below)
From trial and error on one page, I found that only two of the JavaScript codes were actually used. 
Is there an easy program or some automatic way to determine which JavaScript pieces are used? (I really don’t want to do trial and error removal on all the pages 
)
<!-- Java Script placed at the end of the document so the pages load faster -->
<div>
<!-- Le javascript -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
</div>
It would only really be worth removing those that none of your pages use - they will be cached by the first page that loads them so any you remove will make no difference to the load time of subsequent pages unless that page uses the one removed in which case it will be slower to load.
Also if they are at the bottom of the page then they will be loading while your visitor is interacting with the page and so it will make no difference to them how long they take to load.
Unless the ability to interact is dependent upon the scripts’ functionality, which is not unusual.
Hi Greg,
There are various tools for finding redundant Javascript functions, but I’m not sure how useful these would be to you.
A quick Google search turns up quite a few interesting discussions around this topic on StackOverflow.
One of the more interesting suggestions to emerge from reading these, was to use Google’s Closure compiler for this purpose.
From the Closure compiler’s documentation:
Compilation with ADVANCED_OPTIMIZATIONS removes code that is provably unreachable. This is especially useful in combination with large libraries. If you use only a few functions from a large library file, the compiler can remove everything except those functions from its output.
Regarding, the removal of individual files, as felgall points out, the browser will have cached them anyway, so this makes little difference to your overal performance.
However, I just had a look at your site and have a couple of suggestions/observations:
- You would do yourself a favour by using the minified CSS and JS files that come with bootstrap. Bootstrap now comes with just one minified JS file which will save you several HTTP requests and a few kbs.
- You might want to take a look at customizing your bootstrap files. Here you can get a good overview of everything that is bundled with Bootstrap and deselect (i.e. not download) the components you know that you don’t need.
- If you want to optimize your site’s performance, then you might consider using Google’s PageSpeed, or Yahoo’s [URL=“http://yslow.org/”]YSLOW (see [URL=“http://net.tutsplus.com/tutorials/other/speeding-up-websites-with-yslow/”]here for a tutorial).
Hope that helps
I did the switch to the combined & minified versions of JS and CSS. Between doing that and compressing the images I was able to get the Page speed score to improve from 78/100 to 85/100.
Thanks for the tip Pullo!