Say Goodbye to Mobile Click Delays

Sluggish and unresponsive

If you’ve done any kind of mobile development that’s HTML based, you’ve probably been troubled by the 300ms delay plague. That measly 300ms can make a real impact of the perceived performance of your app, which should be a user experience priority.

Why the delay?

Mobiles and tablets automatically add a 300ms delay between the instant an element is clicked before firing the click event, the reason for this is the browser is waiting to see if you are actually performing a double click.

The solution

I’ve implemented many (many) hacks in the past in various apps to prevent this lack of responsiveness but today I found a library by FT Labs that seems to have hit the nail on the head.

FastClick

Simply include the JavaScript file, and a simple call of FastClick.attach(document.body); when you’re ready will eliminate that delay. Take a look here on your mobile for a working example.

There’s support for every package manager under the sun, take a look at the github readme for more details and for advanced usage.

Re-instantiating

There’s one small issue, dynamically adding elements to the page (which is frequent in mobile development), requires you to re-instantiate FastClick. This obviously has a small overhead. I try to preload what I can (within reason), as this also helps the user experience.

Happy FastClick-ing.