Monday, August 18, 2008

Reducing HTTP requests

One of the key aspect of on page optimization in web design process is to reduce the number of HTTP requests to the server for each page. This is one way to reduce the downloading time of the page.

Packet size and http requests

In order to make fewer requests we need to transmit fewer packets. To achieve this reduce size of the page hence the number of bytes and packets sent are reduced on Net. The number of embedded objects as image must be less and less in size as well. The images sent http request for each image separately hence a web designer should use less images which are properly optimized and their dimensions should be properly coded as well.

The effort is to reduce the number of packets sent and not necessarily their size. One method is putting files together and cutting down a the number of requests into one request. This can be achieved by putting multiple CSS files into one file and suturing images.

Making less http: requests

Web browsers limit the number of concurrent HTTP connections with server as HTTP 1.1 Specification to two. In Internet Explorer version 8 the limit is now six requests. The limit for Mozilla Firefox is eight requests. In this case the speed of server and connection is immaterial.

In case of images CSS sprites are useful.

They are small fragmented images grouped into one image in order to make few http requests.For example in case of website navigation having ten links this will translate to ten http: requests. If you create one image add all the small icons the server requests will come down.
Thus have the same background image for all containers and reposition the background image with fire bug to display the desired part of the whole image.

#link1{
background:url(background_image_sprite.png) -100px -20px;
}
#link2{
background:url(background_image_sprite.png) -100px -30px;
}

The real trick here to is re-position the background image to render the desired image in the whole image. We can use this image as fast rollovers too.

The CSS and Javascript can be grouped by suturing.

Actually there is a way. They call it suturing. Consider this fragment of code for PHP.

< ?php // Tell the browser we are outputting a css document type header('Content-type: text/css'); //and we can cached them too header('Cache-control: must-revalidate'); header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 10800) . ' GMT'); // group the css CSS files and output them as one include("css1.css"); include("css2.css"); include("css3.css"); ?>

For ASP/ASP.NET pages we can open them as stream and output them in the browser.

Response.ContentType = "text/css";
Response.Cache.SetExpires(DateTime.Now.AddDays(1));

Response.WriteFile ("css1.css");
Response.WriteFile ("css2.css");
Response.WriteFile ("css1.css");

We can also do that with javascript files. The idea is just the same.

Knowing the client server communication and the limitations is beneficial in web development.

The tips have been taken from this article here: Optimization Article

No comments: