How to: Defer Loading of JavaScript

25 Jun 2011

If you're including large Javascript files (like Jquery) within your webpages the browser has to parse all of this before the page content is loaded, this isn't ideal.

To defer the loading of scripts until they're needed you can add the "defer" and "async" attributes to your script import tags. (note: do not use this method for inline scripts)

<script type="text/javascript" src="my_script.js" defer async></script>

Support: "defer" is supported from IE 4.0 and up (wow) and Firefox 3.5 and up. "async" is supported in Firefox 3.6+, Opera 10.5+ and Chrome shortly.

It's best to use both tags to achieve the range of support for most browsers.

Hope that helped someone!

---