Skip to content
Related Articles

Related Articles

Improve Article

How to detect network speed using JavaScript?

  • Last Updated : 16 Jul, 2020
Geek Week

To detect the network speed using javascript, we will use the following approach.

Approach: Open the web page for which you want to know the connection speed. The page should be the one for which you want to add the javascript code for detecting the speed. Assign or set up the address of the image which you want to use for speed test to the variable. The variables for storing the test’s start time, end time, and download size should be created. Set the “downloadSize” equivalent to the image file size(In bytes). The end of the download action is assigned to activate when the image downloading is completed. It calculates the speed of the download process, and converts it to “kbps” and “mbps”.

Below is example illustrate the above approach:
Example:




<!DOCTYPE html>
<html>
    <head>
        <title>
          To detect network speed using JavaScript
        </title>
    </head>
    <body>
        <script type="text/javascript">
            var userImageLink = 
            var time_start, end_time;
            
            // The size in bytes
            var downloadSize = 5616998;
            var downloadImgSrc = new Image();
  
            downloadImgSrc.onload = function () {
                end_time = new Date().getTime();
                displaySpeed();
            };
            time_start = new Date().getTime();
            downloadImgSrc.src = userImageLink;
            document.write("time start: " + time_start);
            document.write("<br>");
  
            function displaySpeed() {
                var timeDuration = (end_time - time_start) / 1000;
                var loadedBits = downloadSize * 8;
                
                /* Converts a number into string
                   using toFixed(2) rounding to 2 */
                var bps = (loadedBits / timeDuration).toFixed(2);
                var speedInKbps = (bps / 1024).toFixed(2);
                var speedInMbps = (speedInKbps / 1024).toFixed(2);
                alert("Your internet connection speed is: \n" 
                      + bps + " bps\n" + speedInKbps 
                      + " kbps\n" + speedInMbps + " Mbps\n");
            }
        </script>
    </body>
</html>

Output:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :