SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)

    Deferring Java Script items

    To speed up the download time for my site on slow connections, it has been suggested to defer parsing of JS, how do I do this?

    I have 3 different bits of script.

    The first bit on the page is needed every time it gets loaded, but it is fine if that is done as the very last item.
    Code:
    <!-- Start of StatCounter Code -->
                <script type="text/javascript">
    var sc_project=6170797; 
    var sc_invisible=0; 
    var sc_security="4187b1bb"; 
    </script>
                <script type="text/javascript" src="http://www.statcounter.com/counter/counter_xhtml.js"></script>
                <noscript>
                <div class="statcounter"><a class="statcounter" title="joomla counter" 
                href="http://www.statcounter.com/joomla/"><img class="statcounter" 
                alt="Boiler repairs south london counter" 
                src="http://c.statcounter.com/6170797/0/4187b1bb/0/"></a></div></noscript><!-- End of StatCounter Code -->
    The second bit would also be fine if done as the last item.
    Code:
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-28748983-1']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
    The last bit which is the "Google+ button" is only used infrequently, and would not be needed at all in most cases and would ideally not be read/loaded until it was actually called for.
    Code:
    <!-- Place this tag where you want the +1 button to render --><g:plusone></g:plusone>
    Q1. Does the deferring always use the same system?
    Q2. Where do I go start learning the ins and outs of deferring JS?

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Depending on the version of the Google+ button that you're using, it could be that and the statcounter script that are slowing your page down.

    The Google Analytics script is injected in to the head with its async attribute set to true. This method of injecting scripts does not block page load nearly as much as for example referencing an external script directly like the statcounter script.

    When we talk about "deferring" JavaScript most of the time what we mean is exactly what the Google Analytics snippet is doing. The asynchronous non-blocking way of loading the script vs. the blocking of loading an external JS file that needs to be parsed before the page can continue rendering. If the file takes a long time to parse it could hold up the rendering of the page significantly.

    So, a few ways to increase performance are:
    • place all scripts at the bottom of the page, this way they will not interfere with your stylesheets and markup being loaded first.
    • where possible find an asynchronous version of third party code, like the Google Analytics code (Google+ Button has an async snippet too)
    • If you have a lot of JavaScripts you could benefit from a script loader like RequireJS (or go super extreme and use Steve Souders' ControlJS library)


    There are a few places that offer some more information:


    Hope this helps
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,822
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    All JavaScript should be inserted immediately before the </body> tag (the only exception is where the script might need to swap to a different page BEFORE loading the HTML for the current page). With that exception all other scripts will run just as well from the bottom of the page and often you can then get rid of onload tests and run the code sooner as well.
    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="^$">

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Thanks folks, I'll start with moving all JS to the end of the page code


    Quote Originally Posted by AussieJohn View Post
    ...The Google Analytics script is injected in to the head with its async attribute set to true. This method of injecting scripts does not block page load nearly as much as for example referencing an external script directly like the statcounter scrip.

    When we talk about "deferring" JavaScript most of the time what we mean is exactly what the Google Analytics snippet is doing. The asynchronous non-blocking way of loading the script vs. the blocking of loading an external JS file that needs to be parsed before the page can continue rendering. If the file takes a long time to parse it could hold up the rendering of the page significantly....
    That sounds like a good idea. The problem is that I have no idea how to actually achieve this.
    My knowledge of JS is extremely limited, to the point of not having finised 101.
    Any chance of a summary in word of less than 1 syllable?



    Quote Originally Posted by AussieJohn View Post
    ...So, a few ways to increase performance are:
    • place all scripts at the bottom of the page, this way they will not interfere with your stylesheets and markup being loaded first.
    • where possible find an asynchronous version of third party code, like the Google Analytics code (Google+ Button has an async snippet too)
    • If you have a lot of JavaScripts you could benefit from a script loader like RequireJS (or go super extreme and use Steve Souders' ControlJS library)...
    I don't have, and doubt I ever will have, any more JS than I absolutely need, so doubt that I will benefit from any script loaders.
    I will move all JS to the end of the code for starters, and try to learn more about "asynchronous JS code", whatever that may be.

    • I shall look this up and see how much I can absorb. Any recommendations for total noobs in the field of JS in terms of speeding things up? I don't feel the urge to start learning about JS coding itself (nor do I have the time), purely on how best to use existing scripts, what to do/not to do, and that sort of thing. What I most need now, is entry level info; the very basics.

  5. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by benbob View Post
    I shall look this up and see how much I can absorb. Any recommendations for total noobs in the field of JS in terms of speeding things up? I don't feel the urge to start learning about JS coding itself (nor do I have the time), purely on how best to use existing scripts, what to do/not to do, and that sort of thing. What I most need now, is entry level info; the very basics.
    The important things to take away are:
    • Move all scripts to the end of the page, just before the </body> tag
    • External scripts that are referenced like <script src="http://example.com/script.js"></script> are often the main performance problem, load them as late as possible.
    • External scripts that are injected with code similar to the Google Analytics snippet won't block the page from rendering and should be preferred to loading a script using a <script src=""> tag. So if your third-party scripts offer those kind of code snippets you should use those instead.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


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
  •