magento2: Does not use passive listeners to improve scrolling performance

Preconditions :

Magento 2.4 latest version

Steps 1: Check you site via google page speed :https://developers.google.com/speed/pagespeed/insights Steps 2: Check audit report you will see below issues Does not use passive listeners to improve scrolling performance Consider marking your touch and wheel event listeners as passive to improve your page’s scroll performance. Learn more. Source …en_US/jquery.min.js:313:558

Can it be fixed are it is causing issue with mobile perfomace

About this issue

  • Original URL
  • State: open
  • Created 3 years ago
  • Comments: 29 (14 by maintainers)

Most upvoted comments

the fix maybe take times even a years to deploy/merge into codebase i think you can workarounds and patch with your own way https://stackoverflow.com/questions/60357083/does-not-use-passive-listeners-to-improve-scrolling-performance-lighthouse-repo Add web/jquery.js to your theme instead modify core. Add some patch at bottom

@engcom-Hotel: now that you have confirmed this, could you edit your post with those super large images and remove them? Those large images cause issues in our browsers while scrolling through this issue due to taking up a lot of resources while trying to display them. Much appreciated, thanks!

Hello @mrtuvn,

Thanks for the updates!

I was checking the homepage, the issue is not visible there but inner page the issue can be reproducible. Please have a look at to below screenshot: image

@ia-gaurav Since the issue is reproducible, we are confirming this issue.

Thanks

@engcom-Hotel You may not notice this line passive At categories Performance

Personally I’ve been using the following patch on jquery for ages:

require(['jquery'], function(jQuery) {
    'use strict';
    (function() {
        jQuery.event.special.touchstart = {
            setup: function(_, ns, handle) {
                this.addEventListener('touchstart', handle, {passive: ns.includes('noPreventDefault') ? true : false});
            }
        };
        jQuery.event.special.touchmove = {
            setup: function(_, ns, handle) {
                this.addEventListener('touchmove', handle, {passive: ns.includes('noPreventDefault') ? true : false});
            }
        };
    }());
});