Category Archives: Performance

Performance tuning of Java, JEE

Tips for SEO of your site with Richfaces

In today’s internet world getting ranked high on various search engine results
matter a lot. Cooking up the best site and having the right content for the users
isn’t good enough. For starters your site needs to be found in search engine
results, and once found it needs to load up quickly. Users won’t necessarily wait
for a slow loading site, especially when their web browsers come with an empty cache.

When a page loads whether it’s a Home page or another static page of a site,
the number of scripts/css on that page will dictate the page load time.
It would therefore make sense to remove or minimize the scripts that your page
needs. A lot of scripts at the beginning of a page is bad for your prospects at being
number one in search results. When using Ajax libraries like Richfaces the problem
just adds up. Not only do you have to take care of your own scripts but scripts and
css contributed by Ajax libraries as well.

Richfaces outputs lot of scripts and css which may not be ideal from
a SEO perspective.
For example Richface 3.3.x puts around 21 script tags and 12 link tags (css).
Some of the tips mentioned below should help your projects and thus I’m putting it out here for all.

Solution:
Luckily you can configure (upto certain extent) the number of scripts/css Richfaces
adds to your page.

The following parameter in web.xml will enforce Richfaces scripts and css to be
loaded as a pack (Single file rather than multiple files).

<!-- Change load strategy to ALL to send scripts/styles as packs -->    
	<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>

This would result in the below includes, which is a lot less than the default strategy
of 21 scripts and 12 links.

<link rel='stylesheet' class='component' type='text/css'
	href='/richdemo/a4j_3_2_1-SNAPSHOTorg/richfaces/skin-ext-classes.xcss/DATB/eAELXT5DOhSIAQ.sA18_' />
<script type='text/javascript'
	src='/richdemo/a4j_3_2_1-SNAPSHOT/org/ajax4jsf/framework.pack.js'></script>
<script type='text/javascript'
	src='/richdemo/a4j_3_2_1-SNAPSHOT/org/richfaces/ui.pack.js'></script>

With 3.2.x library
ui.pack.js is 367 KB
framework.pack.js is 280 KB

Which is pretty reasonable, But
with 3.3.x library
ui.pack.js is 661.5 KB
framework.pack.js is 311.7 KB

Sadly that’s pretty close to 1MB of plain scripts. That’s part and parcel of the framework.

If you don’t use the LoadScriptStrategy/All setting, you could enable JavaScript
compression for a4j by setting the below param in web.xml
(This isn’t same as gzip compression for http).

  <context-param>
    <param-name>org.ajax4jsf.COMPRESS_SCRIPT</param-name>
    <param-value>true</param-value>
  </context-param>

Custom Scripts and CSS
Now with that taken care what remains is your own scripts and css.
There are some nice resources on the net that will help you solve this part,
so I wont duplicate this information. You can find some pointers here
http://developer.yahoo.com/performance/rules.html.

