RSS

Reengineering Web application Performance

21 Nov

This article explains few points that can make a web site scalable and reliable.

Minimize HTTP based Requests

  • Use Image maps to merge up images which are in sequence, like navigation images.
  • Use Inline images to reduce the requests to the server.
  • Use CSS Sprites to merge up images and setting their position and backgrounds.

Using CSS

  • Use a single .css file by combing all the CSS based classes into a single file. Using multiple .css files will cause a large amount of requests
  • CSS files are normally cached by browsers, so a single and heavy .css file doesn’t cause a long wait on each page request.
  • Avoid using inline .css files because they will make HTML page heavy.

Using JavaScript

  • Avoid using Inline JavaScript, which will make the HTML page heavy.
  • Use a separate JavaScript files or a single JavaScript file to keep all the JavaScript-based scripts in a single place.
  • JavaScript files get cached automatically by browsers, so they usually aren’t requested each time the page is loaded by the browsers.

HTTP Compression

  • Use HTTP Compression to compress the contents from the web server. HTTP requests and responses could be compressed, which can result in great performance gains. Through HTTP compression, the size of the payload can be reduced by about 50%, which will increase the performance of the site.

Correct Formatted Images at the Right Place

  • Use JPG/JPEG format to place a background image, some large image or a screenshot
  • Use PNG format to place small graphics like button images, header images, footer images, navigation bar images or clip arts.
  • Use GIF format, if an image is not required to be in high or true colors and 256 colors are enough.

Compress CSS, JavaScript and Images

  • Compress the CSS files (.css), images and JavaScript (.js) files to remove the unnecessary spaces, comments, unnecessary code and such other things.

CSS at Top

  • Use the CSS links on top of the web page, as it makes the page render progressively efficient.

JavaScript at Bottom

  • Use the JavaScript-based scripts at the bottom of a web page.  It is better to display the HTML contents of a page, and then load any scripting code.
  • Use defer attribute to run the script at the end of the page loading, but this attribute is browser dependent.

Content Delivery Network: (CDN)

  • Distribute web application data in different places around the world so the request can be served from the nearest location and save time. Through CDN, the web site can be placed on multiple servers in different locations.

Ajax

  • Use the GET method for Ajax based Requests, because the POST method then the request header would be sent first, followed by the data, which basically splits the request in two steps. A single-step request can be achieved with GET if a cookie is not too long and the URL is not larger than 2k.
  • When using ASP.NET AJAX and the Update Panel control for partial page rendering, use the maximum number of update panels to update small chunks of page, but use them wisely. Don’t set the Update property to Always unless needed. Instead, set the update mode to Conditional, otherwise all the partial chunks would be sent together after each asynchronous postback.
  • Ajax based requests can also be cached when using the GET method. If the URL is the same, then cached data can be used from the client, and a round trip to the server can be avoided.

Callback

  • Ajax is great mechanism for sending requests to the server without making a full page postback, but call back is a good mechanism to send a request to the server without any rendering.
  • For example, to check whether a user exists or not, or if a user has forgotten his/her password and just need to send a request to the server to check if user name exist, there is no need for client-side render – just a server side operation.

Reduce Cookie size

  • Cookies are stored on the client side to keep information about users (authentication and personalization). Since HTTP is a stateless protocol, cookies are common in web development to maintain information and state. Cookies are sent with every HTTP requests, so try to keep them low in size to minimize effects on the HTTP response.
  • Cookie’s size should be minimized as much as possible.
  • Cookies shouldn’t contain secret information. If really needed, that information should be either encrypted or encoded.
  • Minimize the number of cookies by removing unnecessary cookies.
  • Cookies should expire as soon as they become useless for an application.

Use Cache appropriately

  • Use Cache mechanism is a great way to save server round trips – and also database server round trips – as both round trips are expensive processes.
  • Static contents should be cached, like “Contact us” and “About us” pages, and such other pages which contain static information.
  • If a page is not fully static, it contains some dynamic information. Such pages can leverage the ASP.NET technology, which supports partial page caching.
  • If data is dynamically accessed and used in web pages – like data being accessed from some file or database – and even if data is consistently or regularly changed, then that data could be coached by using ASP.NET 2.0 cache dependency features. As soon as data changes from the back-end by some other means, the cache would be updated.

 Upload compiled code rather than source code

  • Pre-compiled ASP.NET pages perform much better than source code versions. Actually pre-compilation give web sites a performance boost especially when the first request is made to a folder containing that resource.
  • Uploading a pre-compiled version boosts up performance since the server doesn’t need to compile a page at request-time.

Other approaches

  • Avoid redirects until needed.
  • Minimize use of Iframes as it’s costly.
  • Avoid try-catch blocks for control-flow as they perform poorly. Exceptions should be used only in truly exceptional situations.
  • Minimize DOM objects on page as they are heavy weight.
  • Use link tags rather than @import to use/link up CSS. 

Please share your valuable information about Reengineering Web application Performance.

Advertisements
 
Leave a comment

Posted by on November 21, 2008 in Web

 

Tags: , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: