How to Detect Connection Speed With JavaScript

Connection speed is the rate data flows between two computer across a network, such as the Internet. Connection speed is measured in units of bits per second (bps), but usually is stated in kilobits (1024 bits) per second (kbps, typical for modem connections) or megabits (1024 kilobits) per second (Mbps, typical for broadband connections). Creating a web page with JavaScript to measure and calculate the connection speed is a useful administration tool for network and Internet connection monitoring that you can run right in your web browser. You can also use it to detect your website visitor's connection to decide whether to send the bandwidth-intensive or light version of your content.

Couple using laptop
credit: Creatas Images/Creatas/Getty Images

Step

Open your web page to which you want to add the connection speed detection JavaScript in your text editor.

Step

Add starting and ending script tags in the header area of the web page (after the starting tag but before the ending tag), for example:

Step

Step

Add the following code between the starting and ending script tags, replacing \"myimage.jpg\" with the file name of the image you want to use for the speed test. The \"?n=\" + Math.random() part of the address that is built and assigned to imageAddr tricks the web browser into fetching the image every time instead of using a locally cached version. Use an image with a file size of approximately 200 kilobytes.

Step

var imageAddr = \"myimage.jpg\" + \"?n=\" + Math.random() ;

Step

Add the following code on the next line of the script to create the variables to store the test's start time, end time and download size. Set \"downloadSize\" to the size of the image file in bytes.

Step

var startTime, endTime GO var downloadSize = 200000 ;

Step

Add the following code to set up the image that will be downloaded for the test. \"download\" is set up as an Image object. The action to capture the end of the download is assigned to activate when the image download completes.

Step

var download = new Image() ;
download.onload = function() {
endTime = (new Date()).getTime() ;
showResults () GO }

Step

Add the following code that runs the speed test. The current time is captured into startTime. The image address being assigned to download.src starts the image download.

Step

startTime = (new Date()).getTime() ; download.src = imageAddr ;

Step

Add the following function to the script that calculates displays the speed test results. First, it calculates the duration, converting milliseconds to seconds. Next, it converts the download size to bits, calculates the download speed, and converts the speed to kbps and Mbps. Finally, it pops up a message box with the results.

Step

function showResults () { var duration = Math.round((endTime - startTime) / 1000) ; var bitsLoaded = downloadSize * 8 GO var speedBps = Math.round(bitsLoaded / duration) GO var speedKbps = (speedBps / 1024).toFixed(2) GO var speedMbps = (speedKbps / 1024).toFixed(2) GO alert (\"Your connection speed is: \n\" + speedBps + \" bps\n\" + speedKbps + \" kbps\n\" + speedMbps + \" Mbps\n\") GO }

Step

Open the page in your browser, and test it to make sure the script works correctly. It may take a few seconds for the message box to pop up with the test results.