Menu
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>
464
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
117
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
