WebPing

TODO: Worldmap

How it works

It's a bit tricky to measure latency from browsers!

• JavaScript doesn't allow to send an ICMP ping (anyway, it's often blocked!)
• Web browser Same Origin Policy doesn't allow dynamically loading resources from another domain, unless there is a specific Cross-origin resource sharing (CORS) configuration.

The first trick (discussed here on Stack Overflow) is to load an image because <IMG> tags are exempted from Same Origin Policy (see Mozilla Web Developer site for the complete list of exceptions).

The second trick is to append a random query parameter. E.g.:

img.src = url + '?no-cache=' + Math.floor((1 + Math.random()) * 0x10000).toString(16);

It avoids proxy/server caching and the server answers with a (usually short) 404 message. We don't really care about the answer. We just want to know how long the answer takes to come back.

The third trick is to capture the image onload event in JavaScript to calculate the time taken to get the answer from the server.

img.onload = function() { resolve(img); };

How accurate is it?

The latency measured is actually an HTTP latency: it includes browser processing (quite minimal), network transit and web server processing (it can be significant). For small latencies (e.g. 5-10ms), it's probably 2 or 3 times higher than a typical ping. But for bigger latencies (>100ms), the difference with ICMP ping is less noticeable because the network transit part becomes larger.