Employ Passive Event Listeners to Improve Your Website’s Scrolling Performance

Scrolling performance issues are an extremely important factor in both Google and many search engines. In SEO optimization, scrolling is expected to provide a quality experience as well as speed or content performance of a web page. To improve scrolling performance, we recommend that you be open to using new generation solutions.

Browser Compatibility of this Solution

Many browsers that are popular today work in harmony with passive event listeners. This makes it more advantageous to use this optimization tool.

How Does Lighthouse passive event listener audit fails in scrolling

Thanks to Lighthouse, you can easily get information that event listeners on your website reduce the scrolling performance of users because Google Lighthouse flags this information and presents it to you.

Lighthouse applies various analysis steps to catch that event listeners negatively affect the overall scrolling experience of your visitors. These steps are as follows:

1. The system gathers all event listeners on one page.
2. Non-touch and non-wheel listeners within the website are filtered.
3. Listener actors that call PreventDefault () are filtered out.
4. Listeners coming from a different host than the host on which the page is located are filtered.

Why Does Screpy Filter All These Listeners?

Google Lighthouse filters listeners from external hosts for understanding the problem that causes decreased scrolling performance on your website. Because it assumes that you have no control over listeners from other hosts. Therefore, listeners from third parties that have negative effects on your website’s scrolling experience do not need to be included in the Google Lighthouse report. 

While performing optimization work through Screpy, you will have the chance to benefit from all features of Google Lighthouse. Moreover, the fact that this tool is designed directly by Google helps you to get the best results.

How to transform event listeners into passive event listeners (for boosting scrolling performance)?

You now know that boosting scrolling performance has many positive effects on overall website power. It will be necessary to add a passive flag to each event listener to prevent them from negatively affecting the user experience.

Also, the browser you use can be a tool only that offers passive event listener support. In this case, just add the flag to the code. As an example, you can review the code below.

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

In some cases, browsers with un-updated, non-modern systems do not support passive event listeners. For these situations, you can use two different tools:

• Feature detection
• Polyfill.

We will be providing you with detailed information about these tools and methods

Using Lighthouse for Detailed Scoring

To optimize your scrolling performance with your general Lighthouse score can be a good idea. So, have a look at the score interpretation of Google Lighthouse.

Lighthouse uses a large number of metrics to determine a webpage’s score. Get the following information from the report provided to you by Lighthouse:

The score given to you may have values as following: 

• If it is between 0 and 49, it means you have poor performance. It is denoted by red.
• If it is between 50 and 89, it means you have “needs improvement” performance. It is denoted by Orange.
• If it is between 90 and 100, it means you have good performance. It is shown in green.