Let’s start with a question. What download speed would you expect in this scenario?

If you just think of network connections as a simple pipe, then you might expect the download speed to be approximately the same as the slowest network connection, i.e. 20 Mbps. When we tested this out using a local UK based website with a ping time of 13 ms we saw this:

The download speed of 1.57 MB /s or 12.56 Mbps (i.e. 1.57 x 8 for 8 bits per byte) was over 60% of the theoretical maximum for the internet connection. That’s quite respectable if you allow you the overhead of the IP and TCP headers on each network packet.

However, the situation was quite different with our own web site that’s located in Dallas. It has a ping time of 137 ms from our office in the UK:

This time the download speed was 372 KB/s or 2.91 Mbps – less than 15% of the advertised internet connection speed.

At first we thought this was some sort of bandwidth throttling of transatlantic traffic by our ISP. However, when we tried using other networks to perform transatlantic downloads we could never get more than about 3 – 4 Mbps. The reason for this behavior became clear when we saw Aladdin Nassar’s talk about Hotmail Performance Tuning at Velocity 2008:

Slide 7 of his talk shows that with standard TCP connections the round trip time between client and server (i.e. ping time) imposes an upper limited on maximum throughput.

This upper limit is caused by the TCP flow control protocol, It requires each block of data, know as the TCP window, to be acknowledged by the receiver. The sender will not start transmitting the next block data until it receives the acknowledgement from the receiver for the previous block. The reasons for doing this are:

• It avoids the receiver getting swamped with data that it cannot process quickly enough. This is particularly important for memory challenged mobile devices
• It allows the receiver to request re-transmission of the last data block, if it detects data corruption or the loss of packets

The ping time determines how many TCP windows can be acknowledged per second and is often the limiting factor on high bandwidth connections as the maximum window size in standard TCP/IP is only 64 KB.

Let’s try putting some numbers into the bandwidth equation to see if it matches our results. For large downloads in IE the TCP window starts at 16 KB but is automatically increased to 64 KB.

So for our remote download test:

Maximum throughput = 8,000 x 64 / ( 1.5 x 137) = 2, 491 Kbps = 2.43 Mbps

This value agrees fairly well with the measured figure. The 1.5 factor in the equation represents the overhead of the IP / TCP headers on each network packet and may be a a little too high explaining some of the difference.

In the past, with dialup connections the maximum throughput value was much higher than the 56 Kbps available bandwidth. But with today’s high bandwidth connections, this limit becomes much more significant. You really need to geographically position your web server(s) or content close to your users if you want to offer the best possible performance over high bandwidth connections.

There are two solutions to this issue but neither is in widespread use:

• IPv6 allows window sizes over 64 KB
• RFC1323 allows larger window sizes over IPv4 and is enabled by default in Windows Vista. Unfortunately, many routers and modems not support it

In the case of interplanetary spacecraft, the round trip time may be colossal. For example, the ping time to Mars can be up to 40 minutes and would limit TCP throughput to approximately 142 bits / sec! With this in mind an interplanetary version of TCP/IP has been designed:

http://www.cs.ucsb.edu/~ebelding/courses/595/s04_dtn/papers/TCP-Planet.pdf

Conclusions

1. Distance doesn’t just increase round trip times; it can also reduce download speeds
2. Don’t blame your ISP for poor downloads from distant web sites
3. Consider using a Content Delivery Network (CDN) or geo-locating your web servers

The recently announced Google Ajax Libraries API caught our attention because it offers some significant performance improvements if you use a popular Javascript library (e.g. JQuery, prototype, script_aculo_us, MooTools or dojo)  on your site. You can now reference these libraries at Google rather than having to host your own copy. The benefits of this approach are:

• The libraries are hosted on Google’s high speed global network providing fast access from most locations world wide
• HTTP compression minimizes the size of the download
• Minimized versions of the each library are available to further reduce download size
• The library that your site uses may already be in the user’s browser cache if the user has visited another site that uses the Google hosted libraries
• You can specify which version of a library should be used with a hard coded URL or allow for automatic version upgrades using the google.load() function
• Downloading from a different hostname (i.e. ajax.googleapis.com) frees up an HTTP connection in the browser that can be used to download other resources from your site
• Google picks up the bandwidth bill for the hosted Javascript libraries

Based on these benefits, we decided to upgrade our Ajax gallery page to use the Google hosted version of jQuery. To do this we simply changed the script tag to use the URL of the minimized version of jQuery 1.2.6 at Google:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">                                                                                                  
</script>

