Latency and Bandwidth Effects on data URIs in CSS

Today’s post is just a quick one to share some data from bandwidth and latency tests I conducted on a page using CSS embedded data URIs. For the tests I used another free template from Smashing Magazine and set up the same scenarios as last time:

Original: 1 HTML, 1 CSS in HEAD, 1 JS in footer, 1 inline image, 17 CSS background images. 21 HTTP requests.
Data URI #1: 1 HTML, 1 CSS in HEAD, 1 JS in footer, 1 inline image, 1 32kb+ CSS background image. 5 HTTP requests.
Data URI #2: 1 HTML, main CSS in HEAD, data URI css in footer (after JS), 1 JS in footer, 1 inline image, 1 32kb+ CSS background image. 6 HTTP requests.

In last week’s post I tested the scenarios in Firefox 3.5. This time I tested a few different browsers but the results I’m posting are for Safari 4. Note that Safari (as well as Chrome) allows a maximum of 4 connections per hostname, compared to FF’s and IE8’s 6. This means the reduction in HTTP requests should produce a greater performance boost in Safari/Chrome.

The focus this time around was bandwidth and latency, so I used the fantastic HTTP proxy Charles to simulate various bandwidth and latency conditions.  I tested each scenario at 1000 kbps, 1500 kbps, and 3000 kbps connections, with average latencies of both 50ms and 300ms.

Results

safari-50ms-latency

safari-300ms-latency

We see that the data URI pages perform better than the original in all cases.  And in all cases data URI #2 performs as well as or better than data URI #1.  We can also see that latency conditions play a greater role than bandwidth conditions in determining the performance benefits of the data URI scenarios.  Given that using data URIs is a means to achieving fewer HTTP requests, this is not at all surprising.

Note how well the data URI scenarios performed at 3000 kbps.  At both latency levels we got a load time reduction of almost 50%.

Waterfalls

It’s not a performance party without some gratuitous waterfall action.

safari-waterfall-org

safari-waterfall-datauri-1

safari-waterfall-datauri-2

The key difference between data URI #1 and data URI #2 is that in the latter the large image downloads in parallel with the data URI stylesheet.

If you want to experiment with the pages yourself, you can download a zip of the 3 versions here.

What’s next?

A look at IE8, maybe mobile, a review of the options for dealing with IE6/7, and soon an attempt to sculpt all of this into some conclusions and best practices.

Both comments and pings are currently closed.

Discussion

Thanks for interesting research!