Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Uses Passive Event Listeners to Improve Scrolling Performance

Why the audit is important

Setting the passive option on your touch and wheel event listeners can improve scrolling performance.

See Improving Scrolling Performance with Passive Event Listeners for an overview.

See the Explainer in the passive event listener specification for a technical deep-dive.

How to pass the audit

Add the passive flag to all of the event listeners that Lighthouse has identified. In general, add the passive flag to every wheel, mousewheel, touchstart, and touchmove event listener that does not call preventDefault().

In browsers that support passive event listeners, marking a listener as passive is as easy as setting a flag:

document.addEventListener('touchstart', onTouchStart, {passive: true});

However, in browsers that do not support passive event listeners, the third parameter is a boolean to indicate whether the event should bubble or capture. So, using the syntax above may cause unintended consequences.

See the polyfill in Feature Detection to learn how to safely implement passive event listeners.

How the audit is implemented

This section explains how this audit is implemented, so that you can understand how the audit's score is calculated.

Lighthouse uses the following algorithm to flag potential passive event listener candidates:

  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. Because of this, note that Lighthouse's audit does not represent the full scroll performance of your page. There may be third-party scripts that are harming your page's scroll performance, but these aren't listed in your Lighthouse report.

Feedback