How can I enable passive listeners to improve scrolling performance?

Technical Q&A

Topic summary

Main issue: A Lighthouse/Web.dev audit flagged “Does not use passive listeners to improve scrolling performance,” pointing to a touchstart event listener in a vertical scroll blocker mixin.

Key concept: Passive event listeners ({ passive: true }) tell the browser the handler won’t call preventDefault, allowing smoother scrolling and better performance.

Proposed fix: Add { passive: true } to all relevant touch event listeners detected by the audit—specifically to the touchstart listener (touchmove already had it in the example). A reference to web.dev guidance was provided.

Outcome: The original poster confirmed the change resolved the warning and improved results.

Open item: Another participant asked where to add this in their code; no further guidance was given yet.

Notes: The code snippet showing passive: true on both touchstart and touchmove is central to understanding the solution. The discussion remains technically focused with no broader changes or decisions beyond implementing passive listeners.

Summarized with AI on December 12. AI used: gpt-5.
1

Hey folks, I hope you’re all well.

Web.dev is returning a “Does not use passive listeners to improve scrolling performance” message which I’d like to get rid of.

The line it references can be seen in bold below.

// js/mixin/vertical-scroll-blocker.js
var VerticalScrollBlockerMixin = {
_blockVerticalScroll(threshold = 18) {
this.addEventListener(“touchstart”, (event) => {
this.firstTouchClientX = event.touches[0].clientX;
});
this.addEventListener(“touchmove”, (event) => {
const touchClientX = event.touches[0].clientX - this.firstTouchClientX;
if (Math.abs(touchClientX) > threshold) {
event.preventDefault();
}
}, { passive: true });
}
};

I can’t for the life of me figure out how to enable that specific line as passive. some assistance would be lovely!

Thanks so much,

Dave

2

Hi Dave, nice to meet you! Great question, you nearly have it done here, you simply need to add the passive flag for all event listeners that Lighthouse has detected, which you have done for the second event but not the first event listener - e.g

this.addEventListener("touchstart", (event) => {
this.firstTouchClientX = event.touches[0].clientX;
}, {passive: true});

So your whole code snippet would look like this:

var VerticalScrollBlockerMixin = {
_blockVerticalScroll(threshold = 18) {
this.addEventListener("touchstart", (event) => {
this.firstTouchClientX = event.touches[0].clientX;
}, {passive: true});

this.addEventListener("touchmove", (event) => {
const touchClientX = event.touches[0].clientX - this.firstTouchClientX;
if (Math.abs(touchClientX) > threshold) {
event.preventDefault();
}
}, { passive: true });

}
};

Here’s the reference for more info: https://web.dev/uses-passive-event-listeners/

If you require further assistance on optimizing your store and obtaining a higher pagespeed grade from Google’s Pagespeed insights our team specializes in these tasks and can help ensure your store is as fast as possible. We can do theme modifications, lazy loading apps, conditional loading and work on your core vitals - or as you are more DIY minded we can simply audit and provide you with advisories and a detailed overview so you can take it from there.

Send a DM or contact us for more information. You can also use our free Shopify Analyzer service to garner more information on your page’s elements performance.

1 Like
3

Ah! I love you! This worked an absolute treat - thank you SO much!

4

I am trying to fix this same issue. Where do I add and fix this at in my code?