HTTP Requests vs File Size?

Question

At what point is better to have more HTTP Requests if that means the page size goes down? For example, if I have an image that is 20KB, how much size would I have to reduce before it makes more sense to use two images?

Answer 1

The practical answer is never, especially when you're talking about relatively minuscule amounts of data like a kilobyte or two.

The real enemy of a web page's performance is not the number of bytes transferred; rather, it is network latency. Let's take your example and consider a 5 Mb/s connection (the average connection speed in the US is a little over that) with a ping time to your server of 80ms:

1x 20 kB files:  80ms latency + 31ms transfer time = 111ms
2x 4 kB files:  160ms latency + 13ms transfer time = 173ms

This "optimization" just cost at least 62ms with all other variables being equal. In the real world, I'd wager that performance would be even worse due to things like extra server load.

Also consider that you're now using an extra one of the limited number of parallel requests a browser will make (somewhere between 2 and 8 depending on browser) for a half of an image rather than something more valuable like script, CSS, or other non-spritable image. This will slow down the overall load time of your page.

Furthermore, I have a suspicion that your entire premise is flawed. In general, splitting an image into two files cannot truly yield a smaller overall file size because every image container format has header data; for example, a PNG file has at least 57 bytes of overhead before any actual image data. Plus, an extra HTTP request means an additional ± 800-900 bytes of overhead over the wire.

I suspect you'll find that one properly compressed PNG will be no larger than the total size of two PNGs making up the same image.

_{(source: josh3736.net)}
(1027 bytes)

<sub>(source: josh3736.net)

(source: josh3736.net)</sub>
(730 + 809 = 1539 bytes)

Even though the first single PNG has 150x100 pixels of "dead" transparent space, it is 33% smaller than the two PNGs that represent the same image. (Disregard that I can't align the <img> tags properly here to make the two examples look the same.)