スマホwebサイトのクリック遅延を簡単解消!

  • 49
    いいね
  • 0
    コメント

要旨

最近はもっぱらスマホでWebを見るほうが多くなってきました。
にも関わらず、スマホのClickイベントの遅延対策が行われていないwebサイトが結構多いです。
これはイライラの原因です。

これを解消する優れたライブラリが存在していて
使い方も非常に簡単なので(数行コピペするだけ)
ぜひ皆さん使って世界から
Clickイベント遅延を駆逐しましょう!

どうすればいいの?

1. FastClick.jsの読み込み

以下を <head> 以下に入れる

<script type='application/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js'></script>

2. FastClick.jsの初期化

以下コードを さっき入れたコードよりも後に差し込む

<script>
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}
</script>

これだけです。
スマホでaタグ等をクリックすると一瞬で読み込みが始まっているのがわかるかと思います。

どれくらい遅延するの?

OS 遅延
iOS 350ms
Android 300ms

この表のとおりです。

体感してみる

なぜ遅れるの?

ダブルタップによるズームイン/ズームアウトを検知するため。
1回タップした後、2回目のタップがされるかどうかを待っている。

発展

なぜFastClick.jsなの?

JSを使わずに、遅延を解消する方法はいくつかありますが、すべてのブラウザに対応するにはJSを使うしかありません。ならば、たくさんの人が使い、テストされ尽くしたライブラリを使ったほうが安全です。いくつかライブラリがありますが、Clickイベントの遅延だけにフォーカスされているライブラリでは現状FastClick一択だと思われます。

I highly recommend fastclick.js. It’s heavily tested, widely used and works great on many devices.
拙訳: 私はFastclick.jsを強く勧める。これは非常によくテストされ、広く使われており、たくさんのデバイスでうまく機能してくれる。
Ionic co-creator Adam Bradley
出展: http://blog.ionic.io/hybrid-apps-and-the-curse-of-the-300ms-delay/

副作用は?

  • ダブルタップによるズームイン/ズームアウトが効かなくなります。

viewportにwidth=device-width入れればいいんじゃないの?

参考文献