Wednesday, May 27, 2009

Web Application Performance Improvement

Web Application Performance Improvement

By Ritesh Kapse

 

Almost every Web 2.0 application relies heavily on JavaScript (JS) code, Cascading Style Sheets (CSS), and images to make the user interface of the application more interactive and rich. However, these files might cause some performance-related problems if not managed properly, for instance sluggish network and runtime performance issue.

 

Following are a few general techniques that we can apply to every such Web application to make it work better and faster.

File Compression

We can compress server responses, such as HTML, JS, and CSS files, using Gzip before sending them to the requesting browser. Gzip is a data compression technique and can reduce the Web page size to about 70% of its original size. This helps in sending the same data to browser about six times faster. However, using the same technique for images and PDF files might not be effective as these files are already in the compressed format.

 

We can compress files just by adding a simple Servlet Filter to the Web application. Also, the browser must support Gzip; almost all the advanced browsers support Gzip. The Servlet filter checks whether the browser supports Gzip in the request header parameter Accept-Encoding. If the browser supports Gzip, the filter compresses the files to the Gzip format just before sending the response. On receiving the server response, the browser checks the Content-Encoding header parameter in the file to determine whether the response is compressed and in which format it is compressed. If the response is compressed, the browser decompresses the response before displaying the Web page.

Server-side Caching

We can use this technique for dynamic pages involving some complex logic that is executed in a same way for every request. Here, we can save the Servlet response, that is, HTML files in a temporary directory in the form of cache on server. If a user requests for the same page thereafter, it is taken from the cache. This way, the server does not have to execute Servlet again to produce the HTML response. This technique saves time and processing power of the server.

 

We can also implement the server-side caching in the filter and use the Uniform Resource Identifier (URI) to uniquely identify the requested page.

Client-side caching

We can cache some of the Web page resources on the client browser itself. We can store the static contents on the browser cache. This is done by setting the Expires header to a far future date. This way, when a user requests the same page later, the browser fetches the cached content from the browser cache. No server request is made for the cached resources and thus the page loads faster because of fewer server requests. This is mainly used for static Web content, such as images.

 

For dynamic contents (such as JS and CSS files), we can set conditional request to the server that will check if the resource is modified. We can add Last-Modified header in every such file. When  browser cache has a file that includes the Last-Modified header, the browser uses the Last-Modified header information to ask the server if the file has changed since the last time it was seen, with the If-Modified-Since request header parameter. If the file is not changed, the browser uses the local copy of the file that is the cached copy.

Java Script Optimization

We can optimize JavaScript by using Ajax. With Ajax, we can introduce lazy loading of JavaScript code by loading the executable code only when it is needed. This reduces the initial load time by reducing the JavaScript code.

 

If a Web application has multiple external JS files in a single page, a new request is made for each JS file when the page starts loading. These requests are made one after another in a sequential manner. We can concatenate all these files to a single file. This reduces the number of server requests and makes the page load faster.

 

JS Minimization is a good technique to remove unnecessary comments and whitespaces from a file, and JS Obfuscation replaces the variable and function names in a file with smaller ones, thus reducing the file size further.

 

We can use readymade tools, such as the JSMin and the YUI compressors, to achieve JS Minimization and Obfuscation.

 

Java Script Optimizer (JSO) is an open-source Java API that can be used to achieve JS concatenation, JS minimization, and client-side caching.

 

Following table shows how much JSMin and Gzip can reduce the file size.

JSMin

Gzip

File Size(approx)

No

No

100%

Yes

No

52%

No

Yes

31%

Yes

Yes

20%

Other Techniques

Content Delivery Network (CDN) can be a good option to use if a Web application has a large number of distributed users. A CDN is a collection of Web servers distributed across multiple locations to deliver content more efficiently to users.

 

We can further optimize the speed of a Web application by reducing the number of images we use in the application. We can also reduce colors in images to reduce their file size. Using PNG files is also a good idea as they are smaller as compared to GIF files, and CSS Sprites is a good technique to reduce server calls by merging multiple images into a single one.

 

 

Fig. Filter implementation for GZip, JS Minimization and Cache optimization

 

Every day many new technologies are coming up that tend to provide rich internet experience to users with as less bandwidth usage as possible. For example, Packer (a JavaScript compressor similar to JSMin) along with Gzip can compress JS files to about 13% of its size.

 

Reference:


No comments:

Post a Comment

Was the information useful?

Followers