Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Uses Passive Event Listeners to Improve Scrolling Performance

Overview

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.

Recommendations

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.

More information

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

Was this page helpful?