Also consider using a compression tool to reduce the size of scripts and css,
you could use the YUI Compressor to reduce file sizes (http://developer.yahoo.com/yui/compressor/). It helped in some of my projects to a great extent.
My personal favourites are CSS Sprites and Compression.

Hope this bit of information helps you guys!

Performance tuning of Seam, JSF, Richfaces for webapps

Apart from following best practices while coding an application, we often come across the need to tune it up just a bit further to get that peek performance going.
On a recent project we faced some challenges in trying to increase the performance of our web application. We finally ended up optimizing the app and got very promising results. Here I put together some of the information used by us in one location, which is scattered over the web.

The frameworks used were, Seam 2.2 and JSF 1.2 with Richfaces 3.2 and also Spring 2.5. Now without further delay here you go..

Some pointers on using JSF beans mapped in your view layer (JSP/XHTML when using facelets).

  1. Don’t put code in a getter (accessor method) of a managed bean
    The getters are invoked frequently to get the data. You could use some other method to fetch data and simply update the property.
    But if you did end up with few getters which hit the database for data loading, then consider putting a condition around that code to load data only if required.
    Example: Change code like the below;

    private List aList;
    public List getList() {
    aList = getServiceObject().loadListFromDB();
    return aList;
    }
    

    To load data conditionally as given below;

    private List aList;
    public List getList() {
    if( null == aList || aList.isEmpty() ) {
    //Load from DB only if list is empty
    aList = getServiceObject().loadListFromDB();
    }
    return aList;
    }
    
  2. Check scope of your beans. Seam provides a Conversation Scope use it instead of Session Scope if practical enough for your requirement.
  3. Richfaces does provide a huge set of components which are Ajax based.
    But many of those components also add to the processing overhead. Use them judiciously or it can affect your page load time pretty badly.
    Consider these points when trying to optimize a JSF/Richfaces application.

    • Avoid using rich:dataGrid or rich:dataTable whenever you can. The h:dataTable of JSF usually provides good enough options.
    • Do not use rich:tooltip inside a data table or grid. It’s very expensive and can lead to very slow rendering especially on IE.
      Also avoid nesting too many rich:xxx components inside a dataTable.
    • Use ajaxSingle=true attribute and a4j:region tag whenever possible. Also consider using limitToList attribute when reRendering.
    • Do not use multiple rich:modalPanel components for each view consider using one single rich:modalPanel with dynamic view.You could use a4j:include or ui:include (facelets) to change the view inside a modal panel.

Apart from following the above practices here are some goodies which will speed up your JSF with Richfaces webapp.
Add the below snippets to your web.xml

  • Use a global queue. (This is not strictly required if you are already using queuing of ajax requests)
    <context-param>
    <param-name>
     org.richfaces.queue.global.enabled
    </param-name>
    <param-value>true</param-value>
    </context-param>
    
  • Use NEKO parser instead of the default. This will speed up things.
    <context-param>
     <param-name>
      org.ajax4jsf.xmlparser.ORDER
     </param-name>
     <param-value>
      NONE,NEKO,TIDY
     </param-value>
    </context-param>
    
    <context-param>
    <param-name>org.ajax4jsf.xmlparser.NEKO</param-name>
    <param-value>.*\..*</param-value>
    </context-param>
    
  • Change the way css and java script files are loaded.
    If you view the source of your page you will notice that by default richfaces will add some includes of css and scripts which lead to multiple calls to load.
    For example with our web app we had like 8 css files and 23 js scripts getting loaded separately.
    and with the below setting our pages had just 1 css include and 2 script includes.

    <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>
    
    <!--  If you use LoadScriptStrategy ALL, turn the compression off  -->
    <context-param>
    <param-name>
    org.ajax4jsf.COMPRESS_SCRIPT
    </param-name>
    <param-value>false</param-value>
    </context-param>
    

    Using the above settings we had reduced the css and js files to be loaded:

    <link rel='stylesheet' class='component' type='text/css'
            href='/excel/a4j_3_2_1-SNAPSHOTorg/richfaces/skin-ext-classes.xcss/DATB/eAELXT5DOhSIAQ.sA18_'
    />
    <script type='text/javascript'
            src='/excel/a4j_3_2_1-SNAPSHOT/org/ajax4jsf/framework.pack.js'></script>
    <script type='text/javascript'
            src='/excel/a4j_3_2_1-SNAPSHOT/org/richfaces/ui.pack.js'></script>
    
  • For Facelets and JSF RI from Sun you can use the below settings:
    <!--  Facelets tuning -->
    <context-param>
    <param-name>
    facelets.RECREATE_VALUE_EXPRESSION_ON_BUILD_BEFORE_RESTORE
    </param-name>
    <param-value>false</param-value>
    </context-param>
    
    <context-param>
    <param-name>
    facelets.BUILD_BEFORE_RESTORE
    </param-name>
    <param-value>false</param-value>
    </context-param>
    
    <context-param>
    <param-name>facelets.DEVELOPMENT</param-name>
    <param-value>false</param-value>
    </context-param>
    
    <context-param>
    <param-name>facelets.REFRESH_PERIOD</param-name>
    <param-value>-1</param-value>
    </context-param>
    
    <!--  JSF RI Performance tuning -->
    <context-param>
    <param-name>com.sun.faces.responseBufferSize</param-name>
    <param-value>500000</param-value>
    </context-param>
    
    <context-param>
    <param-name>com.sun.faces.verifyObjects</param-name>
    <param-value>false</param-value>
    </context-param>
    
    <!-- Allows the JavaScript to be cached -->
    <context-param>
    <param-name>
    com.sun.faces.externalizeJavaScript
    </param-name>
    <param-value>true</param-value>
    </context-param>
    

    Only if you are running under JBoss AS

    <context-param>
    <param-name>
    com.sun.faces.serializationProvider
    </param-name>
    <param-value>
    org.jboss.web.jsf.integration.serialization.JBossSerializationProvider
    </param-value>
    </context-param>
    

When tuning your seam application you can use the components.xml file to tweak some settings.

  • Cache images and style globally.
    <web:cache-control-filter name="imageCacheControlFilter"
    regex-url-pattern=".*(\.gif|\.png|\.jpg|\.jpeg)"
    value="max-age=86400"/>
    
    <web:cache-control-filter name="textCacheControlFilter"
    regex-url-pattern=".*(\.css|\.js)"
    value="max-age=1400"/>
    
  • Also if you are using richfaces with Seam you could configure the richfaces filter  in components.xml itself
    without needing to declare the filter in web.xml
    Disable the forceparser and turn on caching.

    <web:ajax4jsf-filter force-parser="false"
    enable-cache="true"
    url-pattern="*.jsf"/>
    

So in the end after optimizing the webapp by using framework provided settings, you can expect a lot better performance from your app. In the end you get happy visitors. Hope this bit of information helps you guys.