InfoTales

HTTP protocol have many features built-in which can help in improving front end performance of a web application. In this post we will look into these features and see how they can be used to improve performance.
The features include (find details below)

• 304 Not Modified requests
• Expires header
• Keep-Alive
• Compression

304 Not Modified requests

When a page is opened, browser downloads all objects (images, css, js, flash etc etc) and put it in its cache (if not told specifically to not to). When caching it also stores the last modified data of the object. When same object is requested next time the browser checks if the object is already in cache. If found in cache browser sends a conditional http request to server, and sends the last modified date of the object in “if-modified-since”.

A sample request header will look like
GET /images/imagecache/109x100_carlisle-brass.jpg HTTP/1.1
Host: www.bestdoorhandles.co.uk
User-Agent: Mozilla/5.0 (Windows; ...
If-Modified-Since: Sun, 20 Jun 2010 04:57:52 GMT
The header is telling server that I have a copy of the image which was last modified on “Sun, 20 Jun 2010 04:57:52 GMT” tell me if the image was not modified after that or not?
A sample response header from server will be like
HTTP/1.1 304 Not Modified
Content-Type: image/jpeg
Last-Modified: Sun, 20 Jun 2010 04:57:52 GMT


The response will not include any image, so the size of response will be very small. After receiving this header the browser will use image from it local cache. This way a lot of user bandwidth is saved to give faster experience to visitor. When evaluating your web application performance make sure to test this behavior and make sure its working properly.

How to enable 304 Not Modified requests?

Apache web server sends the last modified date with each object by default, so you don’t need to do any thing to enable it.

Expires header

Expires header is great way to improve web application performance. 304 not modified requests make page load faster as compared to normal request, but they still send request to server and server has to validate it each time. This adds a round trip between client and the server.

Expires header is great because it tells browser to use object from cache without requesting the server again and again. Expires header consist of a date in GMT format. When browsers gets and expires header it stores the object in local cache with the expires date. The browser will not request the same object unless it is expired or refreshed (F5 or refresh button) by visitor.

An example header with expires will look like
HTTP/1.1 200 OK
Date: Sun, 20 Jun 2010 06:47:23 GMT
Cache-Control: max-age=3456000
Expires: Fri, 30 Jul 2010 06:47:23 GMT
Last-Modified: Mon, 23 Jun 2008 11:59:38 GMT
Accept-Ranges: bytes
Content-Length: 1388
Content-Type: image/jpeg

Now this images will be stored in local cache and browser will not send request for this image to server unless “Fri, 30 Jul 2010 06:47:23 GMT”. This is a great way to reduce http requests on repeat view of the page.

How to enable expires header?

For Apache web server you can add expires headers by adding following code in .htaccess file
<ifmodule mod_expires.c>
<filesmatch "\.(jpg|JPG|gif|GIF|png|css|ico)$">
ExpiresActive on
ExpiresDefault "access plus 7 day"
</filesmatch>
</ifmodule>

This tell apache web server to add expiry of 7 days to images, css and ico files, from time they are served.
When evaluating web application performance be sure that proper expiry headers are being sent from server.

Keep-Alive

Using persistent connections (keep-alive) is another great feature to be used for web application performance. HTTP is based on TCP, in early versions of HTTP a connection has to be opened for each request and closed later.

In later version this feature was introduces where browser and server use same connection to receive and send many requests on a single connection. This saves the overhead of opening and closing connections. On

Browser and server send a “connection” header to specify that they support keep-alive or persistent connections. Sample request and response headers can look like
Request header from browser
GET /images/imagecache/100x100_SW123.jpg HTTP/1.1
Host: youdomainname.com.ss
User-Agent: Mozilla/5.0 ( ...
Keep-Alive: 115
Connection: keep-alive

Response header for web server
HTTP/1.1 200 OK
Date: Sun, 20 Jun 2010 07:07:19 GMT
Last-Modified: Mon, 23 Jun 2008 11:59:38 GMT
Connection: keep-alive

How to enable Keep-alive?

Apache web server keep-alive is enabled by default. This configuration can be changed from apache configuration file.

Gzip Compression

Compression is a great feature to reduce the size of response from server, thus saving a lot of bandwidth of visitor. Gzip is used to compress response, it can reduce the size 70% or more, thus giving a faster response. Almost 90% of web traffic comes through browsers which support gzip compression, as all major browsers support gzip compression.

Browser tells the server if they are ready to accept gzip encoding, a sample request header will look like
GET / HTTP/1.1
Host: youdomainhost.co.cc
User-Agent: Mozilla/5.0 (...
Accept-Encoding: gzip,deflate


A sample response from server with gzip enabled will be like
HTTP/1.1 200 OK
Date: Sun, 20 Jun 2010 07:08:33 GMT
Content-Encoding: gzip
Vary: Accept-Encoding
Transfer-Encoding: chunked
Content-Type: text/html


How to enable gzip compression?

For apache web server gzip compression can be enabled by mod_deflate. If you have mod_deflate enabled on your web server you can enable gzip compression by adding following code in .htaccess
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript
</IfModule>
The code tells server to add gzip compression on webpages, text files, css and javascript files.

If you don’t have mod_deflate installed you can add compression by following php code

<?php
ob_start(‘ob_gzhandler’);
?>
<html>
<body>All of my page</body>
</html>
<?php
ob_end_flush();
?>

When considering options to enhance web application performance do consider gzip compression. You can also see Compress you pages to know more about gzip compression.

Over all these http features can be used to achieve great performance for you web site. This post is part of our “Web Application Performance” series, see the post for other great performance enhancements.