Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Passive Event Listener を使用してサイトでのスクロール パフォーマンスを向上させる

監査が重要である理由

タップやホイールのイベントリスナに passive オプションを指定すると、スクロールのパフォーマンスを向上させることができます。

概要については、Passive Event Listener を使用してスクロールのパフォーマンスを改善するをご覧ください。

技術的な詳細については、Passive Event Listener の仕様の Explainer をご確認ください。

監査に合格する方法

Lighthouse で特定されたすべてのイベントリスナに passive フラグを追加します。 一般的に、preventDefault() を呼び出さない wheelmousewheeltouchstarttouchmove のイベントリスナには、すべて passive フラグを追加してください。

Passive Event Listener に対応したブラウザでは、フラグを設定するように、簡単にリスナを passive として指定できます。

document.addEventListener('touchstart', onTouchStart, {passive: true});

ただし、Passive Event Listener に対応していないブラウザの場合は、3 つ目のパラメータはイベントを伝搬または捕捉するかを示すブール値になります。 上記の構文を使用すると、意図しない結果が生じる場合があります。

Passive Event Listener を適切に実装する方法については、Feature Detection でポリフィルをご確認ください。

監査方法

このセクションでは Lighthouse による監査方法と監査スコアの算出方法を説明します。

Lighthouse では以下のアルゴリズムに基づいて、Passive Event Listener を使用すべきリスナを報告します。

  1. ページ上のイベントリスナをすべて検出する。
  2. タップまたはホイール以外のリスナを除外する。
  3. preventDefault() を呼び出すリスナを除外する。
  4. ページとホストが異なるリスナを除外する。

Lighthouse では、別のホスト上のスクリプトは制御不可能とみなされるため、ホストが異なるリスナは除外されます。 そのため、Lighthouse の監査では、全体的なページ スクロールのパフォーマンスを評価しているわけではない点に注意してください。 サードパーティーのスクリプトがページ スクロールのパフォーマンスに悪影響を及ぼしていたとしても、それらのスクリプトは Lighthouse のレポートには表示されません。