JavaScript Speed Detection
Dec 14 2005This 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
onloadevent 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
onloadevent 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 theTHRESHOLDvalue 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!
View 14 Comments | Add a commentComments
1. Mikhail Bozgounov at 8:01am on December 15, 2005
...should try it one of these days.
Could this be done through PHP too?
Just an idea...
And thx for sharing this! :-)
2. Jesse Skinner at 12:18pm on December 15, 2005
Ya, it should totally be possible with PHP. I guess it would work more or less the same way.. sending a file, checking how long it takes, and perhaps setting a SESSION variable with the viewing-mode.
I'm just packing to go back to Canada for the holidays, so somebody else will have to write up the PHP solution :)
Happy Holidays,
Jesse3. haribol at 6:23pm on November 28, 2007
tahank you for this script
4. Damien at 11:40am on January 10, 2008
Nice idea!
6. nG at 10:33pm on April 19, 2008
I have been thinking about this as well. The only issue is using an image. The user has to load the image... that is the only major problem I see with this. Adding a timeout would help make it better, but I still cringe at the thought of making them load a file to test the speed.
7. Rob at 10:44am on April 21, 2008
I think using an image for the test is standard, but I'm no expert. I know that sites like pcpitstop.com uses images to test the speed. My boss uses a service that detects connection speeds, I wonder how they work...?
8. Alex Le at 2:52am on April 22, 2008
Based on this article, I wrote a more completed solution to use javascript for speed detection on my blog
http://alexle.net/archives/257
Cheers!
Alex9. MooCow at 10:20am on May 7, 2008
I have a high-speed connection and I still don't want to see anything that's made in Flash. In fact I browse with disabled plug-ins because Flash is an annoyance in 99.9999999% of cases.
Don't assume that high-speed = Flash and low-speed = HTML/CSS.10. Rob at 10:24am on May 7, 2008
MooCow...I somewhat agree with you. Being a frequent visitor of sites like espn.go.com, they WAY over do it with flash, but with a high-speed connection, I can't see how that can be such an annoyance. Nonetheless, you're right. I never believed in the thought of having a high-speed version of a site as well as a low-speed. That's just too much.
11. Jesse Skinner at 10:28am on May 7, 2008
@MooCow, @Rob - I agree as well. In a perfect world, all sites would be low-speed, and people would click specifically to see large things (videos, games, etc.)
The worse thing is, most Flash sites don't even give a choice, because they don't even have a non-Flash version. Say goodbye to search engine optimization and accessibility!12. Steve Barett at 11:36pm on April 21, 2009
At least the last three posts were over a year ago since they smell of typical neanderthal ignorance.
13. Steve Barett at 11:37pm on April 21, 2009
btw Jesse, thanks for your work on this, really useful.
14. Rob at 9:41am on April 22, 2009
"At least the last three posts were over a year ago since they smell of typical neanderthal ignorance."
Does anyone else find it ironic how ignorant this statement is? Sounds like someone is masking their intelligence (or lack thereof) by saying "typical neanderthal ignorance". Steve, can you even explain what that means? Is "typical neanderthal ignorance" a fancy way of saying "someone who is stuck in their ways"? If so, how exactly do they fit under that description?
I (Rob) was merely saying that too much flash can impede someone as they are trying to view a webpage. Particulary on sites, like espn, where if you accidentally hover over an ad it drops down over other content and selections or if you click on a link before the page is completely loaded and the link you want to click on drops lower, so the browser registers your link click on something else.
Steve, when calling someone ignorant, generally, you should try to avoid being ignorant yourself, in the same breathe.Add a Comment
Recent Articles
- jQuery Live Events
- I need web developers
- buttons need type="submit" to submit in IE
- Win $200 in a Web Dev Writing Contest
- Use Arrays in HTML Form Variables
- 5 Reasons Freelancers Can Succeed in a Shrinking Economy
- Keeping a Live Eye on Logs
- Using PHP's empty() Instead of isset() and count()
- Testing Web Pages with Lynx
- Stop CSS Background Flickering in Internet Explorer 6
- See All...
Older Articles
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- July 2008
- June 2008
- May 2008
- April 2008
- February 2008
- January 2008
- December 2007
- November 2007
- September 2007
- August 2007
- July 2007
- June 2007
- May 2007
- April 2007
- March 2007
- February 2007
- January 2007
- December 2006
- November 2006
- October 2006
- September 2006
- August 2006
- July 2006
- June 2006
- May 2006
- April 2006
- March 2006
- February 2006
- January 2006
- December 2005
- November 2005
- October 2005
- September 2005
- August 2005
- April 2005
- See All...
