Measuring server response time (client-side)

Question

I would like to implement a script that would measure the response time of my server (= remote url) from a client using a regular browser without any extra plugins (Java etc.).

I'm only looking at the network speed (response time), not the page loading speed.

What would you recommend me to measure? It has to run on tcp/ip, not anything else like ICMP (ping).

How would you go around the implementation on the client side? I would prefer to use JavaScript (JQuery).

Update: As I need a cross domain check, the ajax calls don't seem to be an option

Furthermore, the ajax method doesn't seem to precise at all. Results seem to have an overhead of about 50ms (it's almost a constant value, no matter what the domain is - I guess it's the processing time in between) on the testing machine in comparison to information from FireBug

You mean [like this](http://stackoverflow.com/questions/3498503/find-out-how-long-an-ajax-request-took-to-complete?lq=1)? — Carsten, Feb 13 '13 at 08:34
Yes but as far as I know jQuery.get returns the whole response including the html code. In that case the speed of the site would affect the response time. I'm rather looking for something like ping. EDIT: moreover, JQuery might (I'm not that familiar with it) call other code before calling the callback which will affect the measuring method — Kraken, Feb 13 '13 at 08:37
Reading about this issue, it seems like cross domain calls from javascript/jquery is a lost cause. JSONP and proxies seems to be the answer, and by doing that your response time is no longer of value. — Robert Fricke, Feb 13 '13 at 13:27

Robert Fricke · Answer 1 · 2013-02-13T08:52:10.313

9

You just need to time a request:

var sendDate = (new Date()).getTime();

$.ajax({
    //type: "GET", //with response body
    type: "HEAD", //only headers
    url: "/someurl.htm",
    success: function(){

        var receiveDate = (new Date()).getTime();

        var responseTimeMs = receiveDate - sendDate;

    }
});

edited Feb 13 '13 at 08:52

answered Feb 13 '13 at 08:35

Robert Fricke

3,637
21
34

1

responseTimeMs isn't visible outside the scope of your success function. – AmericanUmlaut Feb 13 '13 at 08:37
Yes but as far as I know this returns the whole response including the html code. In that case the speed of the site would affect the response time. Am I right? – Kraken Feb 13 '13 at 08:42
1

If you don't want the server to return a response body, use `type: "HEAD"`, and only headers are returned. – Robert Fricke Feb 13 '13 at 08:51
That sounds reasonable, will check it out. Thank you so far. – Kraken Feb 13 '13 at 09:05
Sadly, it seems that this method is not precise enough. I also would have a problem with a cross domain check. I don't know the internal implementation of the ajax call but it seems that it fetches the headers even though it throws the error callback. From that I can see that it takes roughly 100ms on google.com (50ms in Firebug), 400 ms on example.com (about 350ms in Firebug) etc. I have tested this on several domains. I don't know why it fetches the headers even though it shouldn't (error callback) but from this I infer that there would be a problem with precision. – Kraken Feb 13 '13 at 12:38

AmericanUmlaut · Answer 2 · 2013-02-13T16:55:41.247

2

Create a resource that always returns an empty 200 OK response at a url like mysite.net/speedtest. Then something like:

var startTime = (new Date()).getTime(),
    endTime;

$.ajax({
    type:'GET',
    url: 'http://mysite.net/speedtest',
    async: false,
    success : function() {
        endTime = (new Date()).getTime();
    }
});

alert('Took ' + (endTime - startTime) + 'ms');

That will give you the time it takes to send a request to your server, plus the time it takes your server to load the minimum set of resources it requires to respond to a request.

New: Your question is now inconsistent with the additional information you've added. You want to get the client's ping to a URL that you don't control - that's quite a different matter than what you initially asked for, getting the response time from your server. If you're trying to get a client's ping to your server, an ajax call will do the trick. If you're trying to get their ping to some other server, then I'm a bit confused as to what your goal is.

edited Feb 13 '13 at 16:55

answered Feb 13 '13 at 08:35

AmericanUmlaut

2,817
2
17
27

This would alert before ajax request was finished. – Robert Fricke Feb 13 '13 at 08:48
@RobertFricke Oops, you're right. I fixed it, thanks for the note. – AmericanUmlaut Feb 13 '13 at 14:07
cool beans. However by the looks of this, `endTime` is set correctly, but the `alert` still runs before the `success`-callback since it will execute directly after the ajax-call (before a callback is made). – Robert Fricke Feb 13 '13 at 15:01
@RobertFricke I intended to set async to false so that the function would halt until endTime was set, sorry for so many typos today... – AmericanUmlaut Feb 13 '13 at 16:56
No need to apologize to me =) – Robert Fricke Feb 13 '13 at 17:58

score 0 · Answer 3 · answered Feb 13 '13 at 08:40

0

var startTime = (new Date()).getTime(),
    endTime;
$.ajax({
type: "GET",
url: "test.html",
dataType: "html",
success:function(data){
endTime = (new Date()).getTime();
}
});

Now take the difference.

answered Feb 13 '13 at 08:40

Sudip Pal

2,041
1
13
16

score 0 · Answer 4 · answered Feb 13 '13 at 09:08

0

You can do it very easy.

var t = Date.now();
var t2;
$.ajax({
    url:'page',
    success:function(){
       t2 = Date.now();
       console.log(t2-t);//the time needed to do the request
    }
});

The page to request should be empty to mimic the additional load time.

answered Feb 13 '13 at 09:08

Licson

2,231
18
26

That's the thing, I can't make it empty. Anyway, I think if I just request the headers using @RobertFricke solution I might go around this problem – Kraken Feb 13 '13 at 09:12
1

@kraken yes you can just get the header and the problem is solved. – Licson Feb 13 '13 at 09:16

Measuring server response time (client-side)

4 Answers4