How to fix "Does not use passive listeners..." from google maps

[PoojaHiwade]

Anyone have the same problem?
on my Lighthouse there are diagnostics that say "Does not use passive listeners to improve scrolling performance" on maps.googleapis.com.;

[flareAI]

Hello @PoojaHiwade,

I am Gina from flareAI app - get free sales from Google. Hope you are having a good day.

The "Does not use passive listeners to improve scrolling performance" diagnostic message in Lighthouse means that there is an issue with the scrolling performance of your Shopify store, specifically on the page that uses the Google Maps API from maps.googleapis.com.

Passive event listeners are a way to improve the performance of your website by allowing touch and scroll events to be processed faster, reducing the likelihood of jank (stuttering or freezing) during scrolling. The Google Maps API library can create a lot of touch and scroll events, so it's important to use passive event listeners to improve performance.

To address this issue, you can add the passive: true option to the addEventListener method when setting up event listeners for touch and scroll events in your JavaScript code. This will allow the browser to optimize the processing of these events and improve the scrolling performance on your Shopify store.

Here's an example code snippet:

// Add event listener with passive: true option
element.addEventListener('touchstart', onTouchStart, { passive: true });

Try if this works.

Also, check if any third-party scripts or apps installed on your Shopify store are causing the issue by disabling them one by one and re-running the Lighthouse audit until you find the culprit.

Gina