How to calculate overhead of a web request?

Question

Suppose there is a fancy button to be put on a website. And the design of the button is such that parts of it can be sliced and applied as a repeating background.

I often slice the images and apply them as a repeating backgrounds this way. So one button in an image is split into several different images. I do this to reduce the size of the images used.

My team leader told me not to slice the images. If you slice a button into three parts, there would be three web requests. And this will slow down the site.

I find it hard to believe that the overhead of three requests would be more than using the entire image. So I just want to know how to calculate the amount of bytes transferred per web request.

Answer 1

If you reuse the three images a lot in the site than you will save requests and bandwidth (your gut reaction). However the three images need to be initially retrieved -- so you must reuse them.

The crux is this: Due to HTTP pipelining the overhead is pretty much negligible (especially since you consider that this is HTTP -- a string based protocol). Three images being retrieved probably have the same latency as retrieving a single image.

-- edit: after comment from Ericlaw --

Pipelining is indeed not widely supported. However this does not mean you don't stand to gain from three images. Just make sure you reuse them A LOT throughout your website.

-- edit --

Browsers also open multiple connections to a server, the norm is 2 connections last I checked -- however, I believe recent browsers open more.

Answer 2

You could use the net tab on firebug to see the time taken for each web request, its also broken down into the time it takes to download each component in the response.