CK's Developer Blog

I was trying to improve the performance (decrease the time taken to render the pages)   of a Seam based JSF application (Infact this post is applicable to any web application using RichFaces).

Initially the response time for JSF pages was around 12 to 20 seconds (The internet connection speed was roughly 512kbps). I tried the optimisation techniques mentioned in the links in this post http://www.karthikeyanc.com/blog/index.php/2009/11/jsf-and-richfaces-optimization-links/

Even then the page rendering time did not decrease substantially. So started using Firefox with YSlow and HttpFox add-ons.

Found that the js, css and image files related to RichFaces were expiring immediately and hence each time a JSF page was rendered, the resources (js,css and image files) were not fetched from local cache and the request was sent to the server again (It does not matter even if it is 304 Unmodified as already the damage is done and increases the response time).

Hence wrote a Servlet Filter which will override the default time to expire (which is immediate) and add a configurable duration as the time to expire. Part of the Filter code is provided below. The Filter name is ResponseHeaderFilter.java

public void init(FilterConfig filterConfig) {
 this.filterConfig = filterConfig;
 }

@Override
 public void doFilter(ServletRequest request, ServletResponse response,
 FilterChain chain)
 throws IOException, ServletException {

 HttpServletResponse httpResp = (HttpServletResponse) response;
 Enumeration e = filterConfig.getInitParameterNames();
 while (e.hasMoreElements()) {
 String headerName = (String) e.nextElement();
 httpResp.addHeader(headerName, filterConfig.getInitParameter(headerName));
 }
 chain.doFilter(request, response);
 }

In web.xml I added the following configuration for the filter.

<filter>
 <filter-name>CacheForDuration</filter-name>
 <filter-class>com.packagename.ResponseHeaderFilter</filter-class>
 <init-param>
 <param-name>Cache-Control</param-name>
 <param-value>max-age=900000, public</param-value>
 </init-param>
 </filter>

<filter-mapping>
 <filter-name>CacheForDuration</filter-name>
 <url-pattern>/img/*</url-pattern>
 </filter-mapping>
 <filter-mapping>
 <filter-name>CacheForDuration</filter-name>
 <url-pattern>/js/*</url-pattern>
 </filter-mapping>
 <filter-mapping>
 <filter-name>CacheForDuration</filter-name>
 <url-pattern>/css/*</url-pattern>
 </filter-mapping>
 <filter-mapping>
 <filter-name>CacheForDuration</filter-name>
 <url-pattern>/scripts/*</url-pattern>
 </filter-mapping>
 <filter-mapping>
 <filter-name>CacheForDuration</filter-name>
 <url-pattern>/a4j/*</url-pattern>
 </filter-mapping>

Once this configuration was in place the resources (js, css and scripts) were fetched from local cache of the browser and hence the response time was reduced to 2 to 3 seconds. Hope this is useful.