パッシブイベントリスナー

Silktide は実際のブラウザーでページを読み込み、スクロールを遅延させる可能性のある方法でタッチイベントやマウスホイールイベントを監視しているスクリプトを探します。これらのリスナーをパッシブとして設定すると、ブラウザーはすぐにスクロールできるようになります。

スクリプトがタッチイベントやホイールイベントを監視している場合、ブラウザーは、スクリプトがスクロールをキャンセルしないか確認するために、そのスクリプトの実行が終わるまでスクロールを待機する必要があります。負荷の高いページでは、これによりスクロールが途切れたり遅延したりします。これは特にスマートフォンで目立ちやすい、最も気付きやすい種類のジャンクの1つです。

重要な理由

スクロールは訪問者がページ上で行う操作の中で最も一般的なものであり、滑らかでないとすぐに気付かれます。ページ上のすべてが正常に動作していても、指で触れたときに反応が遅れたり、ガタついたりすると、壊れているように感じられます。この印象は、タッチスクロールを常に使用するモバイル端末で特に強くなります。

修正方法

タッチリスナーとホイールリスナーをパッシブとして設定し、スクロールを決してキャンセルしないことをブラウザーに伝えます。

// ハンドラーが実行されるまでスクロールをブロック
document.addEventListener('touchstart', onTouchStart);

// パッシブ: ブラウザーはすぐにスクロール
document.addEventListener('touchstart', onTouchStart, { passive: true });

スクロールを停止するためにリスナーが実際に preventDefault() を呼び出す場合を除き、自作の touchstart、touchmove、wheel、mousewheel リスナーに { passive: true } を追加します。
サードパーティー製スクリプト内で報告されたリスナーについては、ライブラリの更新版がないか確認するか、提供元に問い合わせてください。3rd party code を参照してください。

現在のすべての主要ブラウザーはパッシブリスナーに対応しています。機能検出が必要なのは、非常に古いブラウザーのみです。

Silktide によるチェック方法

実際のブラウザーでページを読み込み、パッシブとして設定されておらず、スクロールを遅延させる可能性のあるタッチイベントおよびホイールイベントのリスナーを見つけます。
そのような各リスナーを含むスクリプトと、リスナーが登録されている行を報告します。

トラブルシューティング

リスナーでスクロールをキャンセルする必要がある

スクロールを停止するために preventDefault() を実際に呼び出すリスナーは、パッシブにできません。パッシブとして設定すると、ブラウザーは preventDefault() の呼び出しを無視します。報告されたリスナーで本当にスクロールをキャンセルする必要がある場合は、非パッシブのままにするのが正しい対応です。ページ上の他の場所のスクロールに影響しないよう、リスナーを設定する範囲を限定することを検討してください。