Detailed explanation of how to test users' network speed

Navigator API

In modern web applications, internet speed has become a very important indicator. On the premise of ensuring user experience, maximizing page loading speed and reliability has become an issue that every front-end developer must consider. Measuring users' network bandwidth is one of the keys to achieving these goals.

The Navigator API is part of the Web API and provides access to browser information and browser settings. Among them, the Connection interface allows us to query the network type currently connected to the device (for example: wifi, 4G, etc.), the NetworkInformation interface provides useful information such as connectivity download speed, and many other APIs that can be used for network-related operations. This article mainly uses the NetworkInformation interface and the downlink attribute in it, which represents the average value of the transmission bits (bps) obtained within 2 seconds.

Methods to measure user network speed

• Obtain user network information

First, we need to obtain the user's network information, the interface can be accessed in the Navigator object, and the network bandwidth can be obtained by calling the method.

const networkInformation =  ||  || ;
let downloadSpeedMbps = ( / 1024).toFixed(2);

This code queries the connection type of the device for network connections and returns the appropriate connection speed (calculated in megabytes/second). If the device does not support the Connection API, then we should use other methods to estimate network speed.

• Completely random download request

Another way to get network bandwidth is to use HTTP GET requests. The basic idea is as follows: Create a completely random URL, which should avoid the impact of the browser cache policy and download it immediately.

function testSpeed(randomValueKB) {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest();
    ('GET', `data:text/plain;charset=utf-8,${()*parseFloat(randomValueKB)*1024}`, true);
    ("Content-Type", "application/x-www-form-urlencoded");
     = function () { 
      if ( == ) {
        const sizeMB = randomValueKB / 1024;
        const timeInSeconds = parseFloat(("X-Timer"));
        const speedMbps = (sizeMB / timeInSeconds).toFixed(2);
        resolve(speedMbps);
      }
    };
    (null);
  })
}

The above code passes the random file size as an argument to the testSpeed ​​function, and generates static content only for this purpose. This function returns a Promise that will be parsed after XHR 200 returns and contains the download speed expressed in Mb. Note that the server must include a custom header (X-Timer) in the response to calculate how long the request is from JavaScript and calculate the quantitative results.

Get the average

Once we measure the download speed, we need to average each request. This requires calling testSpeed ​​multiple times and adding the result to the array:

function average(results) {
  if ( === 0) return 0;
  const sum = ((acc, curr) => acc + curr);
  return (sum / ).toFixed(2);
}
const speeds = [];
for (let i=0; i < 5; i++) {  // Make 5 requests   testSpeed(550).then(speedMbps => (speedMbps));
}
const avgSpeed = average(speeds);
(avgSpeed);        // Print results

In the above code, we use a loop to perform 5 tests. Finally, we pass all the results to the average function, and the function returns the average value of multiple results.

illustrate

It should be noted that the above method only provides a rough network speed estimate. Since network conditions are relatively uncertain factors (for example, even if the user's wifi signal strength is constant, network traffic may still have peaks), the measurement is better if a method similar to the 5-time average is used.

In addition, the measurement process uses network resources, and the user should be idle or avoid unexpected impacts at the same time. From a performance and privacy perspective, it is recommended to use this feature in a reasonable way or write similar components.

In general, by leveraging the NetworkInformation interface in the Navigator API to obtain downlink attributes, we can measure the user's bandwidth relatively simply, which will facilitate us to improve performance and user experience in front-end applications.

The above is the detailed explanation of the method of measuring users' Internet speed. For more information about measuring Internet speed, please pay attention to my other related articles!