Site Speed Optimization - Passive scroll listeners

Technical Q&A
1

Hi,

I recently read about marking scroll event listeners as passive to improve site speed performance. Is that something that is handled within shopify for my shopify store? If so, is there an option to make the listeners passive or is that something I’d have to manually add as code?

Thanks,

NodaraWarehouse

2

You’d have to add manually as code.

In most cases, this warning appears on pagespeed insights because of Jquery.

You’d want to add this javascript code right after Jquery

var supportsPassive = false;
try {
  var opts = Object.defineProperty({}, 'passive', {
    get: function() {
      supportsPassive = true;
    }
  });
  window.addEventListener("testPassive", null, opts);
  window.removeEventListener("testPassive", null, opts);
} catch (e) {}

If (supportsPassive) {
 jQuery.event.special.touchstart = {
        setup: function( _, ns, handle ){
            this.addEventListener("touchstart", handle, { passive: true });
        }
    };
}

When making event listeners passive, be sure to always test that the browser supports it, otherwise it could break things.

If your not familiar with coding, I recommend you hire a developer.

3

Hello @nodarawarehouse ,

You need to work on your website performance’s speed. Low mobile page speed may kill your traffic and affect your conversion.

In order to Improve website speed we need to:

  • Remove unnecessary code on a high priority basis.
  • Compressed images or Defer off-screen images.
  • Web Pages need to be Minified.
  • Reduce JavaScript execution time
  • Minimize main-thread work
  • Beware of excessive liquid loops
  • Decrease thumbnail image size
  • Weigh the benefits of installing another app

By fixing these issues, your website speed score can definitely improve. For more details please check and select the plan you wish to select -
https://www.oscprofessionals.com/shopify-performance-optimization/

If anything is missed out or unclear then don’t hesitate to ask
Thank You!

4

Hi @nodarawarehouse

It’s very nice that you bring it up, I’d love to discuss with you guys about scroll event listeners as it could be a nice idea to implement into our product :slightly_smiling_face:

After reading, I notice that marking scroll event listeners as passive will help improve scroll performance, especially on mobile. It doesn’t directly help improve site speed performance, but definitely improve user experience and I believe it can greatly benefit your site. Most browsers will support it.

I’ve tried to find a comprehensive tutorial for you, but I think you might need help from a developer to implement it in your store.

Some articles might be useful:

Also, if you are interested in optimizing the page speed for your mobile page, please check it out https://academy.pagefly.io/guide/how-to-optimize-website-for-mobile/ There are great actionable tips there.

Have a good day, if my answer is helpful, please give it a ‘like’. Thank you so much :slightly_smiling_face:

5

Thanks so much for the code!

I added it right after my theme’s jQuery and while it did help get rid of the passive listeners error, it broke my website in the sense that images won’t load anymore.

After some more troubleshooting, I found this code in a StackOverflow thread, added it right after jQuery in the plugin.jqeury.min.js file and voila! it worked.

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 });
    }
};

If anyone’s facing similar issues, they should try this.

Hope that helps!

Vivek