JavaScript Speed Detection
This question came up on the css-discuss mailing list today (asked by Howard 'duke' Holtz):
I would like to include a Flash header on the homepage, but switch to a standard gif header for viewers with slow connections. I was hoping that there is a way to maybe have two “includesâ€, and use one or the other – but first I need some kind of 'conditional switch' or 'logic switch'.This is a great question. I don't think any website has addressed this issue through scripting. We've all seen websites that start off with "Click here for Flash, Click here for slow connections" pages. But what about using JavaScript to test the speed of a connection?
I started experimenting with JavaScript and came up with a fairly simple, clean solution. It is all based on the onload event of an image. What we will do is time how long it takes to load an image. If the time is below our threshold for "high speed", we will display the flash content. Otherwise, we will do nothing and display the default content.
<script type="text/javascript">
var start = (new Date()).getTime();
var THRESHOLD = 2500; // a number we will calculate below
function speedTest() {
var duration = (new Date()).getTime() - start;
if (duration < THRESHOLD) {
// fast connection (display flash)
} else {
// slow connection (do nothing?)
}
}
</script>
<img src="some-image.jpg" onload="speedTest()">
The onload event can go on any image on the page, preferably the largest image to give us a better estimate. Let's say we only want users downloading faster than 10k/s to get the flash code. We check the size of our some-image.jpg, and see that it is 25kb. We can easily calculate the THRESHOLD value like so: (25kb) / (10k/s) = 2.5s. Converting this to milliseconds gives us 2500, so this is what we will use for the THRESHOLD.
If you're using Bobby VanDerSluis' Unobtrusive Flash Objects 2.0, you can put the UFO code to load Flash in the block for users with a fast connection. You can then do nothing for users with a slow connection and just let them see the default content on the page.
I have thought of one problem with this solution: if the image is in the user's cache, the number will be very low. This will cause the flash to be loaded if they come back later. To avoid this, you could add a no-cache rule on the webserver for this image. Or, instead of using an image on the page, you could load an image in the background with JavaScript using a random URL like so:
var testImage = new Image(); testImage.onload = speedTest; testImage.src = "some-image.jpg?random=" + Math.random();
Of course, if you are using PHP or another scripting language on the server, you could generate the random URL a number of different ways. This fix also has the downside that the visitor must download this extra image every time. You'll have to balance these factors in your solution to come up with one that fits.
Good luck! I'd love to hear your comments, suggestions and questions about this. Let me know how it goes on your own web sites!