It seems that using defer on scripts causes all of these scripts to be evaluated compiled and executed at once meaning in one single task before the DOMContentLoaded event.

This means if you or I have in my case a few of these scripts that are fairly slow to be executed, the task can become long and degrade the performance and Core Web Vitals of the page.

Most of these script depend on each other or at least should be executed in order, that's why the goto strategy was to use defer but I didn't know about the result of them being executed in a single task.

My plan is to insert some of them with JS when the DOMContentLoaded is fired, but this means that unless I preload them, they'll start to be downloaded much later. The end result is different than simply using defer.

Is there any way of breaking up that one long task or avoiding all of the deferred scripts being 'done' in one task?