「スクロールパフォーマンスを高める受動的なリスナーが使用されていません」の解決策

すこし混み合った技術よりの内容の記事です。SEO対策の一部の記事ですが、関係のない方も多いと思われるので、もし思い当たる節があれば、読み進めてみてください。では本題です。LighthouseのPerformanceの項目にて、どう対応をすべきか迷う警告があります。筆者の場合はjQueryを利用することで発生しておりました。

2022年9月の段階で筆者は対応していません。コードを直接触ることはなるべく控えているためです。本記事は対策を調査した備忘録になります。

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

日本語だと、

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

もしくは英語だと...

Does not use passive listeners to imporve scrolling performaConsider making your touch and wheel event listeners as passive to improve your page's scroll performance

という表示がされます。筆者が運営する別のWebサイトで警告がこれだけになったため、どうしても警告を消したく解決方法を探していたところ、いくつか発見したので、この記事で紹介します。

警告の原因

これはスクロールジャンクと呼ばれる現象によるパフォーマンス懸念の警告になります。スクロールジャンクはいわゆるスクロールのガクつきのことです。ブラウザはスクロールを開始するタイミングなどをイベントリスナーで監視しています。このイベントリスナーは開発者がフックさせることができ、このときスクロールを一時的に止めて処理をしたい場合があります。実際に止める止めないにかかわらず、ブラウザはスクロールを止めるのか止めないのかを事前に判断することができません。なので場合によってはメインスレッドを止めることになるため、パフォーマンス懸念につながるわけです。

それを事前に伝えるのが addEventListener の引数の passive = true になります。デフォルトは false が設定されている模様です。厳密にはイベントリスナーでpreventDefault() を呼び出さないことを明示させるということです。呼び出す場合は false のままにしておかねばなりません。

でなぜjQueryでこの問題が発生するのかというと、根本的にjQueryというライブラリ側でも開発者がスクロールを制御するか判断がつかないためだろうと推測します。jQueryについてはGitHubのIssueで2016年から議論されている模様です。

https://github.com/jquery/jquery/issues/2871

Stackoverflow にも同様に質問があげられていました。

https://stackoverflow.com/questions/60357083/does-not-use-passive-listeners-to-improve-scrolling-performance-lighthouse-repo\

対策方法

さて肝心の対策ですが、WordPressの場合は直接JavaScriptを修正せねばなりません。

筆者の場合は/wp-includes/js/comment-reply.min.js というファイルを修正すればよいとのことでした。

// /wp-includes/js/comment-reply.min.js
jQuery.event.special.touchstart = {
    setup: function( _, ns, handle ) {
        this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
    }
};
jQuery.event.special.touchmove = {
    setup: function( _, ns, handle ) {
        this.addEventListener("touchmove", handle, { passive: !ns.includes("noPreventDefault") });
    }
};
jQuery.event.special.wheel = {
    setup: function( _, ns, handle ){
        this.addEventListener("wheel", handle, { passive: true });
    }
};
jQuery.event.special.mousewheel = {
    setup: function( _, ns, handle ){
        this.addEventListener("mousewheel", handle, { passive: true });
    }
};

このようにすることでタッチイベントやホイールイベントのリスナで preventDefault() を呼び出さないことを明示できました。