How to control the order of JS and CSS files in Xpages themes for better performance and especial files like Handlebars and Less - optimization

Question

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:
1. Performance: Is well known that when you place js files before the closing body tag the render is faster for the user (link). I can do that placing a script 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 resource tag and then check Application > Properties > Xpages > Performance > Use runtime optimized Javascript and CSS resources (in the latter case, js files are placed in the head tag).
2. libraries like Handlebars and Less: using resources tags I can add js and css with content-type text/css or application/x-javascript but with libraries like Handlebars and Less (really useful libs) I need different content-type or attributes.
This question is mainly on performance because it already works using link and script tags in custom controls like this:
Handlebars:
<script id="entry-template" type="text/x-handlebars-template">
template content
</script>
Less:
<link rel = "stylesheet/less" type="text/css" href="css/styles.less" />
<script src = "js/vendor/less-1.6.0.min.js" type="text/javascript" ></script>
...but I feel a little dirty :)

Answer 1

If possible try to use the non-blocking pattern for your JavaScript libraries. This should prevent performance problems:
<script>
var s = document.createElement("script"),
t = document.getElementsByTagName("script")[0];
s.src="js/vendor/less-1.6.0.min.js";
t.parentNode.insertBefore(s, t);
</script>
EDIT:
<xp:script clientSide="true" type="text/x-handlebars-template" contents="template content">
<xp:this.attrs>
<xp:attr name="id" value="entry-template" />
</xp:this.attrs>
</xp:script>
<xp:linkResource type="text/css" href="css/style.less" rel="stylesheet/less" />