FROM CACHE - en_header

Site Speed Optimization - Passive scroll listeners

nodarawarehouse
New Member
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
209 26 120

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

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/
oscprofessional
Shopify Partner
12490 1931 2478

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!

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
PageFly
Shopify Partner
3575 532 1874

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 🙂

 

 

If you find it helpful, please let me know by giving it a like or marking it as a solution.


PageFly- Advanced Shopify Page Builder - Empowering 100.000+ active merchants.


Check out our Ecommerce Website Design ideas for 2022. 


Learn the quintessential strategy to bring your store online with An Evergreen Guide.

_onkar
Shopify Partner
8 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
Vivek_Tiwari
New Member
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