title: Optimizing page speed when jQuery needed to render
body: <p>I'm using the Google PageSpeed service to improve the page loading time of my site.  The site is on GAE/P but I don't think that matters so much.</p>
  
  <p>My page depends on a few resources:</p>
  
  <ul>
  <li>Bootstrap (css and js)</li>
  <li>jQuery (js)</li>
  <li>jQuery UI (js and css)</li>
  <li>My own stuff (js, css, and images)</li>
  </ul>
  
  <p>The waterfall of a page load (<a href="https://www.opavote.org/vote/5654402576678912" rel="nofollow noreferrer">link</a>) is below.  In this page, I use Javascript to render a jQuery UI sortable.</p>
  
  <p>The PageSpeed recommendations of inlining needed css/js seems impractical because of Bootstrap and jQuery.</p>
  
  <p>I'm looking for advice as to how I can get the most bang for my buck to improve page speed.  For example:</p>
  
  <ul>
  <li>Should I combine all js (Bootstrap, jQuery, jQuery UI, mine) into a single js file and serve it myself?</li>
  <li>Should I combine all css (Bootstrap, jQuery UI, mine) into a single css and serve it myself?</li>
  <li>Should I combine images into a css sprite?</li>
  <li>Other things I should consider?</li>
  </ul>
  
  <p>I'd appreciate your ideas.</p>
  
  <p><img src="https://i.stack.imgur.com/ELwIT.png" alt="Chrome waterfall"></p>