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

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="https://img1.example.com/Image3.png" width="200" height="200" />

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

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

<img src="https://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

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.