「スクロールパフォーマンスを高める受動的なリスナーが使用されていません」がWordpressで出る場合の解決方法。

Googleが提供するサイト診断ツール「PageSpeed Insights」の診断の項目にて「スクロールパフォーマンスを高める受動的なリスナーが使用されていません」が出る場合の解決策をシンプルにまとめました。

Wordpressを使ったサイトでは「comment-reply.min.js」と「jquery.min.js」の２つのソースが指摘されていると思いますので、この両方に対応します。

技術的な内容はページ下の別記事にまとめたので、本当にシンプルにいきます。

メモ

この記事の内容はWordpress5.7時点で執筆しています。

WordPress6.5より「comment-reply.min.js」に同問題は出なくなりました。新しいバージョンになってやっと改善された様子です。

この記事の目次

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

PageSpeed Insightsの診断の項目です。
改善できる項目ほど重要ではありませんが▲で表示されているため対応しました。

PageSpeed Insightsでの当サイト記事の分析結果画面

表示される内容は以下です。

スクロールパフォーマンスを高める受動的なリスナーが使用されていません
ページのスクロールパフォーマンスを高めるには、touchおよびwheelイベントリスナーを'passive'として指定することをご検討ください。

スクロールがブロックされる可能性のある要因が２つのファイルにあります。
passiveを使うことによって改善できますよという内容です。

FTPソフトなどを使ってJavascriptファイルを編集できる方向けです。
コアファイルですのでバックアップを取ってから行ってください。
改善必須項目ではないので、不安な方は放置で大丈夫な内容です。

Javascriptに関係するので、サイト環境によっては上手くいかないかもしれません。
独学につき猛勉強はしていないため、あらかじめご了承ください。

問題がある個所の確認

サイト診断結果で問題のあるファイルは分かりますが、問題のプログラム記述箇所が分からないので、まずChromeのデベロッパーツールで確認します。
Chromeで検証したいページを開いて、consoleタブを確認すれば分かります。

キーボードの

[Ctrl] ＋ [Shift] ＋ [I]

をブラウザを開いた状態で押します。

Chromeのデベロッパーツール画面

[Violation]～～となっている文章をクリック。
ずら～とエラーが出ます。
画像の赤線の部分が警告が発生しているWebページ内のファイルです。
（キャッシュを使っている場合は23c45.jsのような名前になっている可能性大。）

ファイル名のリンクをクリックすると問題の箇所にマウスが移ります。

警告が出ている箇所にマウスオンされる

圧縮された.minファイルなので少し見にくいです。
I.addEventListner("touchstart",I)が今回の問題個所です。

comment-reply.min.jsの編集

では早速comment-reply.min.jsから対応していきます。

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

をFTPソフトなどで開きます。
（圧縮ファイルなので一旦DLしてから編集した方が見やすいかも。）

「touchstart」でコード内を検索すると２か所ヒットします。

.addEventListener("touchstart",○○,ここにpassiveを追記する)

該当箇所が見つかったら第三引数（touchstart,～,ここが第三引数）に下記を追加して保存します。

{passive:true}

２か所とも{passive:true}を追記すればOKです！

古いブラウザに対応するにはもう少し工夫が必要です。
長くなりますので必要な方は別記事をご参照ください。

下のリンクから関連する項目にジャンプできます。

scroll-blockingが発生するイベントリスナーにpassiveを指定してスクロールジャンクを防ぐ方法。：「ブラウザがpassiveを使えるか検証する」の項目へ

comment-replyの読み込みを停止してもOK

そもそも自分のサイトでコメント機能を使っていないなら「comment-reply.min.js」の読み込みを停止することでも、このエラーを消すことができます。

読み込みを停止するには以下のコードをfunctions.phpに貼り付ければOKです。

//comment-reply.min.jsの読み込みを停止する
function stop_comment_reply_js(){
    wp_deregister_script('comment-reply');
}
add_action('wp_footer','stop_comment_reply_js');

これでファイル自体が読み込まれなくなり、エラーも発生しなくなるという訳です。

コメント欄を全く使わないなら↑のコードでOKですが、これを忘れてコメント機能を復活させるとややこしくなります。そんな可能性があるなら以下のように条件分岐を足して対応しましょう。

function stop_comment_reply_js_queue(){
  if ((is_single() && comments_open() && get_option('thread_comments'))){
    wp_enqueue_script('comment-reply');
  }else{
    wp_deregister_script('comment-reply');
  }
}
add_action('wp_footer','stop_comment_reply_js_queue');

投稿か？コメント欄が開いているか？階層表示か？の分岐などが使えます。

これで「comment-reply.min.js」が必要な状態の時だけファイルを読み込み、不要な時は読み込みを停止するという感じの処理ができます。

コードを追記するfunctions.phpについてはこちら。
Wordpressのfunctions.phpとは？場所と編集方法、コードの書き方を初心者向けに解説します。

jquery.min.jsの編集

続いてjquery.min.jsも対応します。
jQuery本体はコード数が多く難読です。

１か所ずつ確認して編集するのは至難だったのですが、海外の方が素晴らしいコードを公開されていたのでそちらを使用させていただくことで解決します。

外部リンク

参考先：javascript - Added non-passive event listener to a scroll-blocking rel="nofollow noopener noreferrer" event - Stack Overflow

同じような質問で、色々議論されていますが、ページの下の方にコードがあります。

そのままでは圧縮されておらず、僅かですがファイルサイズが大きくなってしまうため、圧縮したコードを使用します。

~~/wp-includes/js/jquery/jquery.min.js~~

~~を開いて、下記のコードをjquery.min.jsの最後部に追記します。~~

【2021.7.21追記】
当サイトの環境ではWordpress5.8で対応できなくなりました。
そこでコードを改めて確認し、サイト全体で読み込まれるJSファイルのどこかにコードを追記する方法を試してみたところ上手く動作しました。
今までjquery.min.jsにコードを追記していましたが、アップデートの影響も受けないのでこの方法の方が良いですね。

jQuery.event.special.touchstart={setup:function(e,t,s){t.includes("noPreventDefault")?this.addEventListener("touchstart",s,{passive:!1}):this.addEventListener("touchstart",s,{passive:!0})}},jQuery.event.special.touchmove={setup:function(e,t,s){t.includes("noPreventDefault")?this.addEventListener("touchmove",s,{passive:!1}):this.addEventListener("touchmove",s,{passive:!0})}},jQuery.event.special.wheel={setup:function(e,t,s){this.addEventListener("wheel",s,{passive:!0})}},jQuery.event.special.mousewheel={setup:function(e,t,s){this.addEventListener("mousewheel",s,{passive:!0})}};

touchstart、touchmoveなどのタッチイベントに加え、wheelやmousewheelなどのイベントに問題がある場合に動作を書き換えるコードです。

jsプログラムコードの追加は自作JS専用の.jsファイルを作り、一か所にまとめるようにすると保守性が良くなります↓

WordPressで子テーマにJSを追加して読み込む方法！親テーマのJSをカスタム、継承したい場合もこれでOK！

これでjquery.min.jsの対処完了です。