Make the Google +1 Button Load Faster

Google+ makes it obvious that offering readers the ability to click a Google +1 button on your site is a must. While Google has indicated that it may use the Google +1 button statistics as a factor in search results, more important will be having all those Google+ users see the things their friends clicked +1 on showing up in search results.

Example Google Plus One buttonMy biggest complaint with Google’s implementation of the Google +1 button code is that it loads slowly. For a company obsessed with speed in the search results it returns, Google did a lousy job of making the +1 button load fast on Web sites. Thankfully, Aaron Peters did a full analysis of Google +1 button performance and provided a solution to make Google +1 buttons run faster everywhere. You should definitely read all the why behind the configuration in Aaron’s post, but I’ll cut to the meat of it so that you can tweak your own button code.

In running a performance testing using Pingdom tools, I had already caught the fact that Google +1 redirects the JavaScript provided from an http URL to an https URL. That redirect to https will slow a page load by .5 seconds for many users, which, on top of all the other things going on in most sites, adds to an already obvious load time. If you do nothing else, change the JavaScript call for the Google +1 button from this:

<script src=”http://apis.google.com/js/plusone.js” type=”text/javascript”></script>

to this:

<script src=”https://apis.google.com/js/plusone.js” type=”text/javascript”></script>

If you want to go all the way in speeding up your page load, use the asynchronous code tweak below to load the Google +1 button in a non-blocking way. I tend to place all my asynchronous JavaScript files just before the closing /head tag, but Aaron recommends placing this code just before the closing /body tag at the end of your page as noted in his comment. Either option is much faster than trying to use the stock code provided by Google.

<!– Place this tag just before your close body tag –> <script> (function(d, t) { var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = true; g.src = ‘https://apis.google.com/js/plusone.js'; s.parentNode.insertBefore(g, s); })(document, ‘script’); </script>

<!– Place this tag where you want the +1 button to render –> <g:plusone></g:plusone>

  • Anonymous

    This script has several flaws:
    * It assumes that there is already a SCRIPT tag in the page, it will fail if there is no SCRIPT tag
    * the async attribute was introduced with HTML 5 and thus will most probably be ignored by most browsers if your site is not an HTML 5 document
    * what is the point to add a script element via Javascript while you could directly write the original Google script element with the async attribute ?

    • http://www.jakeludington.com Jake Ludington

      Every JS fails without a script tag on the the page. asynchronous JS won’t speed up a page for IE6 or IE7, but page rendering is awful in those browsers regardless.

      If you read the background on why it is faster, you would have a more clear understanding of how the page is sped up.

  • Anonymous

    This script has several flaws:
    * It assumes that there is already a SCRIPT tag in the page, it will fail if there is no SCRIPT tag
    * the async attribute was introduced with HTML 5 and thus will most probably be ignored by most browsers if your site is not an HTML 5 document
    * what is the point to add a script element via Javascript while you could directly write the original Google script element with the async attribute ?

    • http://www.jakeludington.com Jake Ludington

      Every JS fails without a script tag on the the page. asynchronous JS won’t speed up a page for IE6 or IE7, but page rendering is awful in those browsers regardless.

      If you read the background on why it is faster, you would have a more clear understanding of how the page is sped up.

  • Anonymous

    Plus the fact that it does not seem to be significantly faster.

    • http://www.jakeludington.com Jake Ludington

      It is in fact significantly faster.

      • Anonymous

        After some tests, it is not significantly faster, for the fact that the async attribute is ignored and is invalid HTML 4 and XHTML 1, except if your website is HTML 5 of course, which is far to be the case of most websites on the web. Changing from http to https does improve speed however.

        Of course that any JS requires a script tag. I was meaning that if you do not have a previous script tag, the script will fail. However I was myself wrong with this statement: there is at least one script tag. The others flaws are still valid.

  • Anonymous

    Plus the fact that it does not seem to be significantly faster.

    • http://www.jakeludington.com Jake Ludington

      It is in fact significantly faster.

      • Anonymous

        After some tests, it is not significantly faster, for the fact that the async attribute is ignored and is invalid HTML 4 and XHTML 1, except if your website is HTML 5 of course, which is far to be the case of most websites on the web. Changing from http to https does improve speed however.

        Of course that any JS requires a script tag. I was meaning that if you do not have a previous script tag, the script will fail. However I was myself wrong with this statement: there is at least one script tag. The others flaws are still valid.