PageSpeed Insightsによる「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」について

1. 問題点

PageSpeed Insights (PSI) や Chrome の Lighthouse といったツールで、Webページのパフォーマンス測定をしていると、「スクロールパフォーマンスを高める受動的なリスナーが使用されていません」という指摘を受けることがあります。

2. 原因

メッセージ 最下部に ファイル名と行数 が記載されているので、その箇所を見てみると 以下のような JavaScript コードが見つかるはずです。

document.addEventListener("touchstart", () => {

  // ここに色々処理が書いてある
  // …

});

この JavaScript コードは、「”touchstart” という名前のイベントが発生したときに実行する処理」を記述しています。”touchstart” 以外でも「画面のスクロールが発生するイベント」であれば、同様に指摘されるはずです。

スクロールが発生するイベントで実行されるコードなので、ここで重い処理が実行されてしまうと、スクロールの動作がもたついてしまう可能性があります。

ここで記述されている addEventListener() メソッドには、この問題を避けるための引数が用意されています。このメソッドの第二引数として「{ passive: true }」を指定すると、イベントリスナーに書いたコードをスクロール処理とは別扱い（別スレッド）で実行してくれるのです。こうやって、スクロール動作がもたつくのを防いでくれます。冒頭のメッセージはこの変更を促しているのです。

※ このイベントリスナー内で preventDefault() というメソッドを実行することによって、「スクロール処理をさせない」ということができるのですが、この場合、冒頭の指摘はされません。そもそもスクロールが発生しないので、先程説明した問題も起きないからです。

3. 具体的な対処方法

この JavaScript コードに、「, {passive: true}」を追加すると、本件は指摘されなくなります。

document.addEventListener("touchstart", () => {

  // ここに色々処理が書いてある

}, { passive:true });

Passive event listeners | Can I use… を見ると、{ passive: true } が使えるブラウザのバージョンが分かるのですが、2021年9月現在ではほとんどのブラウザで使えるようです。この記述に対応していない古いブラウザに対応したい場合は、EventTarget.addEventListener() – Web API | MDN の「オプションの対応の安全な検出」に書いてあるコードを使用してください。

4. おわりに

実際、冒頭の指摘をされたからといって、ユーザーが困るほどの問題が起きているかといえば起きていないことの方が多いと思います。

Webサイトに使っているフレームワークやサードパーティ製のライブラリ内で、{ passive: true } が記述されていないこともありますが、この場合できることは限られています。開発組織に伝えるくらいはできるでしょうが、ここが原因で問題が起きていることは少ないでしょうから、すぐの対応は期待できません。

そして、おそらくこの部分は CWV (Core Web Vitals) の項目にも影響しないので、SEOにも関係がなく、修正のモチベーションはなかなか上がらないのではないかと思います。

PageSpeed Insights や Lighthouse のパフォーマンス測定のスコアアップに多少貢献できるくらいでしょうか。