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

Thursday, August 7, 2008

Website design articles

I am adding link to some very useful web design articles that cover a long range of subjects and are useful for on page optimization as well.

Web design articles

Saturday, August 2, 2008

Declaring Character Sets

Compliance to W3C recommendation means following guidelines set by the organization. One such guidelines is document text declaration or DTD in short. For optimum website design it is best to follow the recommendation made by the World wide web consortium.

The effort is create properly structured pages that speak to International audience uniformly and in cases to specific linguistic audience. The effort to standardize web site development technology is what W3C is aiming at.

When making DTD the < meta > tag should be placed just after the as this is to override default browser setting for character sets. Not many web designers know about this fact. Correctly placing the DTD helps the the latest version of browsers and earlier versions as well to properly render the page on the users web browser.

A website that does not contain the DTD tag does not conform to W3C recommendations. When you implement the tag correctly on the web pages it leads to compliance of W3C standards. Web designers should make a detailed study of W3C recommendation for declaring character sets on web pages as per the language used on the web page. Example for web page with mixed language structure should use UTF-8 as follows:



Thus character set enabled on webpage will render the text correctly on the users browsers.