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