本記事はプロモーションを含みます
スクロール パフォーマンスを高める受動的なリスナーを使用する方法
目次
問題点
PageSpeed InsightsでWordPressページを検索すると、「comment-reply.min.js」に関するエラーが発生しています。
スクロール パフォーマンスを高める受動的なリスナーが使用されていません
ページのスクロール パフォーマンスを高めるには、touch および wheel イベント リスナーを passive として指定することをご検討ください。
/wp-includes/js/comment-reply.min.js
このような診断結果となり、エラーは赤い三角「▲」となっており、修正したほうが良いものとなっています。
touch および wheel イベント リスナーとは
touch および wheel イベント リスナーとは、ざっくり記載すると、画面スクロールに関する機能です。JavaScriptは該当箇所に来てから初めてプログラムが実行されます。そのため、JavaScriptが長い場合、処理が完了するまで待つことこととなり、初期設定（falseや使用なし）では、その期間は画面をスクロールできません。「passive」にすることで使用できるようになります。
コードを修正
PageSpeed Insightsに指摘された「/wp-includes/js/comment-reply.min.js」を修正します。なお、「comment-reply.min.js」は「comment-reply.js」から改行など余分なコードを除去したものとなり、少しでも余分なコードを排除し、速度が速くなるコードとなります。
ユーザーエージェントのオプションサポートの確認
１行目（コメント行がある場合は２行目）に下記コードを追加してください。
なくても動作はしますが、ブラウザーがユーザーエージェントのオプションパラメータのサポートが利用可能か初めに確認しておいたほうが良いです。
var supportsPassive=false;try{var opts=Object.defineProperty({},'passive',{get:function(){supportsPassive=true;}});window.addEventListener("testPassive", null, opts);window.removeEventListener("testPassive", null, opts);} catch (e) {}「touchstart」イベントリスナーの呼び出しにオプションを追加
２行目（コメント行がある場合は３行目）の中で、「touchstart」を検索してください。数か所ある場合もあります。
書き換え前のコード
addEventListener("touchstart",f)書き換え後のコード
addEventListener("touchstart",f,supportsPassive?{passive:true}:false)書き換え前のコードの最後に引数に「f」が入っていますが、コードによっては「a」が入っていることがあいます。引数部分は元のコードに合わせて使用してください。
最後に
無事に、「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」に関しては表示が消えました。１～１０点くらいしか変化はなかったのですが、エラーが消えたほうが気分は良いです。
この記事にいっぱいおごってみる？
オススメ記事
WordPressで使用しているプラグイン一覧 ConoHa Wing 2021…
WordPressプラグインリスト 2021年2月現在、Co…
開設１ヵ月 ConoHa WING Pagespeed Insights 速度 …
前回計測からの変更点 前回は、Google Adsenseの…
強調スニペット google 表示方法 意識した対策に関して…
概要 「ショートカット 矢印」のキーワードで、記事掲載時点で…
