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 フォールバックの使用
    • ログイン状態の編集者、管理者にも最適化を行う

これで、モバイル90%、パソコン94%まで、改善しました。

**********************************************

下記サイトからの引用

**********************************************

passive:trueの使用例

document.addEventListener(‘wheel’, event => {
   // 処理を記載
}, {passive: true});

passive:trueが特に有効なイベント

wheel、mousewheel、touchstart、touchmove

 

https://leap-in.com/ja/use-passive-true-avoid-janky/