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 is a great library that makes this incredibly easy to do this. — Nate Higgins
– Nate Higgins, Commented Mar 11, 2013 at 23:21

Raptor · Accepted Answer · 2015-07-30 06:02:34Z

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, 2015 at 6:02

Raptor

54.4k47 gold badges254 silver badges405 bronze badges

answered Mar 13, 2013 at 5:55

ghost

4586 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bluantinoo Over a year ago

that's amazing. 20points of google page speed insight gained with such a small tweak! thanks ghost!

coinhndp Over a year ago

I feel so wrong when set the timeout for this. Could we do it more dynamic+

Luuk Skeur Over a year ago

If you just want the defer attribute to work use this code: js.async = true; js.setAttribute('defer', 'defer');

yoshi · Accepted Answer · 2014-10-17 13:31:41Z

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.

Renats Stozkovs · Accepted Answer · 2017-03-04 18:01:53Z

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") );

Collectives™ on Stack Overflow

Defer loading of Facebook Like Button Script

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Related