Async javascript loading for reduced page load time

Many of my websites have the standard addins for integrating with the rest of the world- the addthis.com gadget, the facebook like button, etc. A number of them also use google maps. Each of these includes a javascript file from a remote source, which normally will slow down the load time of your pages. Google fixed their analytics scripts some time back to allow loading them asynchronously, so the page is not paused while waiting for it to load. Strangely, a lot of scripts don’t yet support this, and I’m seeing in google webmaster tools that the calculated load time of my pages has suffered as a result. What should be a tiny page that loads in literally milliseconds, is now a 3 to 5 second loading affair.

After some research, it looks like this is not a simple task to undertake. There are a number of ways to load a script async, but each has a set of drawbacks. This seems to be a great overview of the various methods currently avaialble: http://friendlybit.com/js/lazy-loading-asyncronous-javascript/ . I’ve seen that html5 also includes direct support for allowsing async loading of scripts, so maybe eventually this will no longer be a problem, but for now it’s a pretty big headache.

As time permits (or, when I get the chance to delegate it), I’m planning to try the solution listed on that linked page and see if addthis, facebook, google maps, perhaps even adsense, and even a wufoo form can perhaps be loaded in this async manner. I’ll report the progress here.

Leave a Reply

Your email address will not be published. Required fields are marked *