Touch and wheel event listeners are useful for tracking user interactions and creating custom scrolling experiences, but they can also delay page scrolling. Currently, browsers can't know if an event listener will prevent scrolling, so they always wait for the listener to finish executing before scrolling the page. Passive event listeners solve this problem by letting you indicate that an event listener will never prevent scrolling.

Browser compatibility

Most browsers support passive event listeners. See Browser compatibility

How the Lighthouse passive event listener audit fails

Lighthouse flags event listeners that may delay page scrolling:

Lighthouse uses the following process to identify event listeners that may affect scrolling performance:

Lighthouse filters out listeners from different hosts because you probably don't have control over these scripts. There may be third-party scripts that are harming your page's scrolling performance, but these aren't listed in your Lighthouse report.

How to make event listeners passive to improve scrolling performance

Add a passive flag to every event listener that Lighthouse identified.

If you're only supporting browsers that have passive event listener support, just add the flag. For example:

document.addEventListener('touchstart', onTouchStart, {passive: true});
If you're supporting older browsers that don't support passive event listeners,
you'll need to use feature detection or a polyfill. See the
Feature Detection
section of the WICG Passive event listeners
explainer document for more information.
Resources
Source code for Does not use passive listeners to improve scrolling performance audit
Improving Scrolling Performance with Passive Event Listeners
Passive event listeners explainer
EventTarget.addEventListener()
  
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
  
Last updated 2019-05-02 UTC.
      [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2019-05-02 UTC."],[],[]]