The default Twitter Follow code, the script loads the like button synchronously. When you add the synchronous Twitter Follow button to your website, Page Speed Online will tell you to prefer asynchronous resources. When I tried to use it on a minimal HTML page score goes down by 8 points. If you are like me and want to get the best score possible in Page Speed you would want to know how to make it asynchronous.
Here is the original code:
<script> !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js,fjs); } } (document,"script","twitter-wjs"); </script>
Here is the modified code:
<script> !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.async=true; js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js,fjs); } } (document,"script","twitter-wjs"); </script>
I figured this out by looking at the Google +1 code. It was as simple as adding one line of code. I can’t understand why Twitter didn’t implement this in its code. Same applies for Facebook Like Button.
Thanks for this.
Sure gets the Google error resolved.
wau…thank you for this trick
Thanks ! It worked fine 😀
Hi Omar,
I like your technique of async loading of facebook script. Would you please write a post of loading ‘Videobar1’ widget of Youtube loading asynchronously. It will be great help to me. You can see Videobar1 widget on my site on left top sidebar.
Thanks.