スクロールパフォーマンスの対策アイキャッチ

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

すこし混み合った技術よりの内容の記事です。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() を呼び出さないことを明示できました。

さいごに

Lighthouseで発生する警告についての対策記事でした。WordPressテーマを導入したときから表示されている警告のようで多くの人が表示されているエラーなのではと思います。実害はあまりないのですが、警告があると気になりますよね。それではまた次の記事でお会いしましょう👋

参考にさせていただいたサイト

https://sologaku.com/wordpress/improve-scrolling-performance/