Defer Loading JavaScript Files to Improve Page Load Time

Almost all sites and blogs have various social sharing buttons like 'Tweet', 'Like' or '+1' to spread there writings. To render these buttons we need to import some JavaScript source files from there respective locations. The task of copy-paste of the button code is simple and does not require any expertise. But there is a great downside of this.

In order to load and display a page, the browser first must parse the contents of all `

You can do this by any of the usual scripting means, but here I have used scripted DOM element.

Part 3

Now insert individual code for rendering the buttons at the place you want them. For example to render those three buttons, place this part of code at that point.

//Google+ <g:plusone size="medium" href="http://www.site_url.com"></g:plusone>

//Twitter <a href="https://twitter.com/share" className="twitter-share-button" data-url="http://www.site_url.com" data-count="horizontal" data-via="yoursite">Tweet</a>

//Facebook <fb:like href="http://www.site_url.com" layout="button_count" send="false" show_faces="false" font="tahoma"></fb:like>

So you have seen that the peice of code they provide is broken in two parts. First part in included in step 1, and the second part is included in step 3. In the similar fashion you can add the codes for other buttons.

To test if it is working, reload the page in Chrome with developer console and observe timings. Take reference of this snapshot.

There are services which automatically take care of these optimizations and reduce the page loading time to just a few milliseconds by optimizing all assets such as CSS, JS, Images, Fonts etc.

That's all for this post. If you face any problem in doing this, do post in comments. I'll try to reply.