Web application performance tips and tricks

I was interested in web application performance improvement topic earlier. When we (Myself and TechLead) discussed on this regard, he advised me to go through Yahoo Developer website on Web application Performance Improvement article (http://developer.yahoo.com/performance/rules.html). It adds more interests to go through similar topics earlier. After doing further Google search, found an interesting article from Balusc blog (http://balusc.blogspot.com/2009/09/webapplication-performance-tips-and.html) where he recommends few more option to enhance the web application performance, on top of the options mentioned in the above Yahoo developer Group website. It sounds more interesting.

So you might think, what am I trying to convey to my developer? J Did further search and come up with few more details on how we can design web application with the improved performance.

My analysis after referring an existing travel agent website below:

1) Use Of Content Delivery Network:

Reference#1 Yarta.Com (Website: http://uk.yatra.com/)

Style sheets downloaded from: http://css3.yatra.com

eg: http://css3.yatra.com/UK/include/css/uk-india-uk.css

Java script down laded from: http://js1.yatra.com

Eg: http://js1.yatra.com/UK/include/js/homepage.js

Images down loaded from: http://img1.yatra.com

Eg: http://img1.yatra.com/images/UK/AIR/continue_but.gif

Separate CNS referred to deliver specific content instead of delivering to Static content alone. This has been mentioned in my below diagram.

2. Points noticed during our analysis:

Direct access to these contents restricted, If we attempt to access it redirects to Home page

1. All the images are gif format. It is very less in size. They tried to minimize total no of images in a page as much as possible
2. Many of them embedded images along with Style sheet
3. Same application used for both http & https. Based on the protocol type actions were defined
4. A CSS Sprite (http://spritegen.website-performance.org/section/what-are-css-sprites) is a combination of smaller images into one big image. So that we can reduce total no of http requests
5. Don’t have spaces as much as possible in CSS/JS. Static file download time is directly related to size of the files

This chuck of CSS:

.some-class {

  color: #ffffff;

  line-height: 20px;

  font-size: 9px;

}

can be converted to:

.some-class{color:#fff;line-height:20px;font-size:9px;}

…and it’ll work just fine.

7. Try to have many forms as much as possible. In other words, our form should not have complex/more inputs

3) Web Page performance measurement Tools:

http://getfirebug.com/

http://sixrevisions.com/tools/faster_web_page/

4) Available tools to help us the web page optimization:

CSS:

http://sixrevisions.com/css/css_code_optimization_formatting_validation/

Image:

Digg (shown above http://digg.com), you can see individual icons for user interaction. To reduce server requests, Digg combined several icons in one big image and then used CSS to position them appropriately.

JavaScript:

JSMIN - http://www.crockford.com/javascript/jsmin.html

YUI Compressor - http://developer.yahoo.com/yui/compressor/

Java Script code improver - http://jcay.com/id-190119110113039.html

5) Reference:

http://sixrevisions.com/web-development/10-ways-to-improve-your-web-page-performance/

Hope this will add more interest to you as well! Happy learning!

-NJN