Originally, I put all of my javascript in the head, but then I noticed that the page load time was very slow - not surprising. So, I moved all of my scripts to the bottom to eliminate the DOM render blocking effects. 

On Google's PageInsights page, they say that's no longer the best practice and they recommend putting the scripts in the head and adding async loading

<https://developers.google.com/speed/docs/insights/BlockingJS>

The problem I ran into with that and from my understanding is if you use async, then the script will execute as soon as it completes loading, so you can run into dependency issues - which is precisely what happened with jQuery and scripts that depended on it.

<https://calendar.perfplanet.com/2016/prefer-defer-over-async/>

I found out that there's the defer attribute which is like async but it postpones execution until loading. If that's the case, why am I still hitting these dependency errors?

It doesn't happen every time. It just so happens that sometimes the script(s) that depend on jQuery load quicker than jQuery itself, as shown below.

My question is, what should I do to make sure that everything loads asynchronously but doesn't execute until the completion of loading?

Hopefully, this is a simple fix without a ton of fancy javascript.

[![Console 1](https://i.stack.imgur.com/PhFyL.png)](https://i.stack.imgur.com/PhFyL.png)
[![Console 2](https://i.stack.imgur.com/MBq43.png)](https://i.stack.imgur.com/MBq43.png)