Loading website images in parallel


By default web browsers will only open 2 simultaneous connections to a named website to be a good client. If you're loading several images this means you may hamstring your bandwidth usage and make your website load slower.

Take the following HTML source as our base, off a site hosted at www.example.com:

<img src="Image1.png" width="200" height="200" />

<img src="Image2.png" width="200" height="200" />

<img src="Image3.png" width="200" height="200" />

<img src="Image4.png" width="200" height="200" />

<img src="Image5.png" width="200" height="200" />

<img src="Image6.png" width="200" height="200" />

Network traffic for downloading 6 images over 2 connections
www Image1.png Image3.png Image5.png
www Image2.png Image4.png Image6.png

By not allowing more than 2 images to be downloaded at once the total page load time takes longer than is necessary. Since we own the host in question we know we can safely allow more than 2 images to be downloaded at once so we create two DNS aliases, img1.example.com and img2.example.com that both point to www.example.com. We now modify our HTML source to make use of these two new hosts:

<img src="Image1.png" width="200" height="200" />

<img src="Image2.png" width="200" height="200" />

<img src="http://img1.example.com/Image3.png" width="200" height="200" />

<img src="http://img1.example.com/Image4.png" width="200" height="200" />

<img src="http://img2.example.com/Image5.png" width="200" height="200" />

<img src="http://img2.example.com/Image6.png" width="200" height="200" />

Web browsers will now open 2 connections per named host (www.example.com, img1.example.com, and img2.example.com) for a total of 6 concurrent connections.

Network traffic for downloading 6 images over 6 connections
www Image1.png
www Image2.png
img1 Image3.png
img1 Image4.png
img2 Image5.png
img2 Image6.png

Downloading all of them at the same time decreases the amount of bandwidth available for any individual image but will maximize the overall bandwidth usage leading to faster load times.

Comments (5)
  1. Nice tip.  Where can I get more information about this?

  2. Kristoffer says:

    The HTTP 1.1 RFC is a good place to start.

    http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.1.4

  3. Daren says:

    Would this not lead to an increase of dns lookups? I can see this working on a popular web site where it is certain that dns records are cached locally on the clients dns server but otherwise you would you not have a dns lookup for every 2 images with the latency that goes with that? agreed we are talking about a small amount of time but as you suggest it is only of benefit to those clients with bandwidth downloading the images 2 by 2 would not take long either. I may be wrong and do accept that for popular sites and pages with a whole lot of images this would work and is a neat trick but otherwise for the average site would the human eye notice the difference ?

  4. Oh wow… Instead of making web browsers more intelligent and recognize fast connections to allow more than 2 concurrent transfers, let’s all destroy our web page sources, pollute the namespace with DNS aliases, and make my mother’s internet experience via her 33.6kbps modem degrade!

  5. Kristoffer says:

    Daren –

    Yes it does lead to more DNS lookups and you would need to do measurements yourself to see if this results in page load speed increase. For pages with only 6 images it may not but double or triple the images and you’re looking at a likely speed increase. Your mileage may vary tremendously but I work on a very image heavy site (Virtual Earth) where images are downloaded after panning and zooming so having multiple hosts benefits us tremendously and the overhead of extra DNS lookups only happens on the first load. Hopefully we’re also popular enough that your local DNS server has our records cached.

Comments are closed.

Skip to main content