Question

First, a bit of background info:

The HTTP 1.1 specification, circa 1999, recommends that browsers and servers limit parallel requests to the same hostname to two. (more)

If you carry on reading that article the author suggests “fooling” browsers by having multiuple subdomains all pointing to the same thing.

If I was to serve my images from two separate subdomains (two different hostnames) then the browser would download a maximum of 4 images in parallel (2 per hostname).

Given that, I could now equally spread out the requests between the two subdomains to optimise page download speed, like so:

<img src="http://subdomain1.example.com/img1.jpg" />
<img src="http://subdomain2.example.com/img2.jpg" />
<img src="http://subdomain1.example.com/img3.jpg" />
<img src="http://subdomain2.example.com/img4.jpg" />

This would require me to manually go through the appropriate files and change the ‘src’ of each image.

---

I’m looking for a far more simple/reusable solution that involves no visible changes to the HTML.

I have an idea:

1. All image-like URLS on [example.com] are redirected (via .htaccess) to [example.com/imghandler.php]
2. imghandler.php redirects to either subdomain1 or subdomain2 – randomly chosen.

To illustrate:

# Request from browser:
>> http://example.com/dir/image.jpg

# Rewritten to:
>> http://example.com/imghandler.php?location=%2Fdir%2Fimage.jpg

# *Redirects* to either:
    1:
        >> http://subdomain1.example.com/dir/image.jpg
           (this is where the browser ends up getting the image from)
    2:
        >> http://subdomain2.example.com/dir/image.jpg
           (this is where the browser ends up getting the image from)

I have two questions:

1. From a theoretical point of view, would this work?
2. Is there a better way of accomplishing what I want?

Answer 1

One thing to keep in mind with strategies like this is you want to direct the requests for the same file to the same server. It doesn’t do much good to have requests for:

http://subdomain1.example.com/img1.jpg
http://subdomain2.example.com/img2.jpg
http://subdomain1.example.com/img3.jpg
http://subdomain2.example.com/img4.jpg

On one page then:

http://subdomain2.example.com/img1.jpg
http://subdomain1.example.com/img2.jpg
http://subdomain2.example.com/img3.jpg
http://subdomain1.example.com/img4.jpg

On the next.

The trick we use here is to hash the file name (GetHashCode in C#) and use that to choose a bucket:

var serverNumber = image.GetHashCode() % serverCount;

This ensures that further requests for the same image are served from the browser’s cache and not by a different server.