Question

I’ve been asked to suggest some performance improvements for a site that uses JSF/Richfaces/Seam/A4J.

One thing I’ve noticed is that there seems to be a lot of JavaScript being downloaded for A4J. Here’s a file list from one page:

/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript        
/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.PrototypeScript   
/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.ImageCacheScript  
/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/browser_info.js
/a4j/g/3_3_3.Finalorg/ajax4jsf/javascript/scripts/form.js   
/a4j/g/3_3_3.Finalscripts/tabPanel.js   
/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/skinning.js  
/a4j/g/3_3_3.Finalprototype.js  
/a4j/g/3_3_3.Finalscriptaculous.js

Are these files static for the JSF version that we are running or are they created dynamically based on the A4J commands that are being put into our html? I’m wondering if it is possible to safely amalgamate all of these into a single file as most of them are very small? If I did that, how would I stop these files from being added to the rendered HTML?

Answer 1

The resources content is not dynamic. Richfaces add specific resource per component dependencies.

I was in the same situation where performance was at first place. I’ll walk thru the actions I’ve taken in order to get one compressed richfaces bundle for js and another for css.

First of all you need to add the following parameters to yout web.xml

<context-param>
    <param-name>org.richfaces.LoadStyleStrategy</param-name>
    <param-value>ALL</param-value>
</context-param>
<context-param>
    <param-name>org.richfaces.LoadScriptStrategy</param-name>
    <param-value>ALL</param-value>
</context-param>

Than, load up a page and using firebug or any other tool extract the resources and save them into your own served file e.g. richfaces.bundle.js and richfaces.bundle.css.

Afterwards, turn off the script and style loading:

<context-param>
    <param-name>org.richfaces.LoadStyleStrategy</param-name>
    <param-value>NONE</param-value>
</context-param>
<context-param>
    <param-name>org.richfaces.LoadScriptStrategy</param-name>
    <param-value>NONE</param-value>
</context-param>

Another approach is to use JAWR which allow working on separate resource files and serve them compressed and bundled.
With JAWR you can extract Richfaces component specific resources and load them per your need. e.g. a page with data table and ajax behavior will load only the depended resources which JAWR will compress into a single bundle.
This approach allow better maintenance abilities.