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.
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: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.
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.
var startTime, endTime GO var downloadSize = 200000 ;
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.
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.
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.
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 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