title: Reduce load time of a page that uses jQuery UI
body: <p><strong>Problem:</strong> Some jQuery UI effects are quite slow to load, which is especially annoying when first loading a page.</p>
  
  <p>For example, take the tabs widget. Sometimes I can see the underlying list during page load with jQuery tabs before the tabs widget has loaded (another slow mammoth is the accordion widget). I'd like to avoid this - i.e. speed it up somehow, or do it less "JavaScript heavy".</p>
  
  <p>I have an idea for optimization of button widgets. In the markup itself, I could assign them all of the styles the <code>.button()</code> constructor would assign, and then I don't have to call <code>.button()</code> anymore. However, button is not the slowest, so this won't do much for my page load time.</p>
  
  <p><strong>Similar Questions:</strong></p>
  
  <ul>
  <li>A response to <a href="https://stackoverflow.com/questions/4744476/jquery-taking-effect-after-the-page-is-loaded">Jquery taking effect after the page is loaded</a> suggests that I could call the tabs constructor in <code>$(document).ready()</code>, but I'm already doing that.</li>
  <li>The only trick I found in this area is to <a href="https://stackoverflow.com/questions/3874411/delay-jquery-effects-whilst-page-is-loading">Delay jQuery effects whilst page is loading</a>, which might be useful, but doesn't help much.</li>
  </ul>
  
  <p><strong>Question 1:</strong> Is there some easy way to prepare jQuery effects (like tabs) on the <strong>PHP side</strong>, and then do some lazy initialization of the jQuery UI widgets (to maintain the tabs' clickability)?</p>
  
  <p><strong>Question 2:</strong> Are there some good <strong>guidelines</strong> for what to avoid with jQuery UI to <strong>not slow it down</strong>, while maintaining a good user experience?</p>