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
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.
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!