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 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
– rishat, Commented Nov 7, 2020 at 9: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
– Bergi, Commented Nov 7, 2020 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
– Krystian, Commented Nov 7, 2020 at 11:30

Sohail Ashraf · Accepted Answer · 2020-11-10 07:32:58Z

1

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);
        };
    });
}

answered Nov 10, 2020 at 7:32

Sohail Ashraf

10.7k3 gold badges31 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrii Muzalevskyi · Accepted Answer · 2020-11-11 09:43:39Z

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

Collectives™ on Stack Overflow

Speed optimization: Optimize render blocking scripts with async

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related