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

2021-06-03

Passive to improve scrolling performance_eyecatch

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

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

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

WordPress5.7時点の記事です。5.8でも動作確認しました。
comment-reply.min.jsはコアファイルを直接編集します。

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

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

スクロールパフォーマンスを高める_001

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

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

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

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

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

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

問題がある個所の確認

サイト診断結果で問題のあるファイルは分かりますが、問題のプログラム記述箇所が分かりません。

そんな時はChromeのデベロッパーツールを使用します。

キーボードの[Ctrl]+[Shift]+[I]

をブラウザを開いた状態で押します。
Chromeで検証したいページを開いて、consoleタブを確認すれば分かります。

スクロールパフォーマンスを高める_002

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

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

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

スクロールパフォーマンスを高める_003

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

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

comment-reply.min.jsの編集

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

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

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

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

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

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

{passive:true}

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

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

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

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

jquery.min.jsの編集

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

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

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

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

/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ファイルを作り、一か所にまとめるようにすると保守性が良くなります↓

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

PSIで問題解決されたか確認する

キャッシュなどを削除し、再度ページを分析してみましょう。

スクロールパフォーマンスを高める_004

ファイル変更後、PageSpeed Insightsでの分析結果画面

「スクロールパフォーマンスを高める受動的なリスナーが使用されていません」が「~が使用されています」に変わり、合格した監査の項目に移動していました。

OKですね!緑色って良い・w・

「comment-reply.min.js」と「jquery.min.js」はWordpressに同封されているコアファイルです。
アップデート(更新)の度に上書きされますので、再度同じ作業を繰り返すことになります。

WordPress側がこの問題を解決してくれればこの作業は必要なくなるのですが…
調べてみると、少なくとも2年前から問題が確認されているようですので、なかなか対応されていないようです。

まとめ

WordPressサイトを「PageSpeed Insights」で分析するとほぼ確定で?出てしまう「スクロールパフォーマンスを高める受動的なリスナーが使用されていません」を解決する方法でした。

前回の記事と少しかぶってしまっているのですが、とにかく問題解決のみできればよい!という方も多いと思いますのでコチラの記事でシンプルに書いてみました。

{passive:true}でなぜスクロールパフォーマンスが向上するのかなど、技術的な内容は前回の記事で書きましたので、興味がある方は下のリンクからご確認ください。

-Wordpress
-

© 2021 ソロ学