Deferring Java Script items

JavaScript
1

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.

<!-- 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.

<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.

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

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:

There are a few places that offer some more information:

Hope this helps :slight_smile:

3

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.

4

Thanks folks, I’ll start with moving all JS to the end of the page code

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?

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

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.