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