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

0 Likes
oreoorbitz
Shopify Partner
132 14 78

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
0 Likes

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!

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes

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

 

 

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

Check our Evergreen Guide on Moving Your Brick-n-Mortar Store Online.

Want To Strive The Coolest E-commerce Knowledge? Explore Our FREE Video Resources.

_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
0 Likes