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>
And now if you open the index.html file inside the browser you will see the below screenshot
