Skip to content
Learn Measure Blog Case studies About
On this page
  • Browser compatibility
  • How the Lighthouse passive event listener audit fails
  • How to make event listeners passive to improve scrolling performance
  • Resources

Use passive listeners to improve scrolling performance

May 2, 2019 — Updated Aug 28, 2019
Available in: Português, Русский, 中文, English
Appears in: Best Practices audits
On this page
  • Browser compatibility
  • How the Lighthouse passive event listener audit fails
  • How to make event listeners passive to improve scrolling performance
  • Resources

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 audit shows page doesn't use passive event listeners to improve scrolling performance

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

  1. Collect all event listeners on the page.
  2. Filter out non-touch and non-wheel listeners.
  3. Filter out listeners that call preventDefault().
  4. Filter out listeners that are from a different host than the page.

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.

Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.

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()
Last updated: Aug 28, 2019 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

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.