本記事はプロモーションを含みます

スクロール パフォーマンスを高める受動的なリスナーを使用する方法

eyecatch_454

問題点

PageSpeed InsightsでWordPressページを検索すると、「comment-reply.min.js」に関するエラーが発生しています。

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

ページのスクロール パフォーマンスを高めるには、touch および wheel イベント リスナーを passive として指定することをご検討ください。

/wp-includes/js/comment-reply.min.js

454-1

このような診断結果となり、エラーは赤い三角「」となっており、修正したほうが良いものとなっています。

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」が入っていることがあいます。引数部分は元のコードに合わせて使用してください。

最後に

454-2

無事に、「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」に関しては表示が消えました。1~10点くらいしか変化はなかったのですが、エラーが消えたほうが気分は良いです。

問題が解決したら、お友達と共有しませんか?

この記事にいっぱいおごってみる?

KOBE WINGのAmazonほしい物リスト

オススメ記事

eyecatch_287

WordPress 記事に挿入する画像のリンク先を自動入力…

問題点 WordPressの記事作成時に、サイトによっては、…

eyecatch_865

PageSpeedInsightsがアップデートされました 2021/11/16…

アップデート内容 2021年11月16日にPageSpeed…

eyecatch_732

.htaccess 特定のホスト、IPの許可と制限…

問題点 WordPressの「wp-admin」ディレクトリ…