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>