This problem, and many approaches on the internet on how to load js or resources from CDN the right way, with regards to page loading (based on GTMetrix analysis), has been bugging me for quite some time now. Whilst putting scripts and libs in the footer has always been the default way, waiting for the body to load before loading js, at the same time the body will not properly load or look broken, until the libs are loaded in. A solution was to load it in the head instead, but use "async defer" for asynchronous loading to minimize the impact on page loading.

When "async defer" was added to the jquery-3.4.1 lib, it often did not have enough time to finish loading everything, thus causing everything else to break, or for "$" not to be recognized at all. Now I am facing issues such as jarallax, carousel single-item, carousel 3D and video backgrounds not to properly function.

1. Is there a recommended way for an MDB web project to handle the head and footer without anything breaking or improperly loading?
2. How are initializations (for jquery MDB components) done properly? inline in the html/php page or in a separate footer script or footer js script file?

Currently I load all js in my head, after my css, as follows: (the bootstrap bundle also contains popper.js)

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script async defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script async defer type="text/javascript" src="/src/js/mdb.min.js"></script>
    and other 3rd party libraries such as Google Analytics, Font awesome, ...