When testing a WordPress site with PageSpeed Insights, users often encounter a warning stating: “Does not use passive listeners to improve scrolling performance,” especially if the frontend loads the jQuery library. Google recommends marking touch and wheel event listeners as passive to ensure that the browser’s main thread is not blocked during scrolling, thereby improving page responsiveness.
Why Do Passive Listener Warnings Occurs?
By default, when a browser renders a webpage, it actively “listens” to touch and scroll events to determine if those events will prevent the browser’s default scrolling behavior. For instance, if a touchstart event calls preventDefault(), the browser must disable its default scrolling or zooming response. However, the browser cannot know in advance whether a listener will call preventDefault()—it must wait for the listener to finish executing first. This waiting period can cause noticeable lag or “jank” during scrolling.
By marking a listener as passive, you are informing the browser that the listener will not call preventDefault(). This allows the browser to perform the default scrolling action immediately, without waiting for the JavaScript execution to complete.
Implementing Passive Listeners for jQuery in WordPress
Switching your listeners to passive mode eliminates scrolling delays and improves the user experience. While this warning might not directly impact your PageSpeed Insights numerical score, fixing it contributes to better real-world performance metrics.
As of the time of this publication, the version of jQuery bundled with WordPress does not natively support passive event listeners for its standard event binding methods. Fortunately, we can add this support globally by using a small code snippet that enhances jQuery’s event handling system.
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.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 });
}
};'
);
}, 999);If your website does not use jQuery but still triggers this warning, you should review your manual addEventListener calls and ensure the passive: true option is included where appropriate for scroll-related events.
