【解決】「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」の対処法

という方に向けてWordPressにおける「スクロールパフォーマンスを高める受動的なリスナーが使用されていません」の対処法をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」の対処法

これで警告は出なくなるはずです。

原因のjsファイルを探す

まず修正するファイルが何なのかをPageSpeed Insightsで確認します。

「ソース」のところにあるファイルが今回の諸悪の根源です。

僕の場合はプラグイン「Autoptimize」でjsファイルを圧縮しているせいでそのファイル名が直接は表示されていませんが、原因はwp-includes/js/comment-reply-min.jsであることが多いです。

というのも、違うテーマを使用して運営している複数のサイト全てでそれが原因と出たので。

Autoptimizeを利用している人は、無効化するかもしくは上の「ソース」で表示されたファイルのコードから原因のファイルを探せばOKです。

ちなみに僕の場合はその周辺のコードを見る限りコメント関連の操作をしているっぽかったのでcomment-reply-min.jsであると特定できました。

「touchstart」のイベントを指定している箇所を探す

I.addEventListener("touchstart", l)

(n = d[o]).addEventListener("touchstart", a)

次はwp-includes/js/comment-reply-min.js内で上のように「”touchstart”」という記述がある2箇所を探します。

「passive: true」を追加する

I.addEventListener("touchstart", l, { passive: true })

(n = d[o]).addEventListener("touchstart", a, { passive: true })

そうしたら上のように、それぞれ第三引数に「{ passive: true }」を追加してあげます。

これで完了。もう「スクロールパフォーマンス…」は表示されなくなったはずです。

「passive:true」とは?

今回追加した「passive:true」はずばり、「イベントリスナー内でpreventDefaultという関数を呼んでないから、しっかりとスクロールできるよ」ということをブラウザに教えるためのものになります。

document.addEventListener("touchstart", function(){
//ここの処理でpreventDefault()が呼ばれてないか確認する(待ち時間が発生する)
});

というのもwheelやtouchといったイベントを使用する際に、preventDefaultという関数がそのリスナー内で呼ばれるとスクロールが無効されてしまいます。

そこで上のように「passive:true」を指定しない場合は、そのリスナー内でpreventDefaultが呼ばれていないかを確認するための処理が走るのですが、その影響でスクロールがカクついてしまい「パフォーマンスが悪くなってる」と言われるわけですね。

document.addEventListener("touchstart", function(){
//確認の必要無し
},{ passive: true });

そこで「passive:true」を引数に指定することによって、「ここのリスナー内ではpreventDefault呼んでないから確認しなくていいよ」ということを事前に知らせることができるので、判定するための処理が実行されず待ち時間が発生しない、というわけです。

思い返してみれば、PageSpeed Insightsで表示されていた「ページのスクロールパフォーマンスを高めるには、touchおよびwheelイベントリスナーを`passive`として指定することをご検討ください」はそういった意味だったんですね。

まとめ

ちなみにこの改善により当サイトのスコアは5点ほど上がりました。塵も積もれば何とやらですね。
【スコア90点越え】SANGOを高速化するためのカスタマイズ9選

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