The Google hosted version of the jQuery library gave us a consistent decrease in page load time of about 0.5 seconds. This benefit was largely achieved through the use of a different hostname (ajax.googleapis.com) which avoided Blocked time on the library download. You can see this clearly by first looking at the HttpWatch time chart of the Ajax page load in IE 7 using our own hosted copy of jQuery:

and then the time chart of the page load using the Google hosted version:

We also saw a reduction in the Wait time displayed in HttpWatch. It reduced from about 150 ms with our hosted version to about 60 ms from Google. This was probably due to the use of Google’s Content Delivery Network (CDN). Our web server is hosted in Dallas, Texas and has a ping time of about 140 ms from our office in the UK. The Google host ajax.googleapis.com has a much lower ping time of 29 ms from here in the UK.

However, the overall response time for the library download, ignoring Blocked time, was slightly longer from Google because it incurred an extra DNS look-up and TCP connection. Here is the request level time chart for our hosted version of the library:

and the Google hosted version:

One slight disappointment was that Google has set the cache expiration time of the library to one year in the future:

On most other Google sites they use very long expiration times as described in our Two Simple Rules for HTTP Caching post. They could have done this here, but it probably helps them to gather some usage statistics on these libraries and the chances of a cached Javascript library surviving in a browser cache for more than a year are fairly low.

In the end though, we hit one problem that stopped us using the Google hosted library. There appears to be no support for using HTTPS to download the library. Our Ajax page can be used in HTTP and HTTPS mode. If we simply hard-coded the HTTP download URL for Google we would end up with the dreaded ‘Do you want to display nonsecure items ?’ that we described in a previous post:

So, if you are only using HTTP there are some excellent performance benefits from using the Google hosted Javascript libraries, but if your site needs HTTPS you’ll be forced to use your own hosted version on secure pages. Let’s hope that Google adds SSL support to ajax.googleapis.com.

Tip #1: Be Aware of PNG Limitations in Internet Explorer

The Portable Network Graphic (PNG) format is well supported by modern browsers (e.g. IE 6+, Firefox 1+ and Opera 5+), except for two issues with Internet Explorer:

• Graphics tools like Adobe Photoshop save a Gamma correction table in the PNG file that is designed to allow for differences in the brightness of displays. Unlike other browsers, IE uses this table to adjust the brightness of a PNG image and therefore causes color mismatches when viewed alongside CSS colors or images in other formats. This problem is easily corrected by deleting the chunk containing the table with a tool like TweakPNG:
• There is no transparency support for the normal PNG-24 format (24 bit color) in IE 6. However, simple 1 bit transparency, like GIF files, is supported with the PNG-8 format (8 bit color).

Tip #2: Use PNG Images For Screenshots, Buttons and Logos

The Deflate compression algorithm used by PNG always preserves the original image, unlike the JPEG format which allows a trade-off between image quality and size. The screen shots below show how the image can become degraded with JPEG:

300% zoomed view of medium quality JPEG:

300% zoomed view of equivalent PNG:

So, if you need to display screen shots, logos, buttons or other artwork then you should use PNG files to avoid the sort of compression artifacts seen above. It is possible to save a JPEG image with 100% quality (i.e. lossless) but the file ends up being much larger than the equivalent PNG.

Tip #3: Consider Replacing GIFs With PNGs

A GIF file of more than a few hundred bytes will usually be smaller if it is converted to an equivalent PNG.  You can achieve even greater savings if you use the PNG-8 format (8 bits per pixel) compared to the usual PNG-24 (24 bits of color per pixel) format.

However, if you need animated images you’ll have to stick with GIF files because PNG has no animation support.

Tip #4: Don’t Use PNGs For Photos

The compression algorithm used in JPEG was designed for photographic content. Although it does not exactly preserve the original image, very substantial savings can often be achieved without introducing any noticeable degradation. For example, the image shown below is over 10 times smaller as a JPEG rather than a PNG with no noticeable differences:

PNG – 24 bit color, file size 88 KB:

JPEG – saved as medium quality in Photoshop, file size 7 KB:

Tip #5: Not All PNGs Are Created Equal

There is some flexibility in the way the deflate compression is applied to an image in a PNG file. This means that if you save the same image in different graphical tools you’ll often see different files sizes. We tried saving the largest PNG from our web site in three different tools:

File size for 786 x 245 PNG image:

Adobe Photoshop:  104 KB
Paint Shop Pro: 105 KB
MS Paint: 132 KB

The file produced by the Windows built-in Paint program was nearly 30% larger than the output from Adobe Photoshop!

To get the smallest possible file size, use a post processing tool like PNGOut. With our sample image, it produced a PNG file size of 100 KB.