Sunday, November 28, 2010

Decreasing page load time in a Java web application

This post will mention some of the things you can do to decrease the page load time in a Java-based web application with regards to Yahoo!'s list of best practices for speeding up your web site (http://developer.yahoo.com/performance/rules.html).

Minimize HTTP Requests
When it comes to external stylesheets and JavaScript files, Web Resource Optimizer for Java (wro4j) can be used to reduce the number of requests required to fetch all content. During development, I find it more maintainable to have stylesheets and JavaScript files split into several files. wro4j merges these files together at runtime, so that one still can have them split into several files, but have only one request for them. How to setup and use wro4j is explained well in http://code.google.com/p/wro4j/wiki/GettingStarted.

Regarding reducing the number of requests for images, CSS sprites can be used. Use, for instance, SpriteMe (http://spriteme.org) or CSS Sprite Generator (http://spritegen.website-performance.org) to create the sprite. I use CSS Sprite Generator to create a starting point, and then modify and maintain the sprite by hand (GIMP). Be aware of the placement of the images in the sprite so that adjacent images don't show up in the wrong places in your page.

Add an Expires or a Cache-Control Header
By default, wro4j sets the Expires-header to be ten years in the future for content served through the wro4j filter. This tells the client browser that the content won't change for ten years, so it shouldn't bother to ask for it again before then. Be aware that the browser won't even bother to ask if the content has changed, so, unless the content is removed from the browser's cache, it will use it's cached version for ten years. This means that if you modify one of the files served by wro4j, but don't change the reference to the group containing the file, the clients won't get the updated file for ten years.

Since wro4j only handles CSS and JavaScript files, you have to find another way of setting the Expires header on other content, such as images. This can be accomplished by implementing a filter that sets the header on specific content. See http://juliusdev.blogspot.com/2008/06/tomcat-add-expires-header.html for an example.

Gzip Components
Gzip is a compression method that generally reduces the size of your files about 70%. Once again, wro4j does the job for you. By setting the filter's gzipResources init parameter to TRUE, wro4j will gzip your CSS and JS resources. Images shouldn't be gzipped because they are compressed already.

Minify JavaScript and CSS
With the danger of repeating myself, wro4j does it for you. Wro4j minimizes both your JavaScript and CSS resources by default. One useful thing to note is that if you have set the filter's configuration init parameter to DEVELOPMENT, you can add the query parameter minimize=false to the URL of your CSS or JavaScript groups to disable minimization. I, at least, find it difficult trying to find errors in minified content.

No comments:

Post a Comment