How to detect internet speed in JavaScript

Question

How can I create a JavaScript page that will detect the user   s internet speed and show it on the page  Something like    your internet speed is       Kb s

User · Answer

I needed a quick way to determine if the user connection speed was fast enough to enable/disable some features in a site I’m working on, I made this little script that averages the time it takes to download a single (small) image a number of times, it's working pretty accurately in my tests, being able to clearly distinguish between 3G or Wi-Fi for example, maybe someone can make a more elegant version or even a jQuery plugin.

_x000D_

var arrTimes = [];_x000D_
var i = 0; // start_x000D_
var timesToTest = 5;_x000D_
var tThreshold = 150; //ms_x000D_
var testImage = "http://www.google.com/images/phd/px.gif"; // small image in your server_x000D_
var dummyImage = new Image();_x000D_
var isConnectedFast = false;_x000D_
_x000D_
testLatency(function(avg){_x000D_
  isConnectedFast = (avg <= tThreshold);_x000D_
  /** output */_x000D_
  document.body.appendChild(_x000D_
    document.createTextNode("Time: " + (avg.toFixed(2)) + "ms - isConnectedFast? " + isConnectedFast)_x000D_
  );_x000D_
});_x000D_
_x000D_
/** test and average time took to download image from server, called recursively timesToTest times */_x000D_
function testLatency(cb) {_x000D_
  var tStart = new Date().getTime();_x000D_
  if (i<timesToTest-1) {_x000D_
    dummyImage.src = testImage + '?t=' + tStart;_x000D_
    dummyImage.onload = function() {_x000D_
      var tEnd = new Date().getTime();_x000D_
      var tTimeTook = tEnd-tStart;_x000D_
      arrTimes[i] = tTimeTook;_x000D_
      testLatency(cb);_x000D_
      i++;_x000D_
    };_x000D_
  } else {_x000D_
    /** calculate average of array items then callback */_x000D_
    var sum = arrTimes.reduce(function(a, b) { return a + b; });_x000D_
    var avg = sum / arrTimes.length;_x000D_
    cb(avg);_x000D_
  }_x000D_
}

_x000D_

User · Answer

As I outline in this other answer here on StackOverflow  you can do this by timing the download of files of various sizes  start small  ramp up if the connection seems to allow it   ensuring through cache headers and such that the file is really being read from the remote server and not being retrieved from cache  This doesn t necessarily require that you have a server of your own  the files could be coming from S3 or similar   but you will need somewhere to get the files from in order to test connection speed   That said  point-in-time bandwidth tests are notoriously unreliable  being as they are impacted by other items being downloaded in other windows  the speed of your server  links en route  etc   etc  But you can get a rough idea using this sort of technique

User · Answer

Well  this is 2017 so you now have Network Information API  albeit with a limited support across browsers as of now  to get some sort of estimate downlink speed information   navigator connection downlink   This is effective bandwidth estimate in Mbits per sec  The browser makes this estimate from recently observed application layer throughput across recently active connections  Needless to say  the biggest advantage of this approach is that you need not download any content just for bandwidth  speed calculation   You can look at this and a couple of other related attributes here  Due to it s limited support and different implementations across browsers  as of Nov 2017   would strongly recommend read this in detail

User · Answer

The image trick is cool but in my tests it was loading before some ajax calls I wanted to be complete   The proper solution in 2017 is to use a worker  http   caniuse com  feat webworkers    The worker will look like          This function performs a synchronous request    and returns an object contain informations about the download    time and size     function measure filename      var xhr   new XMLHttpRequest      var measure         xhr open  GET   filename          new Date    getTime    false     measure start    new Date    getTime      xhr send null     measure end    new Date    getTime      measure len   parseInt xhr getResponseHeader  Content-Length      0     measure delta   measure end - measure start    return measure            Requires that we pass a base url to the worker    The worker will measure the download time needed to get    a  0KB and a 100KB     It will return a string that serializes this informations as    pipe separated values     onmessage   function e      measure0   measure e data base url     test 0 bz2      measure100   measure e data base url     test 100K bz2      postMessage      measure0 delta             measure0 len             measure100 delta             measure100 len           The js file that will invoke the Worker   var base url   PORTAL URL       plone  experimental bwtools   if  typeof Worker       undefined       return     unsupported   w   new Worker base url     scripts worker js    w postMessage     base url  base url     w onmessage   function event      if  event data        set cookie event data            Code taken from a Plone package I wrote    https   github com collective experimental bwtools blob master src experimental bwtools browser static scripts

