'Can I measure my users' internet speed in my react web app?

I built a small react web app and I'm noticing that some users are dropping off constantly.

I know that fast.com appears to measure web speed by having the client download a file and then upload it.

Would if be feasible to do something like that for my react web app?

reactjsperformancereact-nativepagespeed


Solution 1:[1]

Yes. You can certainly do that. but instead of downloading and uploading a file which will require some sort of prompt.

What you can do is load an image <Image source={someURL}/> with a known size perhaps from a url, and display to the user. Your application logo can work. it will not be 100% accurate but it will get you what you want and start a timer before loading and finish the timer after it has been loaded you can use react hooks or didComponentMount depending on a functional component or a class with measuring the time.

const CalculateTime = (time) => {
 const mins = Math.floor(time/60);
 const secs = time-mins*60;
 //you can calculate milliseconds etc...
 return (mins, secs);

using react-hooks in your main function

export default function App(){

 [isActive, startActiviating] = useState(false);

ofcourse call your function from your return () and calculate the time.

Solution 2:[2]

I found this

import { ReactInternetSpeedMeter } from 'react-internet-meter'
import 'react-internet-speed-meter/dist/index.css'

const App = () => {
       <ReactInternetSpeedMeter  
            txtSubHeading="Internet is too slow"
            outputType="alert"
            customClassName={null}
            txtMainHeading="Opps..." 
            pingInterval={4000} // milliseconds 
            thresholdUnit='megabyte' // "byte" , "kilobyte", "megabyte" 
            threshold={100}
            imageUrl="https://res.cloudinary.com/dcwxsms2l/image/upload/v1610376487/pexels-ivan-samkov-6291574_bzqgps.jpg"
            downloadSize="1781287"  //bytes
            callbackFunctionOnNetworkDown={(speed)=>console.log(`Internet speed is down ${speed}`)}
            callbackFunctionOnNetworkTest={(speed)=>setwifiSpeed(speed)}
          />
}

the callbackFunctionOnNetworkTest will run after every pingInterval and will give you the speed of internet. It is recommended to use imageUrl of your server and its downloadSize [1]: https://www.npmjs.com/package/react-internet-meter

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 0xA
Solution 2 Rajan Lagah

Related Questions