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

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

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」から改行など余分なコードを除去したものとなり、少しでも余分なコードを排除し、速度が速くなるコードとなります。

ユーザーエージェントのオプションサポートの確認

１行目（コメント行がある場合は２行目）に下記コードを追加してください。
なくても動作はしますが、ブラウザーがユーザーエージェントのオプションパラメータのサポートが利用可能か初めに確認しておいたほうが良いです。

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

最後に

454-2

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

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

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

KOBE WINGのAmazonほしい物リスト

オススメ記事

WordPressWordPress,Pagespeed Insights

Posted by KobeWing