SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    How to find JS that is NOT used on a page?

    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 )

    Code:
    <!-- 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>

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,807
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    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.
    Tab-indentation is a crime against humanity.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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:
    1. 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.
    2. 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.
    3. If you want to optimize your site's performance, then you might consider using Google's PageSpeed, or Yahoo's YSLOW (see here for a tutorial).


    Hope that helps

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by Logic Ali View Post
    Unless the ability to interact is dependent upon the scripts' functionality ...
    ... in which case, the site has failed to observe the principle of progressive enhancement, which ensures that the page is usable with or without scripting ...

  6. #6
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •