Google Plus One Button Speed. Load on mouseover

Question

I would like your opinion about an issue and solution i have with google plus one button ( and any other social widget ).

We have a high traffic site , that runs fast and smoothly ( under 1 seconds load time ). When trying to implement the google plus button we saw our load time grow to absurdity.

Google is blabbing about load times all around and they still make a slow widget ?

We need the social widgets , but the load speed is crucial for our users and SEO.

I was thinking to load the google button after the site was loaded so users would not notice any speed difference , but still had the ability to plus bullshit us.

I would like to hear the cons for this approach, or maybe even a better solution.

Using the mouseover event on the body to load the social widgets. It works , but I am not sure if this is acceptable.

http://www.webpagetest.org shows the same speed as before the button implementations.

Using jquery :

    <div id="testcase"></div>

        <script type="text/javascript">

        $(document).ready(function() {
            $('body').mouseover(function() {

                $('body').unbind();
// google html
                $('#testcase').html('<g:plusone size="medium" annotation="inline"></g:plusone>');
    // Google code 
                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>

Please let me know what you think or if I could improve this idea.

Defant

Why not use onload? I don't think you can be sure that onmouseover work the same across all browsers. – Goar

I agree about the widget bloat, I managed to get a site of mint to 98 & 98 (PageSpeed/YSlow) and three HTTP requests - and ONE button blows it out to 13 HTTP requests and sub-90 scores + an extra second or two in load times. – Hebel

We load social media stuff on hover here: www2.highpoint.edu/index.php – Bruckner

Answer 1

Have experienced the same problems, and did something like this:

function loadPlusOne() {
  $.getScript("https://apis.google.com/js/plusone.js", function () {
    gapi.plusone.render ("plusdiv", {"size": "medium", "count": "true", "expandTo": "top", "href": "http://mysite.com"});
  });
}

Function runs a few milliseconds after the window is loaded.

Glossa

Could you please make more sense, how could I use it on my html page? – Heretofore

@NullPointer - Sorry, thought it was obvious, something like this -> jsfiddle.net/uWd4T – Glossa

Thank you very much, Does it support language attribute? – Heretofore

It supports anything the plus one API supports ? – Glossa

Answer 2

There is a slight alternative to doing it onLoad - you could do it on a hover event of the container. The upside is it won't appear slow to load and you can have buttons of your own design to fit in to the page's design. It also won't load for people who aren't bothered about them. It could even give you extra analytical information. The down side is that from the hover to load you still have that same loading time. One would worry that the time it takes for those to load after the hover is enough to put them off clicking.

Techcrunch do a similar thing on their home page, though they do it on the container of the whole news item. Mind you, their site is awfully slow anyway.

Perfumery