Load any external javascript file asynchronously!

Sticking <script></script> tags referring an external resource in the middle of your HTML code will hang the loading of your page while your browser gets the missing script.

This is usually a problem with the loading of the AddToAny sharing script and a quantcast tag (which has since been removed). Check to make sure there are no other custom scripts that are slowing down your site.

The solution is generic and simple. Use this code to load your Javascript asynchronously:

<script type="text/javascript">

(function() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'http://yourdomain.com/script.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
})();

</script>

Instead of loading it synchronously:

<script type="text/javascript" src="http://yourdomain.com/script.js"></script>

One thing to consider is that asynchronous loaded Javascript will not block jQuery’s document.ready handlers. Synchronous scripts will. If your jQuery code depends on a plugin (e.g., the simple modal dialog) it may be better to load it synchronously instead.

Tags: , , , , ,