Lazy loading JavaScript and Inline JavaScript

You can actually lazyload inline javascript:1- Change the type parameter in the inline script to: text/delayscript

FROM

    <!– Inline Script –><script type="text/javascript" language="javaScript">             /* Code */</script>

To

    <!– Inline Script –><script type="text/delayscript">             /* Code */</script>

Giving the script tag a custom Mime type text/delayscript forces the browser to ignore its content (Please note that leaving it out entirely will default to text/javascript).

2- Lazy load all inline scripts Once heads.js (Or an other framework you might be using) confirms that it lazy loaded all your external JS, you can then grab the content of all your custom script tags and inject them in the page:

<script>head.ready(function() {    var         _head = document.getElementsByTagName("head")[0],        _script = document.createElement('script'),        _scripts = document.getElementsByTagName("script"),        _txt = "text/delayscript",        _contents = []    ;    for(var i=0,l=_scripts.length;i<l;i++){        var _type = _scripts[i].getAttribute("type");            if(_type && _type.toLowerCase() ==_txt)                _contents.push(_scripts[i].innerHTML)    }    _script.type = 'text/javascript';    _script.innerHTML = _contents.join(" ");    _head.appendChild(_script);});

To be even more graceful, you can actually keep the inline scripts in their original hierarchy in the DOM tree instead of jamming all their content in one script, as I have suggested above, by replacing the marked inline script tag by a new one that has mime type text/javascript:

head.ready(function() {var     _scripts = document.getElementsByTagName("script"),    _doc = document,    _txt = "text/delayscript";for(var i=0,l=_scripts.length;i<l;i++){    var _type = _scripts[i].getAttribute("type");        if(_type && _type.toLowerCase() ==_txt)            _scripts[i].parentNode.replaceChild((function(sB){                var _s = _doc.createElement('script');                _s.type = 'text/javascript';                _s.innerHTML = sB.innerHTML;                return _s;            })(_scripts[i]), _scripts[i]);}});

You have to consider moving inline code "outside" and include it with

<script defer="defer" type="text/javascript" src="">

HTML5 introduced a new async parameter for scripts having a defined src.

You can add it directly on any <script> element :

<script src='/js/script.js' async></script>

BUT : keep in mind that it will not work on inline scripts!

And if your some of your pages mix either external and inline scripts, if you load the external asynchronously, it means that the inline scripts will actually be executed before the asynchronous ones... Which can have unwanted effects.

Set this Boolean attribute to indicate that the browser should, if possible, execute the script asynchronously. It has no effect on inline scripts (i.e., scripts that don't have the src attribute).

For instance, if you have the following configuration :

<script src='/js/jquery.min.js' async></script><script>    // --> jQuery won't be loaded when this script will be executed!    // This will throw an error.    $(function () {        $('#element').doSomething();    });</script>