3

I am going to test my website speed, primary the webserver latency. Summarize what I want to achieve:

1) a webpage with javascript hosted in my website(http://myweb.com/test-speed.html)

2) I give this url to my friends

3) They don't need to do anything, they just need to access this webpage then the latency is printed out in the webpage.

4) If the webpage can also tell which state the visitor is in(using IP address range database), it will be a plus.

Any existing solutions? I can modify the javascript to log the data into database, but I think the core here is how to writ the javascript to know the latency.

Bin Chen
  • 61,507
  • 53
  • 142
  • 183
  • See this: http://stackoverflow.com/questions/5529718/how-to-detect-internet-speed-in-javascript – advncd Mar 17 '14 at 22:50

4 Answers4

9

Network speed is quite different from webpage loading latency since the latter includes a multitude of other factors like server-side computational time, associated requests and caching, rendering, asynchronous elements, and so on.

In practice, the following solution will test the duration between when a GET request is sent off to the time when the response body has been completely received (but before anything is rendered or any associated assets are retrieved). I use the jQuery framework to simplify the XHR creation process somewhat, although you're free to use an alternative implementation.

// prepare the XHR object
$.ajax({
    beforeSend: function(){
        // right before firing off the request, create a global object that includes the request send time
        window.startTime = new Date();
    },

    // send the request to the root URI of this host
    url: '/',

    success: function(){
        // once the request comes back, record the end time
        window.endTime = new Date();

        // take the difference, which will yield a number in milliseconds, and print it out
        document.write(window.endTime - window.startTime + " ms");
    }
});

Source: http://jsfiddle.net/5h4GZ/

Just plop this in a <script> tag on the page, and you're good to go. Modify the document.write call as required to put it in a more conspicuous place. Also, feel free to insert a subsequent call there to your monitoring web service to write it to a database.

There are plenty of tutorials on geolocation online, so any one of those will do. You can capitalize on the Geolocation API, but more likely, you'll do fine just to do it by IP address, since that's actually more important for your needs. For this, there are plenty of web services online that will give you a geolocation based on IP. This can of course all be done server side, so the precise implementation will depend on your technologies.

Steven
  • 17,796
  • 13
  • 66
  • 118
2

I think you could do a basic latency test with:

<script type="text/javascript">
var time1 = new Date();
</script>

<script type="text/javascript" src="latency.js"></script>

latency.js would have:

var time2 = new Date();

I believe time2 - time1 should be the rough round-trip latency. This is the time required to do the latency.js GET request, and receive the one-line response. It's not precise because we're including time used to process the packet(s), transfer the actual line (which depends on bandwidth, not latency), and parse and execute the JavaScript.

However, latency should still dominate.

As noted, 4. is standard IP geolocation. This is a simple working demo using google.loader.ClientLocation. google.loader.ClientLocation.address.region should be the state in the US.

Matthew Flaschen
  • 278,309
  • 50
  • 514
  • 539
  • +1 Doesn't rely on any libraries, AJAX requests, etc. Two potential issues though: 1. if the external scripts are loaded before any scripts are run, both will be about the same, 2. caching – James Billingham Oct 22 '12 at 22:40
  • @JamesBillingham, yes, I think both could be addressed by adding a cache-buster (latency.js?rand=someRandomNumber). This could be done on the server-side (when outputting the latency.js URL), or by injecting the latency script tag (with `appendChild`, etc.). – Matthew Flaschen Oct 23 '12 at 16:12
2
  1. var startTime = new Date;
  2. Use XHR to request a trivial response from your server. (jQuery or a much smaller cross-browser XHR wrapper.)
  3. var roundTripLatencyInMS = new Date-startTime; in the success callback from your XHR request.

Google for Geolocation for your second question that is unrelated to this one, or ask a separate question.

Phrogz
  • 296,393
  • 112
  • 651
  • 745
0

Here's an example javascript app:

http://gfblip.appspot.com/

Source code is here:

https://github.com/apenwarr/blip

Simon
  • 563
  • 1
  • 6
  • 11