Defer loading of Facebook Like Button Script

Question

Google pagespeed is complaining about my facebook like button script. How can I defer the script?

45KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering. http://static.ak.facebook.com/.../xd_arbiter.php?... (21KiB of inline JavaScript) https://s-static.ak.facebook.com/.../xd_arbiter.php?... (21KiB of inline JavaScript) http://www.facebook.com/.../like.php?... (3KiB of inline JavaScript)

Here's the code I'm using and I'm loading it into a .js file in the footer of my page.

(function(d,s,id){
        var js,fjs = d.getElementsByTagName(s)[0];
        if(d.getElementById(id)){return;}
        js=d.createElement(s);
        js.id=id;
        js.async=true;
        js.defer=true;//THIS DOES NOT APPEAR TO SATISFY PAGESPEED
        js.src="//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js,fjs);
    }
    (document, "script", "facebook-jssdk")
);

Results in the following script tag (via Chrome's inspector):

    <script 
    id="facebook-jssdk" 
    async="" 
    defer="" 
    src="//connect.facebook.net/en_US/all.js#xfbml=1"></script>

[Socialite.js](http://socialitejs.com/) is a great library that makes this incredibly easy to do this. — Nate Higgins, Mar 11 '13 at 23:21

score 10 · Accepted Answer · edited Jul 30 '15 at 06:02

10

Use the setTimeout luke!

setTimeout( function () {
   (function(d,s,id){
         // load js
         ...
      }
      (document, "script", "facebook-jssdk")
   );
}, 3000);

You can throw the load in another 'thread' to async or Defer it

edited Jul 30 '15 at 06:02

Raptor

53,206
45
230
366

answered Mar 13 '13 at 05:55

ghost

458
6
11

1

that's amazing. 20points of google page speed insight gained with such a small tweak! thanks ghost! – bluantinoo Jun 16 '15 at 15:24
I feel so wrong when set the timeout for this. Could we do it more dynamic+ – coinhndp Apr 03 '20 at 14:54
If you just want the defer attribute to work use this code: `js.async = true; js.setAttribute('defer', 'defer');` – Luuk Skeur Nov 09 '20 at 19:48

score 4 · Answer 2 · answered Oct 17 '14 at 13:31

setTimeout works but it's not real defer, since if the page finished loading after the time set (in this case 3 seconds) the like button will be loaded before the page finished loading.

I put the like button's javscript code inside my own function and nested it inside the

<script>
    function FbButtonLoad(){
      (function(d,s,id){
         // load js
         ...
      }
      (document, "script", "facebook-jssdk")
   );
}
</script>

then I set it in the body tag to run on page load:

<body onload="FbButtonLoad();">

The button appears on the page where I left it's containers:

<div id="fb-root"></div>
<div class="fb-like" data-send="true" data-width="350" data-show-faces="true"></div>

it's better to put `FbButtonLoad();` into `$(window).load()` instead of `onload` to separate Javascript from HTML. — Raptor, Jul 30 '15 at 06:03

score 0 · Answer 3 · edited Mar 04 '17 at 18:01

Another slightly less than perfect solution (HTML5 only) would be to load the library on DOMContentLoaded.

document.addEventListener('DOMContentLoaded', function() {
    (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_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js,fjs);
    }
    (document, "script", "facebook-jssdk")
);

Defer loading of Facebook Like Button Script

3 Answers3

Linked