Defer loading of Facebook Like Button Script

StackOverflow https://stackoverflow.com/questions/15349867

Pergunta

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>
Foi útil?

Solução

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

Outras dicas

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>

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")
);
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top