March 20, 2012

One way to improve the performance of a website is to reduce the size of the http headers. The http headers contains information like Host, User-Agent, Referer, Cookie, Accept-Language, etc. For some of the request headers like Accept-Language or User Agent, it is probably not possible to remove these or to minimise these as these automatically generated, But for other like Cookie and Referer, it is possible to minimise their sizes.

For Referer, it basically contains the url for the page that referred to this resource. If the url could be shortened, then the size of the Referer and therefore the header could be minimised. This scenario really depends on the priority - for example, between www.example.com/a.html ans www.example.com/australia.html, the first url is better for reducing the header size but the latter is much better for seo. So, one would really make to check if it is worth having short urls over a longer one.

For Cookies, it is better to have smaller cookies. Cookies are sent back to the server for each of the requests - including, images, css, javascripts. That is, if one url requests 20 items (images, css, javascripts), then each cookie are sent back to the server 20 times. Couple of steps can be taken to partially improve this situation.

Static content like images, css and javascripts can be sent from a cookie-less domain. For example, setup a new sub-domain called static.example.com that would only serve static content. This would mean the cookies will not be sent over for static content improving the performance.

Also, when cookies are set, it should be checked if the path for the cookle is correctly set. For example, if cookies are needed only for one application - www.example.com/abc, then the cookie should be set only for www.example.com/abc and not for the whole site - www.example.com/ . This would also result in less cookies being sent back to the server.

March 18, 2012

One of the ways to improve the speed of downloading a website is to decrease the number of http requests. A typical web page can contain html for the content, javascripts, stylesheets, images, flash, etc. Each of the components results in a http request. To decrease the number of http requests, a page can either be simplified using less images, less css, etc or by using some techniques to optimise the design.

Image maps can be used to combine few images into one. Converting multiple images to image maps may or may not be possible depending on the requirement. Image maps do not necessarily improve the size that needs to be downloaded but does decrease the number of http requests.

Multiple stylesheets can be combined into one. This may or not be suitable depending on the site's design. If the same css are used on most of the pages, it's worth to combine the css into one file. This again will reduce the number of css files that needs to be downloaded.

Multiple javascript files can be combined to one if the same files are used on most of the pages. Doing so will reduce the number of javascript files that need to be downloaded.

For both css and javascript files, the html document should be checked to make sure the same files are not being called. If the same files are called, the some browsers will re-download the files making the pages slow.

Number of image requests can be reduced by combining the background images into a single image and using "background-image" and "background-position" css properties. The "background-position" can be used to show the segment of the image that needs to be displayed.

The size of the web pages can be decreased by compressing the css, javascript and html files. White spaces can be removed from the files and other online tools like Google Closure or www.csscompressor.com can be used to further compress the documents.

Every now and then, I have noticed web pages where the height and width properties of the images are modified and displayed. When larger images are used and displayed smaller using height, width properties, the browser is actually downloading a larger image than is necessary. These images should be reduced in size using tools like Photoshop or Google Picasa.

Inline javascript and css can be minified to reduce the size of the html document. Scripts and css can be embedded using the
Reference: Shahed Kazi at AspNetify.com