How to Detect Internet Connection Speed of User in Browser Using Vanilla Javascript Full Project For Beginners

How to Detect Internet Connection Speed of User in Browser Using Vanilla Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be detecting the internet connection speed of user in browser using vanilla javascript. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<!DOCTYPE html>
<html>
    <head>
        <title>
        To detect network speed using JavaScript
        </title>
    </head>
    <body>
        <script type="text/javascript">
            var userImageLink =
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200714180638/CIP_Launch-banner.png";
            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>

 

See also  Node.js Express Broken Link Checker SEO Online Tool Deployed to Website + Source Code

 

And now if you open the index.html file inside the browser you will see the below screenshot

 

 

Leave a Reply