separating JSS from CSS at plone.htmlhead

Question

I'm using Plone 3.1.7 in a project that needs performance tweaks. One of the tweaks requests that CSS should be at the top of page and the JS should be at the bottom. However both are located at

<div tal:replace="structure provider:plone.htmlhead" />

In main_template. How do I split these ones?

Thanks in advance

Answer 1

My workmates have found the solution:

plone.htmlhead is a viewlet registered by the product plone.app.layout that loads other three viewlets:

• plone.resourceregistries.styles
• plone.resourceregistries.scripts
• plone.resourceregistries.kineticstylesheets

I put the following at the HEAD tag:

<div tal:replace="structure provider:plone.resourceregistries.styles" />

And the following at the bottom:

<div tal:replace="structure provider:plone.resourceregistries.scripts" />
<div tal:replace="structure provider:plone.resourceregistries.kineticstylesheets" />

Done! the CSSs will be located at the page's top and the JSs at page's bottom

Answer 2

You usually don't have to do this in Plone, as it is set up to trigger the JS asynchronously, so it shouldn't block any rendering (which is what the performance tip is about).

If you insert things directly in the template, things may change — but the default setup does the right thing, unless I'm misunderstanding the question here (which may be the case :)