Lighthouse reports "Does not use passive listeners..." for next/link since Next 12.3.0 with Preact

[olivererdmann]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: darwin Arch: x64 Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:17:10 PDT 2022; root:xnu-8020.140.49~2/RELEASE_X86_64 Binaries: Node: 16.14.0 npm: 8.3.1 Yarn: 1.22.18 pnpm: N/A Relevant packages: next: 12.3.1-canary.2 eslint-config-next: 12.2.3 react: N/A react-dom: N/A

What browser are you using? (if relevant)

Chome 105.0.5195.125

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

We are using Next.js with Preact instead of React. Since updating Next from 12.2.3 to 12.3.1, Google Lighthouse / PageSpeed Insights report "Does not use passive listeners to improve scrolling performance". We didn't see that issue with previous versions. I've narrowed it down to next/link and especially this commit https://github.com/vercel/next.js/commit/135a4cfc6632887aaccd2452d5c413419163680c where a new onTouchStart-prop was introduced. It seems this change does not add a passive listener in that case.

Expected Behavior

Next/link should not introduce performance related issues. It should add a proper passive listener for touchstart events, or it should give us a way to opt out of this behavior.

Link to reproduction

https://github.com/olivererdmann/next-12-3-preact-link-issue

To Reproduce

This Github repo is deployed to https://next-12-3-preact-link-issue.vercel.app/ https://next-12-3-preact-link-issue.vercel.app/no-link/ shows an example without next/link.

Steps:

1. open the above URL in PageSpeed Insights: https://pagespeed.web.dev/report?url=https%3A%2F%2Fnext-12-3-preact-link-issue.vercel.app%2F
2. wait until report finishes
3. observe the diagnose "Does not use passive listeners to improve scrolling performance"
4. open the /no-link in PSI: https://pagespeed.web.dev/report?url=https%3A%2F%2Fnext-12-3-preact-link-issue.vercel.app%2Fno-link%2F
5. observe the absence of the diagnose

The same can be reproduced in Chrome Lighthouse

[SukkaW]

IIRC next/link doesn't attach any listener to the scroll event, thus shouldn't cause this issue! next/link only uses onTouchStart, onClick, and onMouseEnter. Also, those event handlers are attached to the JSX element directly and let the framework does its job.

[olivererdmann]

I understand that no listeners are used, but props. But possibly using a listener in that case could solve this issue. The docs linked in this PSI-report explicitly mention touchstart, which was added to next/link with the new version: https://web.dev/uses-passive-event-listeners/?utm_source=lighthouse&utm_medium=lr#how-to-make-event-listeners-passive-to-improve-scrolling-performance In contrast to the previously existing onClick and onMouseEnter, the onTouchStart is evaluated differently by PSI as it's required to be passive.

For the moment we can stick with [email protected], which didn't show this issue, but it seems that this issue will prevent us to upgrade.

[SukkaW]

@olivererdmann Thanks for the reply!

However, there is nothing we can do here at the Next.js side. As I said, the next/link attaches the onTouchStart event handler directly to the JSX element, and the rest is done by the framework. It seems that the issue is caused by the implementation detail of the framework, which is something out of our control.

[majid-amiri]

Same problem with next 12.3.1 and preact 10.11.3. any updates?

[ambrod]

same issue, next 12.3.4, […chunks/framework-9e6d2aafdfa64bf0.js:1:17965] n.addEventListener(e,o?U:R,o) ???

[SukkaW]

IMHO this issue should be closed now. The warning is caused by preact's internal implementation, thus the issue should be reported to preact team as there's nothing Next.js can do. And the quickest way to remove the warning would be to use React.

[olivererdmann]

We’ve actually “solved” this by reverting back to React. Preact is not considered a reliable enough solution for our projects at this point, so we’re not further looking into this issue.

I’m closing the issue then.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.