title: How to control the order of JS and CSS files in Xpages themes for better performance and especial files like Handlebars and Less
body: <p>I like to know if there is a way to control css and js resources order in XPages Themes or Custom controls. Two reasons for this:</p>
  
  <p><strong>1. Performance</strong>: Is well known that when you place js files before the closing body tag the render is faster for the user (<a href="https://stackoverflow.com/questions/5329807/benefits-of-loading-js-at-the-bottom-as-opposed-to-the-top-of-the-document">link</a>). I can do that placing a <strong><em>script</em></strong> tag at the bottom of the Xpage or custom control but if I do so I'll lost the huge performance adventages I got when I use the <strong><em>resource</em></strong> tag and then check <strong>Application > Properties > Xpages > Performance > Use runtime optimized Javascript and CSS resources</strong> (in the latter case, js files are placed in the head tag).</p>
  
  <p><strong>2. libraries like Handlebars and Less:</strong> using resources tags I can add js and css with <strong>content-type text/css</strong> or <strong>application/x-javascript</strong> but with libraries like Handlebars and Less (really useful libs) I need different content-type or attributes. </p>
  
  <p>This question is mainly on performance because it already works using link and script tags in custom controls like this: </p>
  
  <p><strong>Handlebars:</strong></p>
  
  <pre><code>&lt;script id="entry-template" type="text/x-handlebars-template"&gt;
    template content
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Less:</strong></p>
  
  <pre><code>&lt;link rel = "stylesheet/less" type="text/css" href="css/styles.less" /&gt;
  &lt;script src = "js/vendor/less-1.6.0.min.js" type="text/javascript" &gt;&lt;/script&gt; 
  </code></pre>
  
  <p>...but I feel a little dirty :)</p>