Loading website images in parallel

Kristoffer — Wed, 27 Dec 2006 20:10:00 GMT

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.

Loading Javascript files in parallel

Kristoffer — Fri, 22 Dec 2006 23:58:00 GMT

You've got your website all set up but are experiencing slow load times for some customers, especially on slower connections. One possible cause is inefficient network usage because of serialized loading of external Javascript files.

Static links in <head>

If you include script files in the HEAD element both IE and Firefox will download the scripts serially, waiting for each one to finish downloading before proceeding with the next one. Take the following HTML snippet that loads two external javascripts:

   
<head>
    <script type="text/javascript" src="Script1.js"></script>
    <script type="text/javascript" src="Script2.js"></script>
</head>

Network traffic for loading scripts in <head> tag

Script1.js

Script2.js

In this common scenario a large amount of network bandwidth can potentially go unused.

Loading the scripts in parallel

You have two options for loading scripts in parallel:

Attach them as elements dynamically
Use document.write to attach them

Both of these options will produce the same network traffic with the difference being in how the scripts are executed on the client. By loading the scripts in parallel we can cut down initial page load time drastically. The time for Script1.js to finish downloading will probably go up slightly over serial loading (since more of the connection is used) but the overall download time should decrease.

Network traffic for loading scripts in parallel

Script1.js

Script2.js

Attaching scripts as elements dynamically

<head>
    <script type="text/javascript">
        function AttachScript(src)
        {
            var script = document.createElement("SCRIPT");
            script.type = "text/javascript";
            document.getElementsByTagName("body")[0].appendChild(script);
            script.src = src;
        }
    </script>
</head>
<body>
  <script type="text/javascript">
    AttachScript("Script1.js");
    AttachScript("Script2.js");
  </script>
</body>

In this scenario IE and Firefox will download both scripts but Internet Explorer will also execute them in the order they finish downloading in whereas Firefox downloads them asynchronously but still executes them in the order they are attached in the DOM.

In Internet Explorer this means your scripts cannot have dependancies on one another as the execution order will vary depending on network traffic, caches, etc.

In Firefox you can mostly get away with keeping dependancies on Script1 from Script2 with the caveat that if the user presses stop after Script2 has finished downloading but Script1 has not, Firefox will execute Script2 and abort downloading Script1. Ensure that Script2 can properly handle Script1 failing to load.

Attaching scripts via document.write

<script type="text/javascript">
  document.writeln("<script type='text/javascript' src='Script1.js'><" + "/script>");
  document.writeln("<script type='text/javascript' src='Script2.js'><" + "/script>");
</script>

Using document.write produces the same effect in both Internet Explorer and Firefox: the scripts are downloaded in parallel but executed in the order they're written to the page. The same caveat above about the user stopping the page after Script2 has finished downloading before Script1 has applies.

This technique can be used to download more than two files at the same time as long as more than 1 hostname is used. IE will only open 2 HTTP connections to a named server in order to be a good client (Firefox will open 4) but you can easily work around this by creating additional domain names like scripts1.example.com, scripts2.example.com etc that point to the same host. At some point you will see diminishing returns and possibly even slowdowns from trying to download too many files at once so don't go too crazy with parallelizing.