다음을 통해 공유

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="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

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

  • Anonymous
    December 27, 2006
    Nice tip.  Where can I get more information about this?

  • Anonymous
    December 27, 2006
    The HTTP 1.1 RFC is a good place to start. http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.1.4

  • Anonymous
    December 28, 2006
    The comment has been removed

  • Anonymous
    December 28, 2006
    The comment has been removed

  • Anonymous
    December 28, 2006
    The comment has been removed