Render blocking by jquery and bootstrap library

Question

I have index.html file where I have Jquery library and bootstrap library for js being loaded in <head> tag, they are reported as the reason for render blocking, where, jquery.min.js takes 932 ms and bootstrap.min.js takes 765 ms to load. Here, I decided to load the jquery and boostrap files after loading the page following this article. But since I had other dependent JS files as well, I decided to create a Javascript array and iterate it to create the dynamic script tags. Which is doing its part, but the page doesnt load because other dependent files doesnt find the jquery file.

I believe this is happening because, before jquery.min.js gets loaded completely other files gets loaded and hence it breaks.

Note: since all the js files are from the codebase, It doesnt make sense to use defer or async.

Below is the code I am using in the bottom of the page before </body> tag.

<script type="text/javascript">
        var source = [
            "common/scripts/external/jquery-3.2.1.min.js",
            "common/scripts/external/bootstrap.min.js",
            "common/scripts/other/utility.min.js?v=1.0.0",
            "common/scripts/external/jquery.ui.widget.min.js",
            "common/scripts/external/jquery.fileupload.min.js",
            "common/scripts/external/jquery.fileupload-process.min.js",
            "common/scripts/external/jquery.fileupload-validate.min.js",
            "common/scripts/external/jquery.knob.min.js",
            "common/scripts/external/jquery.payform.min.js"
        ]
        function downloadJSAtOnload(source) {
            for (var i = 0; i < source.length; i++) {
                var element = document.createElement("script");
                element.src = source[i];
                document.body.appendChild(element);
            }

        }
        if (window.addEventListener) {
            window.addEventListener("load", downloadJSAtOnload(source), false);
        } else if (window.attachEvent) {
            window.attachEvent("onload", downloadJSAtOnload(source));
        } else {
            window.onload = downloadJSAtOnload(source);
        } 
    </script>

The errors when I load the page:

Please suggest whats the right way to solve the render blocking and if this is the right direction, how I can allow Jquery to load first before every other files get loaded

Have you tried [Preload.js](https://www.createjs.com/preloadjs)? It does what you are trying to do and provides many other features which you can use to control the order of execution, for example. — Chirag Ravindra, Jan 31 '18 at 11:40
What do you mean by `support devices`? It runs on most modern browsers on desktops and phones but there are some gotchas. [Check out the Browser Support section of the Docs](https://www.createjs.com/docs/preloadjs/modules/PreloadJS.html) for the exception list — Chirag Ravindra, Jan 31 '18 at 11:47

Abbas Nabilou · Answer 1 · 2018-01-31T12:45:37.980

you should add jquery before this js script:

<script src='common/scripts/external/jquery-3.2.1.min.js' async></script>
<script src='common/scripts/external/jquery.ui.widget.min.js' async></script>
<script src='common/scripts/external/jquery.fileupload.min.js' async></script>
<script src='common/scripts/external/jquery.fileupload-process.min.js' async></script>
<script src='common/scripts/external/jquery.fileupload-validate.min.js' async></script>
<script src='common/scripts/external/jquery.knob.min.js' async></script>
<script src='common/scripts/external/jquery.payform.min.js' async></script>
<script type="text/javascript">
        var source = [            
            "common/scripts/external/bootstrap.min.js",
            "common/scripts/other/utility.min.js?v=1.0.0"               
        ]
        function downloadJSAtOnload(source) {
            for (var i = 0; i < source.length; i++) {
                var element = document.createElement("script");
                element.src = source[i];
                document.body.appendChild(element);
            }

        }
        if (window.addEventListener) {
            window.addEventListener("load", downloadJSAtOnload(source), false);
        } else if (window.attachEvent) {
            window.attachEvent("onload", downloadJSAtOnload(source));
        } else {
            window.onload = downloadJSAtOnload(source);
        } 
    </script>

I think you should call bootstrap before this script too. check and see if it did not work correctly move the bootstrap.js before the script, too.

But that doesnt solve my real problem of fixing the render blocking due to those 2 files, though the errors got trunctated to count 2 — OM The Eternity, Jan 31 '18 at 12:29
so tell me which one of your files are libraries and which are the codes you have written by yourself? I guess you are inserting libraries and your own codes simultaneously and that is causing these problems. you have to put all libraries out of this script like what we did for jquery main library. — Abbas Nabilou, Jan 31 '18 at 12:35
Even that wil not solve the main issue Jquery and Bootstrap libraries taking more time to load and hence they will still block the rendering, though, all the jqquery prefixed js files you see there are library files — OM The Eternity, Jan 31 '18 at 12:40

Render blocking by jquery and bootstrap library

1 Answers1