Lighthouse / PageSpeed Insights: Does not use passive listeners to improve scrolling performance

[peterpeterparker]

Stencil version:

 @stencil/core@v.1.17.2

I'm submitting a: [X] feature request

Current behavior: When auditing a Stencil PWA with Lighthouse or PageSpeed Insights, I get the following error:

Does not use passive listeners to improve scrolling performance

Consider marking your touch and wheel event listeners as passive to improve your page's scroll performance. Learn more.

When tracking it I noticed that the not passive listener was declared in Stencil (as no other addEventListenerwas declared nor use in the highlighted script), more precisely in client-windows.ts

Expected behavior: No lighthouse error aka the fastest load performances.

Steps to reproduce:

• Got to Google Pagespeed
• Run a test with our staging

Screenshots:

[romulocintra]

😃😃😃😃😃😃 https://youtu.be/aljtUMiHTiE?t=3316

[adamdbradley]

When using @Listen('scroll', { target: 'window' }), by default the compiler adds passive to the addEventListener:

Here's an example: https://github.com/ionic-team/stencil/commit/0b71cddd0721287c390c5d064d1449fe857e5d9c

What does your listener look like?

[peterpeterparker]

@adamdbradley I was able to narrow down the issue to a touchmove listener. Indeed the following listener, even if set as passive, will triggers the Lighthouse error

@Listen('touchmove', {passive: true})
  async touchmove($event: TouchEvent) {
    console.log($event);
  }

Do you think there is an issue in Stencil or it is maybe a Lighthouse bug?

I put together a dummy sample repo. Note that the build has to be prerendered to reproduce the issue.

git clone https://github.com/peterpeterparker/stencil-listener
cd stencil-listener
npm i
npm run build
npx serve www

and then lighthouse http://localhost:5000 --view

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!