Monthly Archives: October 2010

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!

Advertisements