Site Speed Optimization - Passive scroll listeners

nodarawarehouse
Visitor
3 0 2

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

Replies 5 (5)

oreoorbitz
Shopify Partner
242 29 129

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.

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.
Vivek_Tiwari
Visitor
1 0 1

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

oscprofessional
Shopify Partner
15830 2369 3072

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!

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

PageFly-Victor
Shopify Partner
7865 1785 3050

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 🙂

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:

- Find which browser support passive event listener https://caniuse.com/passive-event-listener

- Tutorial: https://www.digitalocean.com/community/tutorials/js-speed-up-scroll-events and https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

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 🙂

 

 

_onkar
Shopify Partner
9 0 1

Simply update to jquery latest version 3.5+, it solves the issue automatically, but be sure your theme code is updated to date otherwise JS code may be a break.

Want to modify or incorporate custom changes on the store, Hire me
If helpful then please Like and Accept Solution.
Contact : onkarsankhyan@gmail.com
Skype : live:831c4e4b34655655