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