The speed of using one button Google Plus. Mouse loading

Question

I would like your opinion on the problem and solution that I have google plus one button (and any other social widget).

We have a website with high traffic that works quickly and smoothly (load time less than 1 second). When trying to implement the google plus button, we saw that our download time had grown to absurdity.

Does Google blur all download times and they still make a slow widget?

We need social widgets, but download speed is critical for our users and SEO.

I was thinking of downloading the google button after the site was loaded so that users would not notice the difference in speed, but still had the opportunity to plop with us.

I would like to hear the minuses of this approach or maybe even a better solution.

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

http://www.webpagetest.org shows the same speed as before the implementation of the buttons.

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 I could improve this idea.

Answer 1

We 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"}); }); } 

The function starts a few milliseconds after the window loads.

Answer 2

There is a small alternative to this onLoad - you can do this in a container hang event. Growth potential will not be slow to load, and you may have buttons of your own design suitable for page design. He will also not load people who do not bother them. It may even give you additional analytical information. The downside is that from hovering to loading, you still have the same loading time. One might be worried that the time required to download after a hang is enough to turn them off.

Techcrunch does a similar thing on its homepage, although they do it on the entire news container. Keep in mind their site is terribly slow anyway.