Input Lag: Why the Same HTML5 Game Feels Different on Each Device

You tapped in time, you are sure of it. Sometimes you are right. Where the delay comes from between finger and screen, and what you can do.

Play Ring Snap on your phone and then on a laptop and you may notice that it feels different. Not harder, exactly. Just slightly off. The game is identical. What has changed is the chain of events between your finger and the picture, and every link in that chain takes time.

In a slow game none of this matters. In games measured in tenths of a second, it is worth understanding.

The journey of a tap

Here is what happens when you tap, in order.

Your finger touches the glass, or presses a button.
The device notices. Touchscreens and mice check for input many times a second, but not continuously.
The browser is told, and passes the event to the game.
The game changes something and draws a new picture.
The screen shows that picture at its next refresh.

Each step adds a small wait. None is large. Together they add up to what people call input lag.

Frames are the heartbeat

Most screens redraw sixty times a second. That gives each picture, or frame, about seventeen thousandths of a second. A game cannot show you anything between frames, and it only looks at your input once per frame.

So even on a perfect device, a tap may wait up to one frame before the game sees it and another before you see the result. That is already a few hundredths of a second, before anything else goes wrong.

Many newer phones and monitors refresh at 120 times a second. Each frame is half as long, and everything feels more direct. If a game seems crisper on a newer phone, that is usually why.

The usual suspects

When a game feels sluggish, one of these is normally to blame.

Power saving. Battery saver modes often cut the screen's refresh rate and slow the processor. This is the commonest cause on phones, and the easiest to fix.

A wireless mouse or keyboard. Bluetooth devices can add a noticeable delay, particularly cheap ones or ones with a low battery. A wired mouse, or the laptop's own keys, will be faster.

A television used as a monitor. Televisions process the picture to make films look better, and that takes time. Look for a setting called Game Mode, which switches most of it off.

A busy browser. Thirty open tabs, a video playing in another window, or an extension that inspects every page will all take time away from the game.

An old device. If the device cannot draw a frame in time, frames get skipped.

What our games do about slow frames

Every game on Html5Game.sbs measures how much real time has passed since the last frame and moves things by that amount. That way a ball crosses the screen in the same time on a fast phone and a slow one. It just looks less smooth on the slow one.

There is one safety catch. If a frame takes much longer than it should, the game treats it as if only about a thirtieth of a second went by. Without that, a brief stutter would make everything leap forward, and you would crash into a wall you never saw. With it, the game slows down for a moment instead. It is the fairer of two bad options.

Things worth trying

Turn off battery saver while you play.
Close other tabs, especially anything playing video.
Use the Full screen button. It gives the game the whole display and removes distractions.
On a desktop, try the keyboard. In Lane Beats, the A, S and D keys are quicker than moving a mouse between lanes. In Tile Runner, D, F, J and K do the same job.
On a TV, find Game Mode.
Keep your browser up to date.

Adjusting yourself

You cannot remove lag completely, but you can adapt to it, and you probably already do. Play a few rounds on any device and you start tapping a touch earlier without thinking about it.

This is why the first rounds on an unfamiliar device are always worse, and why scores are only really comparable on the same one. If your best in Tap Sprint is higher on a mouse than on a touchscreen, that says as much about the mouse as about you.

The honest summary

HTML5 games run on almost anything, which is their great strength. The price is that "anything" covers a wide range of hardware. A good game is built to cope. And a player who knows where the delay hides can usually win some of it back.