At the time I was involved with the new media manager I wrote and published a plugin to demonstrate a possible way to introduce source sets (srcset attribute) for images. The idea then kicked a GSOC project that resulted in a rather complicated solution.
Don't go for the rather small target group that the GSOC plugin is covering, just get my plugin and patch the media manager so it will make a set of resized images for each upload. Also patch the intro and fullarticle images and introduce the lazyload attribute.
Do the same also for video and audio files. That's that, problem SOLVED
This is extremely easy: scripts that are ES6 should also have an attribute type="module" and the legacy, ES5, scripts should have the attributes nomodule defer
Couple of lines and problem SOLVED
The inline ES5 scripts, unfortunately, will not respect the defer attribute (thank you Internet Explorer for popularising this antipattern).
So, the inline scripts, both ES6 and ES5, I would suggest that will be collected (not only the ones in the document _script array but also any instance in the body tag of the component and the modules of the page) and appeneded at the bottom of the page (before the closing body tag).
There are multiple wins with this approach:
I've raised the argument about Bootstrap not being the best way forward quite a few times, so I won't be doing that once again here.
But please ask yourselves: is it wise to stick to something that it's proven that it doesn't work in the current era?
The fear that everything will break badly if the project drops Bootstrap from the front end template I guess is very nicely exterminated by Charlie Lodder and his take on a template using the HIQ.