Social media buttons slow down website load time

Question

I\'m creating a simple and fast website, and I\'m trying to optimize the site as much as I can. I noticed that social media buttons are slowing down the website by quite a l

Answer 1

The plugin (social media button) load times will vary depending on a number of factors, including (but not limited to):

• Your server's response time (Plugins don't load until your code tells them too.)
• The user's internet speed (in this case, yours)
• The distance to the social media website's server (for instance, Facebook's server could be located on the other side of the continent, creating latency)
• The load time of the social media website altogether

This means that there is not much you can do besides make your code as optimized as possible.

Also, it is good practice to run your Javascript plugins after the document is ready, unless otherwise specified by the plugin documentation. The setInterval is not a good approach, as it doesn't know if all the page is ready to be modified or not. So please make sure to use the $(document).ready() approach for doing anything that modifies the page content.

Answer 2

Most of the major social media buttons offer an asynchronous version of their JavaScript. You just have to scroll a little further down on the official documentation pages.

Answer 3

Try putting your like button into reusable iframe and pass the url to like.

<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 4

You could try

$(window).load(function() {

instead of

$(document).ready(function() {

so it will wait until after your images and everything has loaded.

If that doesn't help, then I would suggest having them only appear on hover. Have a bunch of static images / CSS sprites, that get replaced when the user hovers over them.

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

If you don't have server access you can try the CDN route, Cloudflare's rocket loader is very interesting, I am testing it at the minute for similar reasons, and see ~ 33% speed increase http://www.cloudflare.com/features-optimizer

If that doesn't help you could try the old favourite of sticking the buttons at the bottom of the page and repositioning with CSS so they look higher up; that way you can have them where you want them but they don't seem to interfere with the page load time.

You could try simpler oldschool alternatives like here http://zurb.com/article/883/small-painful-buttons-why-social-media-bu

or see if service like http://www.addthis.com/ or http://www.sharethis.com/ work any faster for you

Of course the elephant in the room at this point is that to have the 3 main social media buttons on the page, and for it to only cost you a second - sadly seems quite good! They are deceptively complicated buttons that don't seem well optimised, google pagespeed insights finds something to complain about with all of them iirc.

Since you are taking a 100%+ speed hit, I would suggest some A/B testing to see if you really need them, i.e. for your site does being slower decrease traffic? Does having the share buttons bring in more traffic to warrant their presence?

Answer 5

While this question is old and the person asking probably won't see my response, here is an alternative for anyone with the same issue -- as long as you don't mind sacrificing showing 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 pre-filled URL and description.

The code is very simple and you can use any image or text you want, which will make it easier to fit the buttons in with your site's 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>

Simply replace URL with the URL of you website and TEXT with a short description.

This solution requires no JavaScript and is therefore extremely lightweight. You can use logos, icon font, simple text ("Share on Facebook").

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

Answer 6

Inside the scripts that load the social media, put "defer" in them.

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