PageSpeed Insightsでの指摘
「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」
ページのスクロール パフォーマンスを高めるには、touch および wheel イベント リスナーを `passive` として指定することをご検討ください。
対策としてWebサイトで調べたのですが（わかりやすいサイトだったので、下記に紹介しています。）、具体的に実行するのは、少し面倒なので、もっと楽にできないかと、更に調べると、どうもプラグインで改善できそうだと分かりました。
プラグイン「Autoptimize」（Makes your site faster by optimizing CSS, JS, Images, Google fonts and more.バージョン 2.7.7 | 作者: Frank Goossens (futtta) ）をインストールし、有効化することにより、ほぼ改善されました。ただ、有効化しただけでは、思ったような効果が表れなかったので、設定を変更する必要があります。
説明を読んでもなかなか理解しにくいので、試行錯誤になるかもしれません。
取り敢えず、私の場合は、次のように設定しました。
- JavaScript オプション
- JavaScript コードの最適化
- JS ファイルを連結する
- CSS オプション
- CSS コードを最適化
- CSS ファイルを連結する
- インラインの CSS も連結
- CSS のインライン化と遅延
- その他オプション
- 連結されたスクリプト / CSS を静的ファイルとして保存
- 除外された CSS ファイルと JS ファイルを最小化
- 404 フォールバックの使用
- ログイン状態の編集者、管理者にも最適化を行う
これで、モバイル９０％、パソコン９４％まで、改善しました。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
下記サイトからの引用
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
passive:trueの使用例
document.addEventListener(‘wheel’, event => {
// 処理を記載
}, {passive: true});
passive:trueが特に有効なイベント
wheel、mousewheel、touchstart、touchmove
https://leap-in.com/ja/use-passive-true-avoid-janky/