Geek Answers Handbook

Snooze Facebook Like Button Script Download

Google pagespeed complains about my facebook as a script button. How can i postpone the script?

45KiB JavaScript is parsed while loading the start page. Postpone JavaScript parsing to reduce page blocking. http://static.ak.facebook.com/.../xd_arbiter.php ? ... (21KiB of embedded JavaScript) https://s-static.ak.facebook.com/.../xd_arbiter.php ? ... (21KiB of embedded JavaScript) http://www.facebook.com/.../like.php ? ... (3KiB of embedded JavaScript)

Here is the code I use and I upload it to 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 the Chrome inspector):

  <script id="facebook-jssdk" async="" defer="" src="//connect.facebook.net/en_US/all.js#xfbml=1"></script>
+4
source share
3 answers

Use setTimeout luke!

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

You can load the load into another "thread" for asynchronization or delay it

+6
source

setTimeout works, but it’s not really possible to postpone, because if the page has finished loading after the set time (in this case 3 seconds), then a similar button will be loaded before the page finishes loading.

I put the button-like javscript code in my own function and put it in

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

then I set it in the body tag to run when the page loads:

 <body onload="FbButtonLoad();">

On the page where I left the containers, a button appears:

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

A slightly less perfect solution (HTML5 only) is 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") );
0
source

More articles:


All Articles