Tuesday, August 26, 2008

Web Site Optimization Techniques using HTTP Compression

Following article covers the basic web site optimization techniques for better, faster web page loading that would save significant download time.

Using HTTP Compression:

This HTTP Compression technique uses the GZIP compression which is simple and one of the effective way to improve performance of web page loading.

Problem:   Whenever a particular web site is accessed from browser, it loads the particular page by making a request to the web server. Response content takes its time to get transferred to the client browser through the network.

Following is a typical request/response sequence without compression.

•   Client Browser: Makes a request for particular web page
•   Server: Processes the request and sends the HTML response to the browser over the network
•   Client Browser: Renders the HTML response whose content is of some specific size.

Size does matter of page loading time as the browser has to render the response sent by the web server over the network. If the response content is of big size, then it will take more time to load as the entire content has to be transferred over the network (intranet/internet).

Solution:   Efficient way to overcome the above problem is to compress the response content (zipping the content) instead of sending the actual content. This way we can save bandwidth and download time.

Following is a typical request/response sequence with compression.

•    Client Browser: Makes a request for particular web page with information that it accepts compressed content as part of the header information’s. [Accept-Encoding: gzip or deflate (two compression schemes)]
•    Server: Processes the request and sends the HTML response with information to the browser that it has compressed content as part of the header information’s. [Content-Encoding: gzip]
•    Client Browser: Would download the zipped/compressed content, decompress/extract and then render which takes relatively less time.



Usage: Enabling compression is one of the fastest ways to improve your site’s performance. But probably use it for compressing HTML, CSS and JavaScript as other contents like images; media files are already most likely compressed.

Note:
•    Few older browsers like MS IE 4.0, Netscape 1.0 on MS Windows 95 have problems with this compression technique. However most of the traffic now comes from new browsers in order to utilize the latest technology advancement, this technique is recommended and is widely been used nowadays.
•    When you use the "Content-Encoding: gzip" HTTP header, the "Cache-Control: no-cache" header may not work on Internet Explorer version 5.5 Service Pack 2 (SP2) and 6. Meaning Content is always cached.

Reference Links:

http://developer.yahoo.net/blog/archives/2007/07/high_performanc_3.html
http://www.http-compression.com/

1 comment:

Natty said...

Thatz a nice article dude… I luv it and its my favorite domain.. my 2 cents will include

1. http compression as you’ve pointed out
2. enabling server side cache
3. white space compression – reusing the js functions / reducing fancy comments 
4. Reducing the number of http references – like consolidating the javascripts / css
5. Image optimization / reuse
6. CSS centric design to reduce image usage and html tag usage
7. Avoiding nested tables which goes more than 4
8. AJAX / threading / workflow techniques for improving the customer experience