does not use passive listeners to improve scrolling performance wordpress

// Passive event listeners
    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") });
        }
    };

Put this code at beginning of your theme/plugin js file.

• This reply was modified 3 years ago by Aftabul Islam.

It should be your custom JS file. Where you write your custom JS. Though it would work in any JS file.

@nishagarg

The problem is with the core WordPress comment system. WordPress (js/comment-reply.min.js) generating “non-passive” listeners. The script is responsible for comments UI features, in specific enabling users to comment in reply to another comment (i.e. nested commenting).

The problem with “non-passive” listeners is that they can slow down simple user interactions such as scrolling.

Here is how you can remove the script from loading. But one thing to remember if you unload this, the nested comment will not work.

function wp_dereg_script_comment_reply(){wp_deregister_script( 'comment-reply' );}
add_action('init','wp_dereg_script_comment_reply');

The following code should be added in your .js file, or inside a <script> tag in every page (.e.g in header.php)

Or if your theme supports Theme panel, add it to the JS block inside your Theme Panel.

//Function checks if a given script is already loaded
function isScriptLoaded(src){
    return document.querySelector('script[src="' + src + '"]') ? true : false;
}
 
//When a reply link is clicked, check if reply-script is loaded. If not, load it and emulate the click
$('.comment-reply-link').click(function(){ 
    if(!(isScriptLoaded("/wp-includes/js/comment-reply.min.js"))){
        var script = document.createElement('script');
        script.src = "/wp-includes/js/comment-reply.min.js"; 
    script.onload = emRepClick($(this).attr('data-commentid'));        
        document.head.appendChild(script);
    } 
});
//Function waits 50 ms before it emulates a click on the relevant reply link now that the reply script is loaded
function emRepClick(comId) {
sleep(50).then(() => {
document.querySelectorAll('[data-commentid="'+comId+'"]')[0].dispatchEvent(new Event('click'));
});
}
//Function does nothing, for a given amount of time
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

@nishagarg You are adding the code to wrong location.

Do you have Theme panel in your Active theme? Most of the theme panel has option to add Custom JS.

If you don’t have the option to add custom Js, then you can install this plugin: https://wordpress.org/plugins/custom-css-js/

And add the JS code there.

@nishagarg make sure to add the following code to your active theme’s functions.php file

function wp_dereg_script_comment_reply(){wp_deregister_script( 'comment-reply' );}
add_action('init','wp_dereg_script_comment_reply');

As the JS code to the custom JS plugin.

Did you add the above code to your active theme’s functions.php file?

I have tried this as well with no luck…

Hello, I am having the same issue. I used the Code Snippets plugin to add the php and js. Google PageSpeed Insights is still saying “Does not use passive listeners to improve scrolling performance.”

I installed the Simple Custom CSS and JS plugin and put the code @bornforphp send. Worked for my website https://skinsgratiscsgo.com and https://csgometaverse.com

Tks @bornforphp !!!!