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 type="text/javascript" src=""></script>
            <div class="statcounter"><a class="statcounter" title="joomla counter" 
            href=""><img class="statcounter" 
            alt="Boiler repairs south london counter" 
            src=""></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']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
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?