スクロール パフォーマンスを高める受動的なリスナーを使用する方法
問題点
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」から改行など余分なコードを除去したものとなり、少しでも余分なコードを排除し、速度が速くなるコードとなります。
ユーザーエージェントのオプションサポートの確認
1行目(コメント行がある場合は2行目)に下記コードを追加してください。
なくても動作はしますが、ブラウザーがユーザーエージェントのオプションパラメータのサポートが利用可能か初めに確認しておいたほうが良いです。
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」イベントリスナーの呼び出しにオプションを追加
2行目(コメント行がある場合は3行目)の中で、「touchstart」を検索してください。数か所ある場合もあります。
書き換え前のコード
addEventListener("touchstart",f)
書き換え後のコード
addEventListener("touchstart",f,supportsPassive?{passive:true}:false)
書き換え前のコードの最後に引数に「f」が入っていますが、コードによっては「a」が入っていることがあいます。引数部分は元のコードに合わせて使用してください。
最後に
無事に、「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」に関しては表示が消えました。1~10点くらいしか変化はなかったのですが、エラーが消えたほうが気分は良いです。
オススメ記事
WordPress 記事に挿入する画像のリンク先を自動入力…
問題点 WordPressの記事作成時に、サイトによっては、…
PageSpeedInsightsがアップデートされました 2021/11/16…
アップデート内容 2021年11月16日にPageSpeed…
問題点 WordPressの「wp-admin」ディレクトリ…
ディスカッション
コメント一覧
まだ、コメントがありません