Measuring Human Reaction Time in the Browser Without Fooling Yourself

Measuring human reaction time in a web browser is straightforward in theory - show a signal, wait for a click, subtract the two timestamps. However, in practice, browser delays can obscure the results. To obtain a fair measurement, certain key considerations are important. Using a high-resolution clock is crucial; Date.now() provides only whole milliseconds and can jump if the system clock changes.

Instead, performance.now() is recommended because it is monotonic and offers finer resolution. The MDN documentation explains the intricacies, including why browsers sometimes reduce its precision for security reasons.

A frequent error is beginning the timer when changing colors in JavaScript. The screen does not update until the next frame is painted, which means starting timing closer to the paint using requestAnimationFrame better aligns the clock with what the user actually sees. The code snippet shows how to display the signal and start timing using JavaScript and event listeners.

One must also consider the hardware. A 60 Hz display refreshes roughly every 16.7 milliseconds, meaning the signal could appear up to one frame later than expected. Input delays from mice, touchscreens, and keyboards must also be acknowledged; they cannot be entirely eliminated in a browser. The best approach is consistency - testing on the same device each time maintains fairness. Using pointerdown instead of click is preferable, as the pointerdown event triggers on press, closer to the moment the user actually reacts.

Randomizing the signal's appearance time is vital to prevent users from learning the rhythm and guessing. A random wait of a few seconds keeps the test genuine. Additionally, catching early clicks and treating them as false starts ensures accuracy. Collecting multiple attempts, such as five or more, helps eliminate noise. Outliers should be dropped, and the average reaction time should be displayed to provide users with a more meaningful result.

VoltReflex is an example of a finished browser-based reaction time test that one can use for comparison. After trying it a few times, one may be surprised by how much hardware affects the result. If creating a custom test, starting simple, measuring accurately, and being transparent with users about what a browser can and cannot measure is essential.