User · Answer

It s possible to some extent but won t be really accurate  the idea is load image with a known file size then in its onload event measure how much time passed until that event was triggered  and divide this time in the image file size   Example can be found here  Calculate speed using javascript  Test case applying the fix suggested there    x000D   x000D    JUST AN EXAMPLE  PLEASE USE YOUR OWN PICTURE  x000D  var imageAddr    http   www kenrockwell com contax images g2 examples 31120037-5mb jpg    x000D  var downloadSize   4995374    bytes x000D   x000D  function ShowProgressMessage msg    x000D      if  console    x000D          if  typeof msg     string     x000D              console log msg   x000D            else   x000D              for  var i   0  i  lt  msg length  i      x000D                  console log msg i    x000D                x000D            x000D        x000D       x000D      var oProgress   document getElementById  progress    x000D      if  oProgress    x000D          var actualHTML    typeof msg     string     msg   msg join   lt br   gt     x000D          oProgress innerHTML   actualHTML  x000D        x000D    x000D   x000D  function InitiateSpeedDetection     x000D      ShowProgressMessage  Loading the image  please wait       x000D      window setTimeout MeasureConnectionSpeed  1   x000D         x000D   x000D  if  window addEventListener    x000D      window addEventListener  load   InitiateSpeedDetection  false   x000D    else if  window attachEvent    x000D      window attachEvent  onload   InitiateSpeedDetection   x000D    x000D   x000D  function MeasureConnectionSpeed     x000D      var startTime  endTime  x000D      var download   new Image    x000D      download onload   function      x000D          endTime    new Date    getTime    x000D          showResults    x000D        x000D       x000D      download onerror   function  err  msg    x000D          ShowProgressMessage  Invalid image  or error downloading    x000D        x000D       x000D      startTime    new Date    getTime    x000D      var cacheBuster     nnn     startTime  x000D      download src   imageAddr   cacheBuster  x000D       x000D      function showResults     x000D          var duration    endTime - startTime    1000  x000D          var bitsLoaded   downloadSize   8  x000D          var speedBps    bitsLoaded   duration  toFixed 2   x000D          var speedKbps    speedBps   1024  toFixed 2   x000D          var speedMbps    speedKbps   1024  toFixed 2   x000D          ShowProgressMessage   x000D               Your connection speed is     x000D              speedBps     bps    x000D              speedKbps     kbps    x000D              speedMbps     Mbps  x000D              x000D        x000D    x000D   lt h1 id  progress  gt JavaScript is turned off  or your browser is realllllly slow lt  h1 gt  x000D   x000D   x000D    Quick comparison with  real  speed test service showed small difference of 0 12 Mbps when using big picture   To ensure the integrity of the test  you can run the code with Chrome dev tool throttling enabled and then see if the result matches the limitation   credit goes to user284130      Important things to keep in mind    The image being used should be properly optimized and compressed  If it isn t  then default compression on connections by the web server might show speed bigger than it actually is  Another option is using uncompressible file format  e g  jpg   thanks Rauli Rajande for pointing this out and Fluxine for reminding me  The cache buster mechanism described above might not work with some CDN servers  which can be configured to ignore query string parameters  hence better setting cache control headers on the image itself   thanks orcaman for pointing this out

User · Answer

