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

This was a know bug in some recent versions of Products.ResourceRegistries This issue is fixed in the 2.02b release. You can pin that version in your buildout:

[versions]
    ...
    Products.ResourceRegistries == 2.02b
    ...

then, re-run buildout and this issue goes away.

Answer 3

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 :)

Answer 4

The suggestion above to replace plone.htmlhead split with 3 viewlets didn't entirely work for me, as I lost the page title (not good for SEO). I assume the page title is also normally included by plone.htmlhead.

The better solution seems to be to use the newer Products.ResourceRegistries suggested above, except that the buildout lines are slightly wrong. The following worked for me :

[versions]

...
Products.ResourceRegistries=2.0b3
...

Answer 5

In the head tag in addition of

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

I've put

<title tal:define="page_title python: context_state.object_title()"
       tal:content="page_title">page title</title>

....
but in fact I have lost all the meta tags related to the keywords !