どうもおはようポテト(@ohayoupoteto22)です。
診断で出るスクロールパフォーマンスを…ってやつ改善したいんだけど
- 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呼んでないから確認しなくていいよ」ということを事前に知らせることができるので、判定するための処理が実行されず待ち時間が発生しない、というわけです。
参考 Does not use passive listeners to improve scrolling performanceweb.devまとめ
以上、「スクロールパフォーマンスを高める受動的なリスナーが使用されていません」の対処法でした。ちなみにこの改善により当サイトのスコアは5点ほど上がりました。塵も積もれば何とやらですね。
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝
プログラミング、楽しく学んでみない?
TechAcademy(テックアカデミー)
最短4週間で未経験からプロを育てるオンライン完結のスクール。受講生に1人ずつ現役のプロのパーソナルメンターがつき、チャットで質問すればすぐに回答が返ってくるのでサポート体制も万全です。
DMM WEBCAMP COMMIT
磨き上げられた「実践的なスキルが身につく」学習カリキュラムにより、どこよりも高い「継続率」「修了率」「転職率」で受講者満足度も90%以上。プログラミング未経験の方でも安心なスクールです。
CodeCamp(コードキャンプ)
- レッスン満足度94.6%、現役エンジニアから実践的なスキルを学べる
- 就職/転職やキャリアについての相談も無料でできる
評価 おすすめポイント 実績No.1のオンライン・プログラミングスクール(受講者20,000名以上) オンラインで365日/7時〜24時まで、時間と場所を選ばずに自分のペースで学習でき、PCとネット環境があればすぐに学習が始められます。更に無料体験レッスンを受講すると受講料が1万円引に。