It s better to use images for testing the speed  But if you have to deal with zip files  the below code works   var fileURL    your url here testfile zip    var request   new XMLHttpRequest    var avoidCache     avoidcache      new Date    getTime     request open  GET   fileURL   avoidCache  true   request responseType    application zip   var startTime    new Date    getTime    var endTime   startTime  request onreadystatechange   function          if  request readyState    2                  ready state 2 is when the request is sent         startTime    new Date   getTime               if  request readyState    4                endTime    new Date    getTime            var downloadSize   request responseText length          var time    endTime - startTime    1000          var sizeInBits   downloadSize   8          var speed     sizeInBits   time     1024   1024   toFixed 2           console log downloadSize  time  speed            request send      This will not work very well with files  lt  10MB  You will have to run aggregated results on multiple download attempts

User · Answer

Even though this is old and answered  i  d like to share the solution i made out of it 2020 it comes with the flexibility to run at anytime and run a callback if greater and or smaller the specified mbps you can start the test anywhere after you included the testConnectionSpeed Object by running the testConnectionSpeed run mbps  morefunction  lessfunction  for example   x000D   x000D  var testConnectionSpeed       imageAddr    https   upload wikimedia org wikipedia commons a a6 Brandenburger Tor abends jpg      this is just an example  you rather want an image hosted on your server   downloadSize   2707459     this must match with the image above   run function mbps max cb gt cb lt       testConnectionSpeed mbps max   parseFloat mbps max    parseFloat mbps max    0      testConnectionSpeed cb gt   cb gt      testConnectionSpeed cb lt   cb lt      testConnectionSpeed InitiateSpeedDetection           InitiateSpeedDetection  function         window setTimeout testConnectionSpeed MeasureConnectionSpeed  1          result function        var duration    endTime - startTime    1000      var bitsLoaded   testConnectionSpeed downloadSize   8      var speedBps    bitsLoaded   duration  toFixed 2       var speedKbps    speedBps   1024  toFixed 2       var speedMbps    speedKbps   1024  toFixed 2       if speedMbps  gt    testConnectionSpeed max mbps   testConnectionSpeed max mbps   1           testConnectionSpeed cb gt   testConnectionSpeed cb gt speedMbps    false       else         testConnectionSpeed cb lt   testConnectionSpeed cb lt speedMbps    false               MeasureConnectionSpeed function         var download   new Image        download onload   function              endTime    new Date    getTime            testConnectionSpeed result              startTime    new Date    getTime        var cacheBuster     nnn     startTime      download src   testConnectionSpeed imageAddr   cacheBuster               start test immediatly  you could also call this on any event or whenever you want testConnectionSpeed run 1 5  function mbps  console log   gt   1 5Mbps    mbps  Mbps      function mbps  console log   lt  1 5Mbps   mbps  Mbps       x000D   x000D   x000D   I used this successfuly to load lowres media for slow internet connections  You have to play around a bit because on the one hand  the larger the image  the more reasonable the test  on the other hand the test will take way much longer for slow connection and in my case I especially did not want slow connection users to load lots of MBs

User · Answer

Mini snippet  var speedtest       function speedTest start name    speedtest name    new Date      function speedTest stop name    return  new Date   - speedtest name     delete  speedtest name  0 0      use like  speedTest start  quot test1 quot            some code  speedTest stop  quot test1 quot       returns the time duration in ms  Also more tests possible  speedTest start  quot whole quot            some code  speedTest start  quot part quot            some code  speedTest stop  quot part quot       returns the time duration in ms of  quot part quot          some code  speedTest stop  quot whole quot       returns the time duration in ms of  quot whole quot

User · Answer

thanks to Punit S answer  for detecting dynamic connection speed change  you can use the following code     navigator connection onchange   function         do what you need to do  on speed change event  console log  Connection Speed Changed

User · Answer

I needed something similar  so I wrote https   github com beradrian jsbandwidth  This is a rewrite of https   code google com p jsbandwidth     The idea is to make two calls through Ajax  one to download and the other to upload through POST    It should work with both jQuery ajax or Angular  http

[javascript] How to detect internet speed in JavaScript?

Examples related to javascript

Examples related to download-speed