Viewing 15 replies - 1 through 15 (of 18 total)
  • // 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, 8 months ago by Aftabul Islam.
    Thread Starter nishagarg

    (@nishagarg)

    There are many .js files. Which one do you suggest I put this code at? Should I share the file names?

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

    Thread Starter nishagarg

    (@nishagarg)

    Did that but it still shows the same in the PageSpeed insights tool.

    @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));
    }
    Thread Starter nishagarg

    (@nishagarg)

    I understand, thank you. But here is what it does when I add the code https://prnt.sc/110mmeb

    The possible reason is there is no comment-reply.min.js file. Rather I have a comment.php

    Not sure how to make this work.

    @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://www.ads-software.com/plugins/custom-css-js/

    And add the JS code there.

    Thread Starter nishagarg

    (@nishagarg)

    Got it. Added. But it still shows the same in the page speed insights: https://prnt.sc/111b6ve

    @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?

    Thread Starter nishagarg

    (@nishagarg)

    @bornforphp Added this code to the functions.php file. However, still seems to show the passive thing. Maybe I should check in a day or two. Thank you for your help so far.

    I have tried this as well with no luck…

    Thread Starter nishagarg

    (@nishagarg)

    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 custom css/js plugin and put the code @bornforphp send, worked for me

    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 !!!!

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘does not use passive listeners to improve scrolling performance wordpress’ is closed to new replies.