Lighthouse: Use passive listeners to improve scrolling performance

Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

Overview

Browsers like Chrome normally block page scrolling during the initial page load until JavaScript has executed. With JavaScript already blocking the main-thread, smooth scrolling is not possible, negatively impacting your visitors' page experience.

Passive event listeners resolve this issue, allowing you to improve your visitors' experience.

How does your site score on this audit?

How do touch and wheel event listeners affect page performance?

An event listener is associated with JavaScript and is used by the browser to track user inputs.

Depending on the nature of the input, they are categorized as follows:

  • Scroll event listeners - to track scroll bar inputs.
  • Pointer event listeners - to track mouse pointer inputs.
  • Touch event listeners - to track touch/finger inputs.
  • Wheel event listeners - to track mouse wheel inputs.

Browsers like Chrome can't know if a touch or wheel event listener is going to cancel the scroll; so they must always wait for the listener to finish, blocking page scrolling in the process.

This may introduce an undesired effect called scroll jank, where the page stutters or doesn't respond smoothly to user inputs. Your visitors may find this experience frustrating as it gives them the impression that your page is unresponsive to their interactions.

Adding a passive: true flag to the event listener tells the browser to allow page scrolling immediately, rather than wait for the script containing the event listener to finish executing.

How does GTmetrix trigger this audit?

This audit triggers if GTmetrix finds a touch or wheel event listener on your page that doesn't:

  • Call preventDefault()
  • Contain a passive:true flag

Otherwise, the audit has no impact on your Structure Score.

Note that event listeners attached to third-party scripts are excluded.

How to fix this audit?

To fix this audit, add a passive: true flag to every event listener flagged by GTmetrix. For example,

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

Note that the above code is only valid for browsers that support passive event listeners.

Refer to this article to learn how to use feature detection on older browsers.

Note: This is an advanced-level optimization

Developer support is strongly recommended.

Summary

6.0.0
 ****

Cookie Policy

By clicking "Allow All" you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View cookie details

Deny Allow All
×