Speed optimization: Optimize render blocking scripts with async

Question

On https://bm-translations.de (fully self coded, no cms etc.) I am trying to eliminate render blocking of <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>. Defer isnt working as I have another script at the end of the page <script src="globaljs.js"></script> that contains Bootstrap and jquery lazyloading etc as well as inline Javascript after it. I thought I could give async to all of them. At first I thought its working but from time to time (like random) its showing this:

I wondered if there is any other option or a way to ensure the render blocking jquery is loaded before the scripts at the bottom of the page but without render blocking?

Scripts that are downloaded via `script` tag with `async` attribute are not guarantee to load in exact order, as far as I know. The order is important in your case, so either it should happen synchronously (i.e., no `async` attribute given to the respective `script` tag), or some programming is required (for example, see https://stackoverflow.com/q/24268791/1287643). But then, typically to eliminate render blocking, placing all `script` tags as the very last children of `document.body` should help. — rishat, Nov 07 '20 at 09:33
You'd need to give both of them the `defer` attribute. Or you just move jQuery down to the end of the body as well? — Bergi, Nov 07 '20 at 11:03
placing it below the fold but above the lazyload script was the solution. All other things resulted in layout-problems. Thanks for your hints! :-) Any other performance hints are very welcome and I will give the bounty to it :-) — Krystian, Nov 07 '20 at 11:30

score 1 · Answer 1 · answered Nov 10 '20 at 07:32

You could use the below approach to load the script sequentially with promises.

On DOMContentLoaded`` load the script sequentials and to load the scripts async you could use the ES6 promises.

Sample code:

document.addEventListener('DOMContentLoaded', async function(event) {
    await loadScript("https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js");
    await loadScript("globaljs.js");
});

function loadScript(src) {
    return new Promise((resolve, reject) => {
        let file = document.createElement('script');
        file.src = src;
        document.body.appendChild(file);
        file.onload = file.onreadystatechange = function() {
            resolve(true);
        };
    });
}

score 1 · Answer 2 · answered Nov 11 '20 at 09:43

bm-translations.de doesn't need optimization of jquery loading, personal opinion. jQuery script doesn't block rendering, it is already placed at bottom

As far as I understood at the bottom of page there are 2 scripts. First is jquery, and second is dynamic, generated by server side for each page separately, which connects dynamic behavior to the HTML

BTW - Possible alternatives to placing JS before </body> end tag:

Build your scripts
- just concatenate your scripts via script (for old projects this could work well)
- use browserify, webpack, etc.
use RequireJS which could handle async scripts loading and loads dependencies
write custom JS which guarantees load order

But all these approaches seems to be not applicable to bm-translations.de

Speed optimization: Optimize render blocking scripts with async

2 Answers2