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

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

くるみ

診断で出るスクロールパフォーマンスを…ってやつ改善したいんだけど
ということで今回は

  • PageSpeed Insightsで「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」と警告が出る
  • どのファイルをどのようにいじればいいか分からない

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

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

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

まずは結論から。大まかな手順は以下の通りです。

手順
step1
原因のjsファイル(comment-reply-min.js)を探す
step2
「touchstart」のイベントを指定している箇所を探す
step3
「passive: true」を追加する

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

何故この警告が出るのか、何故この方法で解決するのかは後で解説するよ

くるみ

勿論これだけだと分かりにくいと思うので、次は実際に一緒にやっていきましょう。

原因のjsファイルを探す

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

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

原因のjsファイルを探す

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

僕の場合はプラグイン「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 }」を追加してあげます。

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

注意
wp-includesディレクトリ内をいじるため、WordPressをアップデートすると変更が無かったことになります。なので更新する度に今回の方法で再度追加してあげる必要があります。
難しくなかったね!でもこの「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点ほど上がりました。塵も積もれば何とやらですね。
【SANGO】サイトを高速化するために行ったカスタマイズ8選【スコア90点越え】SANGOを高速化するためのカスタマイズ9選

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

コメントを残す

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

22年4月から自社開発企業のWebエンジニアとして働く大学生。このサイトでは主にプログラミングやWordPressカスタマイズについて発信しています。他に運営しているのは宅配冷凍弁当の特化ブログなど。お問い合わせはこちらよりどうぞ。