0

I need to code an internet speed test page. However, no matter how much I search for resources, I can't get the right result. When I measure my speed from several different speed test sites and measure my speed with methods on the internet or on stackoverflow, I see a serious difference.

  var imageAddr = "https://cdn.wallpapersafari.com/42/1/Scu4IV.jpg";
        var downloadSize = 18300000; //bytes

        function ShowProgressMessage(msg) {
            if (console) {
                if (typeof msg == "string") {
                    console.log(msg);
                } else {
                    for (var i = 0; i < msg.length; i++) {
                        console.log(msg[i]);
                    }
                }
            }

            var oProgress = document.getElementById("progress");
            if (oProgress) {
                var actualHTML = (typeof msg == "string") ? msg : msg.join("<br />");
                oProgress.innerHTML = actualHTML;
            }
        }

        function InitiateSpeedDetection() {
            ShowProgressMessage("Loading the image, please wait...");
            window.setTimeout(MeasureConnectionSpeed, 1);
        };

        if (window.addEventListener) {
            window.addEventListener('load', InitiateSpeedDetection, false);
        } else if (window.attachEvent) {
            window.attachEvent('onload', InitiateSpeedDetection);
        }

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

            download.onerror = function (err, msg) {
                ShowProgressMessage("Invalid image, or error downloading");
            }

            startTime = (new Date()).getTime();
            var cacheBuster = "?nnn=" + startTime;
            download.src = imageAddr + cacheBuster;

            function showResults() {
                var duration = (endTime - startTime) / 1000;
                var bitsLoaded = downloadSize * 8;
                var speedBps = (bitsLoaded / duration).toFixed(2);
                var speedKbps = (speedBps / 1024).toFixed(2);
                var speedMbps = (speedKbps / 1024).toFixed(2);
                ShowProgressMessage([
                    "Your connection speed is:",
                    speedBps + " bps",
                    speedKbps + " kbps",
                    speedMbps + " Mbps"
                ]);
            }
        }
 <h1 id="progress">JavaScript is turned off, or your browser is realllllly slow</h1>

How to detect internet speed in JavaScript?

I don't want to serve a speed test site that gives wrong results to users. I used the code in the thread here. I found an image with a higher size to give accurate results. I converted the 18.3 mb image to bytes online in order not to make any mistakes. enter image description here

enter image description here

There are significant differences between the values. Isn't it possible to detect the internet speed on the front end with an accurate result, even if it is close to its normal value?

  • 3
    What do you mean by _right result_? Internet speed depends on where is the server that you are testing speed to, what bandwith is the server connected to the internet, your current network usage and so on. There's no **correct** answer what your speed is. – Adrian Kokot Sep 13 '21 at 15:56
  • 3
    The image is 5.9mb big. You won't get anything reliable with such a small payload. – Andreas Sep 13 '21 at 15:56
  • Github, Discord etc. Will I get an accurate result when I upload a strong image to major platforms? How many mb should the size be? Thank you very much for your responses. –  Sep 13 '21 at 15:59
  • How can I detect how much of the file has been downloaded after the specified time? If you give an example, I'd like to accept the answer and rate it. You have been very helpful. –  Sep 13 '21 at 16:13

0 Answers0