Passive Listeners

Improving scrolling performance by using passive listeners

Accessibility

Improving scrolling performance by using passive listeners

Page scrolling can be delayed by touch and wheel event listeners; these are used as they are useful for tracking user interactions and creating customised scrolling experiences. 

Browsers are not able to know in advance whether scrolling will be slowed down and therefore wait before execution ends. This can be overcome by using passive event listeners, which allow you to determine that an event listener cannot prevent scrolling.

 

How the SeoChecker passive event listener audit is displayed

If an event listener can delay page scrolling, SeoChecker will notify it.

passive listeners

Event listeners are identified by SeoChecker via this process:

  1. Gathering the event listeners on the page;
  2. Excluding listeners who do not touch and do not listen;
  3. Excluding listeners that call preventDefault();
  4. Excluding listeners from a host different than the page's one.

 

How can I improve scrolling performance making event listeners passive?

Once SeoChecker has identified all the event listeners, just use a passive flag to them.

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

Share this Guide

Did you like it? Share it!

Share it!

Web tools for modern developers. Try these one!

Over 50 generators, builders and validators to improve your SEO and web performances

Home Back to top of the page