HTML5, CSS3, jQuery, JSON, Responsive Design...

Faster mobile JavaScript click responses with fastclick.js

Michael Brown  April 10 2014 04:39:07 AM
As I pointed out in my post Speedier responses for iPhone web apps a couple of years ago, it's a little known fact is that iOS devices, and older Android devices too, are slow at responding to JavaScript click events.  This is because they have a built-in 300ms delay, due to them needing to respond to other types of tap, such as double tap (to zoom), drag and pinch to zoom.

That 300ms might not sound like a long time, but it is noticeable when you're clicking web page controls that triggers hides and shows etc with JavaScript.  I'd say it's one of the main reasons why so many web apps seem so sluggish when compared to native iOS apps.

Here's a sample page to demonstrate the issue:

Open it on an iPhone or iPad and start tapping on the radio buttons.  Notice the short delay before the box colour changes?  Perhaps not.  Okay, so try this page instead:

Much faster to respond to the radio buttons than the first page, yes?

If you don't have an iOS device to test with, then I've done a video capture of my accessing the two pages with my own iPhone.  (The white circles that you see, correspond to my finger tapping on the screen.)

There's only one difference between the two pages: the second page has the fastclick.js library loaded.  This library does some behind the scenes re-mapping of click events, so you can get that speedier response time without having to rewrite your click events to touchstart or touchend events, as I'd recommended in my original post.  (Using the touchstart event has the disadvantage of disabling drag for the element on which you have it set.)

When, hopefully, the whole 300ms problem is fixed in a later version of iOS - as it already appears in more recent versions of Android - then all you have to do is remove the fastclick library from your apps.