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?