Social network buttons slow down website loading

Question

I create a simple and fast website, and I try to optimize the site as much as I can. I noticed that the buttons on social networks slow down the site quite a bit. I include the Facebook Like button, the Twitter button, and the Google+ button. So I did some tests:

Website without social media buttons, load time 0.24s:

Website with social network buttons , loading time 1.38s:

Here is my code:

<div id="social"> <!-- FB --> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_EN/all.js#xfbml=1&status=0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-like" data-href="http://facebook.com/textsearcher" data-width="150" data-layout="button_count" data-show-faces="false" data-send="false"></div> <!-- TWITTER --> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.textsearcher.com/" data-hashtags="TextSearcher">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <!-- G+ --> <div class="g-plusone" data-size="medium" data-href="http://www.textsearcher.com/"></div> <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> </div> 

So, I tried several things to load these social buttons without slowing down the loading of the site.

Loading buttons after one second delay via JavaScript:

 setInterval(function(){ $("#social").html("<!-- FB --><div id="fb-root"></div>....."); },1000); 

This did not help, the buttons did not load correctly, and they were tapped.

Loading buttons after the document is ready:

 $(document).ready(function() { $("#social").html("<!-- FB --><div id="fb-root"></div>....."); }); 

It didn’t help either. The buttons loaded just fine, but the site load time was> 1.00 seconds.

I'm running out of ideas. Any way to download them without slowing down the website?

PS. Used page load time for chrome in these tests

---

DECISION:

Thanks to CodeMonkey for his answer, I eventually solved this problem by loading the social buttons after the whole page was loaded . . I moved the required JavaScript code (for social media buttons) to a separate file to make my HTML / markup a bit cleaner.

JS (in a separate file, social.js):

 /* Facebook*/ (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_EN/all.js#xfbml=1&status=0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); /* Twitter */ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); /* G+ */ (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); })(); 

HTML:

 <script> $(window).bind("load", function() { $.getScript('js/social.js', function() {}); }); </script> <!-- FB --> <div id="fb-root"></div> <div class="fb-like" data-href="http://facebook.com/textsearcher" data-width="150" data-layout="button_count" data-show-faces="false" data-send="false"></div> <!-- TWITTER --> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.textsearcher.com/" data-hashtags="TextSearcher">Tweet</a> <!-- G+ --> <div class="g-plusone" data-size="medium" data-href="http://www.textsearcher.com/"></div> 

So, after this download became normal again, 0.24s:

Answer 1

You can try

 $(window).load(function() { 

instead

 $(document).ready(function() { 

so it will wait until your images and everything loads.

If this does not help, I would suggest that they appear only on hover. Have a bunch of static CSS images / sprites that are replaced when the user hovers over them.

If you don’t need this extra step and you have access to the server to install the modules, you can try google mod pagespeed to postpone javascript for you https://developers.google.com/speed/pagespeed/module/filter-js -defer

If you don’t have access to the server, you can try the CDN route, the Cloudflare bootloader is very interesting, I test it per minute for similar reasons and see a 33% speed increase http://www.cloudflare.com/features-optimizer

If this does not help, you can try the old favorite to insert buttons at the bottom of the page and move using CSS so that they look higher; that way you can have them wherever you want, but they don't seem to interfere with the page load time.

You can try simpler alternatives to oldschool, for example here http://zurb.com/article/883/small-painful-buttons-why-social-media-bu

or see if http://www.addthis.com/ or http://www.sharethis.com/ is running

Of course, the elephant in the room at the moment is that on the main page there are 3 main buttons of social networks, and for this you only need a second - unfortunately, this looks good! These are deceptively complex buttons that don't seem well optimized, google pagespeed insights finds something to complain about all of them iirc.

Since you accept 100% + speed, I would suggest some A / B tests to see if you really need them, i.e. Is there a slow decrease in traffic for your site? Do sharing buttons have more traffic to guarantee their presence?

Answer 2

The loading time of plugins (social networks) depends on a number of factors, including (but not limited to):

• Server response time (plugins do not load until your code says this too.)
• User internet speed (in this case, yours)
• The distance to the server of the website of social networks (for example, the Facebook server can be located on the other side of the continent, creating latency)
• Social Networking Website General Download Time

This means that you cannot make your code as optimized as possible.

In addition, it is good practice to run your Javascript plugins after the document is ready, unless otherwise provided by the plugin documentation. SetInterval is not a good approach, because it does not know if the whole page is ready to change or not. Therefore, please use the $(document).ready() approach to accomplish anything that modifies the contents of a page.

Answer 3

Social widgets should not slow down loading time too much, unless they block more important scripts waiting for the page to load. The code you use is asynchronous, which helps, but in most browsers this still blocks the window.onload event. See the Stoyan post here for information on how you can load the JS SDK in a non-blocking way using iframes.

If this is too much and you want to delay loading or starting the SDK (and speed it up after it starts), here is my recommendation:

First, use the jQuery library, which provides the ability to connect to the DOM, being ready in a cross-platform way. Here is one of the implementations . Once you have a ready-made DOM handler, you must do one of the following two things:

• Move the JS SDK download code to your DOM handler.

• Take xfbml: true from FB.init (...) if you have one (in this case you don’t), and take xfbml = 1 from the SDK URL. This prevents parsing and initializing social widgets. Then call FB.XFBML.parse () in your finished DOM handler. See the documentation for this method . The best thing you can do for performance is to specifically call FB.XFBML.parse(document.getElementById('')) so that the SDK does not waste time on the entire DOM.

Answer 4

While this question is old, and the person asking will probably not see my answer, here is an alternative for those who have the same problem - until you mind sacrificing an indication of the number of likes / shares / etc. ..

You can simply add links that send the visitor to the actual social network and open a sharing window with a pre-filled URL and description.

The code is very simple, and you can use any image or text that you need, which will simplify the installation of buttons in your website design.

 <a href="https://www.facebook.com/sharer/sharer.php?u=URL" target="_blank">Share on Facebook</a> <a href="https://twitter.com/intent/tweet?url=URL&text=TEXT&via=YOURTWITTERACCOUNTNAME" target="_blank">Tweet</a> <a href="https://plus.google.com/share?url=URL" target="_blank">Share on Google+</a> 

Just replace the URL with the URL of your website and the text with a brief description.

This solution does not require JavaScript and therefore is very lightweight. You can use logos, icon font, plain text ("Share on Facebook").

I also wrote a blog post that covers many other social networks .

Answer 5

Inside scripts that load social networks, add “delay” to them.

 <script defer src="http://api.facebook.com/....."></script> 

Answer 6

Try using async loading for Social init scripts:

 <script async="async">...</script> 

Answer 7

Most major social media buttons offer an asynchronous version of their JavaScript. You just need to scroll the official documentation page a bit.

Answer 8

Try putting your button in a reusable iframe and pass the URL of your favorite.

 <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fphys.org" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px;" allowTransparency="true"></iframe> 

Answer 9

If you came here to find a solution on how to download facebook social plugins faster - for example, how to make them BEFORE the window.onload () event starts (due to the slow network on wifi / large image on page / ...) you can try my decision:

 window.fbAsyncInit = function () { dispatchEvent(new Event('load')); } 

fbAsyncInit is called as soon as the facebook sdk js file is loaded (for example, quickly), and you can fake social buttons to render earlier (before loading other resources, such as images) using a special dispatch of download events. Be aware of the consequences when you fire the onload () event earlier, depending on your other javascript code / libraries.

Another solution is to port your social plugin with sdk loading in iframe. The FB API will not wait for the window window.onload of the parent window and will previously provide social plugins.