Optimizing the Google +1 button for speed

If you’re like most bloggers and site owners, you’ve probably already added or are planning to add the new Google +1 button to your website, to go along with the Twitter and Facebook buttons. Having implemented the +1 button I’ve found that the script takes a long time to load, and does not even load if you’re on an iPhone or iPad. This actually comes as a shock to me considering Google itself is a huge advocate of page speed improvements. The file (plusone.js) is 4 KB (before gzipping) and gets assigned a short expiration time of only 60 minutes by Google. Thankfully the script is gzipped and is only semi-minified, but it still takes a new uncached hit about 1.26 seconds to complete. Most of this time is spent in either the Blocking or Waiting stages, which might have something to do with it being served from a secure server. The decision to load the file over HTTPS by default is a bit baffling to me, especially since the handshake is historically slower. Unless sensitive information exists in the JS code which could be another interesting topic. Google has been doing some work on SSL FalseStart in Chrome to alleviate SSL latency and it seems their goal is to eventually serve all their services securely. Plusone.js then loads a second much larger js file from plusone.google.com also over SSL which comes in at about 57 KB (before gzipping). This file tacks on another 1.17 seconds to the completion time for the +1 button. After seeing how slow the Google +1 button loads and how it can actually degrade your website’s overall pageload time, I started looking around for answers. First of all, I found that I’m not the only one complaining about the issue. Numerous others have started to point out the speed issues with the +1 button. My second thought was to perhaps remove the button from the site, although considering the effect the +1 button has on your website’s ranking that would mean less love from Google. So what’s a developer to do? If we keep the button on our site, overall pageload times spike. But if we remove the button, or not add it, we might lose out on a potential piece of the social voting pie which most believe affects your search performance. So here are my techniques for making Google +1 button load faster, or at least not slow down your site. Interestingly enough these techniques are the same set of tips and tricks that Google’s own Page Speed recommends for webmasters.

1) Save a step, Use Https

Make sure you use the HTTPS protocol in the URL for the JavaScript source, as the original version of the button snippets given out by Google included the HTTP version https://apis.google.com/js/plusone.js which just does a redirect to https://apis.google.com/js/plusone.js This issue has since been corrected by Google when you use Google’s +1 button generator site.

2) Don’t load the script on Mobile devices

As stated by Google, currently the Google +1 button does not support mobile devices like the iPhone, iPod touch, iPad, or Android. This means if you have the button code on a mobile site you’re basically wasting HTTP connections and adding extra weight to your site’s throughput. To get around this fact you need to write a little utility function in JavaScript that sniffs the userAgent for unsupported devices, and only makes a call to the script if your client is not one of those devices. For example in the case of an iPhone and iPad website, you would do something like this:

function isMobileUser() {
  return /iphone|ipod|ipad|android|blackberry|mini|windows\sce|palm/i.test(
    navigator.userAgent.toLowerCase(),
  );
}

if (!isMobileUser()) {
  //include the plusone.js code here
}

3) Load the plusone.js script asynchronously

HTML 5 has introduced the ability to load scripts asynchronously allowing the rest of the page to load independently of potential bottlenecks. This feature is actually already in use for the Google Analytics code. Keep in mind that only Chrome and Firefox 3.6 and above support the async feature at this time. But it does not hurt your non-supporting browsers in any way so it’s safe to use. Here’s the code that combines the check for unsupported mobile browsers from before to load the +1 button script asynchronously. Note that since this code is loaded asynchronously it doesn’t matter if you put the call in the footer or header.

function isMobileUser() {
  return /iphone|ipod|ipad|android|blackberry|mini|windows\sce|palm/i.test(
    navigator.userAgent.toLowerCase(),
  );
}

if (!isMobileUser()) {
  // create a new script element in the DOM
  var gp1script = document.createElement("script");

  // set it's type attribute, not really needed in HTML 5 but just to be safe
  gp1script.type = "text/javascript";

  // set the HTML 5 attribute of async to true for the script tag
  gp1script.async = true;

  // set the source attribute to the https version of the google pluseone code
  // change this to your own server path if you are cosidering using option 4 below
  gp1script.src = "https://apis.google.com/js/plusone.js";

  // add the new script tag to the head or body of the page
  (
    document.getElementsByTagName("head")[0] ||
    document.getElementsByTagName("body")[0]
  ).appendChild(gp1script);
}

You would then place the tag where you want the +1 button to render, which since it is a proprietry tag will just be ignored if the script is not present on your page.

If you’re not comfortable with the <g> tag, you can also use an HTML 5 version to render the +1 button on your site, which uses a css class of g-plusone and sets attributes as needed. For example you can display a standard +1 button with counts using this HTML 5 tag. html Note that you can also place multiple +1 buttons on a single page. For example you might have a +1 button that directs its vote to your main parent homepage like so:

<g:plusone href="https://www.your_tld.com/>API page.</g:plusone>

4 Host the plusone.js file yourself

This option has been suggested by some users, although I personally argue against it just because you’ll be responsible for continuously monitoring changes and updating your version. The big benefit here is avoiding that dreaded HTTPS server, but keep in mind the script still will make that second call to load the plusone library so you’re still not home free. Only go this route if you’re seriously considering a site improvement and are willing and capable of pushing out updates to your version of the script. I’m sure the Google +1 team is making lots of changes and adding bug fixes which you will miss out on if you forget to update the script on a daily basis. In the extreme case you could perhaps write a program that downloads the latest version of the script from Google’s servers and updates your version on a daily basis, but then again this becomes a new task to keep an eye on.

Hope this helps and let me know if you have other tips and or feedback regarding these ideas.