Wednesday, July 27, 2011

Faster Google +1 With Asynchronous Mode

Google introduced Google +1 button back in June (Check out my previous blog). If you have included Google +1 button in your website or blog, you probably have noticed the webpage became a little slow on loading. It was due to the extra time Google +1 takes to render and hence it indirectly increase the loading time of the web page. Some web developer has no choice but to remove the +1 button to trade for faster page loading.

However, Google has rolled out some changes that make +1 button render up to 3x faster. In addition to the changes, it also allows asynchronous rendering and make user +1 experience even faster. By rendering the +1 button in parallel (asynchronously), it prevents the extra time it takes to render +1 affecting page loading. Web developer, now together with +1 button you web page can still load as fast as it used to be! You could obtain the new async snippet with Google +1 configuration tool here. Enjoy the new fast Google +1 experience!

Here is the Async code snippet,

<script type='text/javascript'>
   (function() {
     var po = document.createElement('script');
     po.type = 'text/javascript';
     po.async = true;
     po.src = 'https://apis.google.com/js/plusone.js';
     var s = document.getElementsByTagName('script')[0];
     s.parentNode.insertBefore(po, s);
   })();
</script>




Update: One very important note. After I change to this Async code, my +1 button intermittently fail to appear. After some research, I realize that I need to put this Async script at the end of the body. This is what Google stated, 'Place this tag after the last plusone tag'. Should have paid more attention to at the first place! After I move the snippet right before the closing body tag, everything work perfectly!

1 comment:

Thomas said...

I managed to save a few bytes with this code and produced an optimized version of it. I you are interested, you can read the post on my blog at : http://web20hub.wordpress.com/2011/08/02/google-plus-one-async-code-minified-javascript/

Post a Comment