Speed up wordpress by loading Javascript Asynchronously

Generally speaking ,when a web page loads ,the browser fetches the content form top to the bottom.Usually we place Javascripts before our</ head >tag ,which means that the script is located in the top of the page.So when the webpage starts to loads ,the browser will download the unnecessary javascript which will increase the load time and will prevent or block the main content of the page.


The fact is ,java script are not very necessary and the loading of the content should be given more importance.There fore we can make a little tweak in the script which will ensure that the javascript is only loaded only after the content of page is loaded.In other words we change the position of javascript form top to the bottom.

Why should you load Javascript asynchronously

This little tweak id highly effective.It prevent render blocking javascripts which you see in Google page speed Checker.Also this will decrease the total page loading time of your blogger or wordpress blogs to less than 25 percent.

Almost every blogs uses social widget which include a Google plus button ,a Facebook like button ,tweet button and a pintrest or linked in button.And the script that is used to call these widget are heavy and will minimise your pagespeed and will block the rest of the websites form loading.But if you chose to load the script asynchronously ,you will experience and increase page performance and the social button will only load once the content of the webpage loads completely

Before Applying Asynchronous scripts (Results by GTmetrix)

After Applying Asynchronous scripts (Results by GTmetrix)

Tweak the script ! load your script Asynchronously

Google script load asynchronously in the default mode.f yo insist,you can remove Google plus one script form the below code

Step1:Place this code before your </head> tag

<script type="text/javascript">
function ngfbJavascript( d, s, id, url ) {
var js, ngfb_js = d.getElementsByTagName( s )[0];
if ( d.getElementById( id ) ) return;
js = d.createElement( s );
js.id = id;
js.async = true;
js.src = url;
ngfb_js.parentNode.insertBefore( js, ngfb_js );
};
</script>

Step2:Paste this code immediatly after the code pasted in step 1

<script type="text/javascript">
ngfbJavascript( document, "script", "facebook", "https://connect.facebook.net/en_US/all.js#xfbml=1&appId=525239184171769" );
ngfbJavascript( document, "script", "gplus", "https://apis.google.com/js/plusone.js" );
ngfbJavascript( document, "script", "linkedin", "https://platform.linkedin.com/in.js" );
ngfbJavascript( document, "script", "pinterest", "https://assets.pinterest.com/js/pinit.js" );
ngfbJavascript( document, "script", "stumbleupon", "https://platform.stumbleupon.com/1/widgets.js" );
ngfbJavascript( document, "script", "twitter", "https://platform.twitter.com/widgets.js" );
</script>

Step3:If you have got a facebook app Id of your own ,then replace the text in orange with your own id.(this is optional).

Step4: Now remove all other social scripts from your blog .And incase you need to add any further scrips into the asynchronous tail ,Paste this code before the </script> in step 2 code

ngfbJavascript( document, "script", "pinterest", "YOUR-SCRIPT-URL" );

That's it.We have just made all the script load asynchronously.Hope this tips would help you in some way to optimise your blog.Do share your feed back ,we are hoping to learn !!!