45

A recent Lighthouse Report flagged the following issue.

Does not use passive listeners to improve scrolling performance

It also mentions...

Consider marking your touch and wheel event listeners as passive to improve your page's scroll performance.

How do I resolve this issue? It appears to be related to jQuery.

3 Answers3

89

There was a long thread on this topic in https://github.com/jquery/jquery/issues/2871 in 2016

In short:

  • jQuery can't add support to passive listeners.
  • Is expected that this is added in jQuery 4 (4 years and still in 3.5.x)
  • The proposed fix is to add this code right after jQuery load:
jQuery.event.special.touchstart = {
        setup: function( _, ns, handle ){
            this.addEventListener("touchstart", handle, { passive: true });
        }
    };

UPDATE 2021: Add the following code after jquery. This will fix it and removes the Pagespeed warning

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 });
    }
};
Alex Gyoshev
  • 11,929
  • 4
  • 44
  • 74
Satelier Diego
  • 1,051
  • 7
  • 9
  • 4
    I added this in script tag following the script tag which adds jquery-3.3.1.min.js. The lighthouse performance won't increacse still. Did anyone here find a solution to actually get rid of the report " Does not use passive listeners to improve scrolling performance" – K. Shaikh Nov 02 '20 at 14:00
  • 9
    Is the goal to make the lighthouse report look good for your boss/client or to make the page actually perform better? – squarecandy Dec 05 '20 at 19:00
  • 24
    @squarecandy i think both points are relevant for many people ;) – GDY Dec 18 '20 at 12:53
  • 1
    I've added the code right after jQuery load (v3.2.1), but PageSpeed still mentions about passive listeners – stckvrw Jul 05 '21 at 08:02
  • this "fix" must be deficient somewhere or wouldn't JQ team have just "added it"? – escape-llc Sep 21 '21 at 13:51
  • .includes is not supported by all browsers – Nathan B Dec 05 '21 at 15:03
  • 1
    @escape-llc adding a patch to your project and testing to make sure it works on that project is way less complicated than updating a js library used by (literally) half the internet. The issue thread from the jQuery github that's linked in this answer explains that a robust solution would mean a major overhaul to `.on` with breaking changes. – ian.pvd Jan 28 '22 at 23:46
  • You have saved me from so much stress! Thank you :) – stiviniii Jul 13 '22 at 11:02
  • Working on 2022, thanks! – Gendrith Sep 08 '22 at 05:47
25

This has done the trick !

// 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") });
    }
};
NovaŜancO
  • 301
  • 3
  • 6
-5

How to make event listeners passive to improve scrolling performance. To solve this issue-:

  1. Go to the theme core file.
  2. Look for header.php or you can use a plugin to insert code into the header.
  3. Copy the code and paste it into the header.php file.
  4. If you are going to use the code into header.php, I would highly recommend you to use the PHP opening and closing tag.

enter image description here

  <script>!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){var e,t=["scroll","wheel","touchstart","touchmove","touchenter","touchend","touchleave","mouseout","mouseleave","mouseup","mousedown","mousemove","mouseenter","mousewheel","mouseover"];if(function(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t),window.removeEventListener("test",null,t)}catch(e){}return e}()){var n=EventTarget.prototype.addEventListener;e=n,EventTarget.prototype.addEventListener=function(n,o,r){var i,s="object"==typeof r&&null!==r,u=s?r.capture:r;(r=s?function(e){var t=Object.getOwnPropertyDescriptor(e,"passive");return t&&!0!==t.writable&&void 0===t.set?Object.assign({},e):e}(r):{}).passive=void 0!==(i=r.passive)?i:-1!==t.indexOf(n)&&!0,r.capture=void 0!==u&&u,e.call(this,n,o,r)},EventTarget.prototype.addEventListener._original=e}});</script>
Ray
  • 124
  • 7