Workaround for PageSpeed Insights warning about not using passive listeners to improve scrolling performance

When testing the use of our WordPress site with PageSpeed Insights, if the jQuery library is loaded on the front-end, we tend to get a `Not using passive listeners to improve scrolling performance` warning, and Google suggests that we mark our touch and scroll wheel event listeners as `passive` to improve the scrolling performance of the page.

Why is there a warning about passive listeners not being used?

During the process of rendering a web page in a browser, by default, the browser willactive listenerBind to touch and scroll events and determine whether to perform the default action based on the result of that event running and whether it blocks the browser's default behavior. For example, we can use the touchstart event invocation preventDefault , at which point the browser disables the default action of the event and will not scroll or zoom.

And the browser has no way of knowing in advance whether a listener will call the preventDefault(), it needs to wait for the listener to finish executing before executing the default behavior, and listener execution is time-consuming, which will cause the page to lag. For a more in-depth explanation refer to:Mobile Web Scrolling Performance Optimization: Passive event listenersThe

Ways to make WordPress built-in jQuery use passive listeners

If we change the listener's listening method to passive, we can eliminate this delay and improve the touch and scroll performance of the web page. Although this warning doesn't directly affect the PageSpeed Insights score, resolving this delay will still help improve the user experience of the web page in some way.

As of the date of this article, WordPress' built-in jQuery does not yet support this action. Fortunately, we can add this support to jQuery with a simple piece of code.

add_action('wp_enqueue_scripts', function ()
{
    wp_add_inline_script('jquery', '
    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.
            }
        }; }
        jQuery.event.special.wheel = {
            setup: function( _, ns, handle ){
                this.addEventListener("wheel", handle, { passive: true }); }; jQuery.event.
            }
        }; }
        jQuery.event.special.mousewheel = {
            setup: function( _, ns, handle ){ this.addEventListener("wheel", { passive: true } ); }
                this.addEventListener('mousewheel", handle, { passive: true }); }; jQuery.event.
            }
        };'
    ); }
}, 999);

If you are not using jQuery in your site and still get a warning about not using passive listeners to improve scrolling performance, you can refer to the above code in thethis.addEventListener Partially modify your code to implement passive listening.