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

Try to use async loading for Social init scripts:

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

Answer 2

If you came here to find solution how to load facebook social plugins faster - e.g. how to render them BEFORE window.onload() event occures (because of slow network on wifi / large image on page / ...) you may try my solution:

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

fbAsyncInit is called as soon as facebook sdk js file is loaded (e.g. fast) and you can fake social buttons to render earlier (before other resources like images are loaded) using custom load event dispatching. Be aware of consequences when you fire onload() event earlier depending on your other javascript code/libraries.

Another solution is to wrap your social plugin with sdk loading into iframe. FB API will not wait for window.onload of parent window and will render social plugins earlier.

Answer 3

The social widgets should not be slowing down your load time too much, unless they are blocking more important scripts that are waiting for the page to finish loading. The code you're using is asynchronous, which helps, but in most browsers this will still block the window.onload event. See Stoyan's post here for information about how you can load the JS SDK in a non-blocking way using iframes.

If that's too much, and you want to delay the SDK downloading or running (and speed it up once it does run), here is my recommendation:

First, either use a library like jQuery that provides a way to hook into the DOM being ready in a cross-platform fashion. Here is one implementation. Once you have your "DOM ready handler", you should do one of the following two things:

1. Move the JS SDK loading code into your DOM ready handler.

2. Take xfbml: true out of FB.init(...), if you have it (in this case, you don't), and take xfbml=1 out of the SDK URL. This prevents social widgets from being parsed and initialized immediately. Then, call FB.XFBML.parse() in your DOM ready handler. See the documentation here for that method. The best thing to do for performance would be to specifically call FB.XFBML.parse(document.getElementById('')) so that the SDK doesn't waste time going over the whole DOM.