title: When to use async vs defer when loading scripts?
body: <p>So I've recently learned that putting your js at the bottom of the DOM is antiquated, and that I should be once again putting them in the <code>&lt;head&gt;</code> with the “async” and “defer” attributes.</p>
  
  <p>Great. But I'm a bit confused as to which I should use, based on priority.</p>
  
  <p>So I have:</p>
  
  <ul>
  <li>jquery</li>
  <li>jquery plugins that don't have immediate effects on the look of the
  page</li>
  <li>jquery plugins that do have immediate effects on the look of the page</li>
  <li>my own personal scripts, which have immediate effects on the look of
  the page, and is also reliant on jquery</li>
  </ul>
  
  <p>Which should get async, and which should get defer?</p>
  
  <p>If I understand all this correctly, the ones that don't have an immediate effect on the look of the site should get defer, while everything else gets async. Correct? Or am I getting these mixed up.</p>