Online store performance and site speed optimization
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
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.
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
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!
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 🙂
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024