タッチ イベント リスナーとホイール イベント リスナーは、ユーザー操作のトラッキングやカスタム スクロール エクスペリエンスの作成に役立ちますが、ページのスクロールを遅らせる可能性もあります。現在、ブラウザはイベント リスナーがスクロールを防止するかどうかを認識できないため、ページをスクロールする前に常にリスナーの実行が完了するのを待機します。パッシブ イベント リスナーは、イベント リスナーがスクロールを妨げないことを示すことで、この問題を解決します。
ブラウザの互換性
ほとんどのブラウザはパッシブ イベント リスナーをサポートしています。ブラウザの互換性をご覧ください
Lighthouse のパッシブ イベント リスナー監査が失敗する仕組み
Lighthouse は、ページのスクロールを遅らせる可能性のあるイベント リスナーを検出します。
Lighthouse は次のプロセスを使用して、スクロール パフォーマンスに影響する可能性のあるイベント リスナーを特定します。
- ページ上のすべてのイベント リスナーを収集します。
- タッチとホイール以外のリスナーを除外します。
preventDefault()を呼び出すリスナーを除外します。- ページとは異なるホストからのリスナーを除外します。
Lighthouse は、異なるホストのリスナーをフィルタで除外します。これは、これらのスクリプトを制御できない可能性が高いためです。ページのスクロール パフォーマンスに悪影響を及ぼしているサードパーティ スクリプトがある可能性がありますが、それらは Lighthouse レポートには表示されません。
スクロール パフォーマンスを高めるためにイベント リスナーをパッシブにする方法
Lighthouse が特定したすべてのイベント リスナーに passive フラグを追加します。
パッシブ イベント リスナーをサポートするブラウザのみをサポートする場合は、フラグを追加するだけで済みます。次に例を示します。
document.addEventListener('touchstart', onTouchStart, {passive: true});
パッシブ イベント リスナーをサポートしていない古いブラウザをサポートしている場合は、機能検出またはポリフィルを使用する必要があります。詳しくは、WICG のパッシブ イベント リスナーの説明ドキュメントの機能検出のセクションをご覧ください。