How to Detect Connection Speed With JavaScript

Techwalla may earn compensation through affiliate links in this story. Learn more about our affiliate and product review process here.
Image Credit: Creatas Images/Creatas/Getty Images

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.

Advertisement

Step 1

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

Video of the Day

Step 2

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:

Advertisement

Step 3

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.

Advertisement

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

Step 4

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.

Advertisement

var startTime, endTime GO var downloadSize = 200000 ;

Advertisement

Step 5

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.

Advertisement

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

Step 6

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.

Advertisement

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

Step 7

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.

Advertisement

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 }

Advertisement

Step 8

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.

Video of the Day

Advertisement

Advertisement

references & resources