Identify method for measuring users download speeds - TS-6760

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

Approach 1:
The web page for which we want to know the connection speed. We need to add the javascript
code for detecting the speed. We will be using an image file to detect download 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”

This Approach has minor differences when we test local and on online internet speed testers.
[±0.14 mbps] difference.

Problem with the approach: If a user's internet is already slow, do you really want to download
a large image to check how slow it really is? Also it will consume the bandwidth of already slow
networks.

Approach 2:
The script would download a very tiny image multiple times, generating the average download
speed, and determining if the internet is fast or slow. Basically, we can set a "threshold" value. If
the image is taking (on average) longer than "threshold" milliseconds to download, then the
internet must be slow. Sounds great, and it doesn't hog bandwidth either.

This approach has high accuracy as we test locally and compare it with online internet speed
testers.

This approach has been converted to npm package “isfastnet”.

NPM Packages:

NPM Package JS Version

ng-speed-test Angular 2+

react-internet-meter React -

isfastnet JS -
Script for Approach one:
JS Fiddle to Test 1

Script for Approach two:

JS Fiddle to Test 2

Reference:

Stackoverflow.com
Geeksforgeeks.com
Npmjs.com
Github.com
Jsfiddle.com