Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

要旨

最近はもっぱらスマホで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入れればいいんじゃないの?

参考文献

igtm
主にTwitterに生息。最近CKAとった。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした