くるみ
- PageSpeed Insightsで「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」と警告が出る
- どのファイルをどのようにいじればいいか分からない
という方に向けて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」を追加することで改善したのか、という話に移りましょう。
今回追加した「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`として指定することをご検討ください」はそういった意味だったんですね。
参考 Does not use passive listeners to improve scrolling performanceweb.devまとめ
ちなみにこの改善により当サイトのスコアは5点ほど上がりました。塵も積もれば何とやらですね。
【スコア90点越え】SANGOを高速化するためのカスタマイズ9選
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