Passive Event Listeners: Solution to ”Does not use passive listeners to improve scrolling performance ”

To what extent can you improve a visitor’s experience on your website? Recent researchers say that users care about scrolling performance within the site, and even that is important for Googlebots.

This is exactly why Screpy, while analyzing web pages, warns you by assigning a task if there is a problematic situation in this regard. It may be a good idea to use a very important web standard introduced in Chrome 51 to make improvements and develop your site’s scrolling performance: Passive Event Listeners.

These are available in Firefox 49 as well as Chrome 51, and they allow users to get better feedback on their scrolling behavior.

Passive Event Listeners
Passive Event Listeners

So, how exactly do passive event listeners do this? What exactly is the problem these tools solve? What is the overall contribution of improving scrolling performance using passive event listeners to SEO? We will try to find answers to all these questions together with you today.

Test Your Website Issues

You can quickly analyze your site

What are Scrolling and Scrolling Performance?

What exactly happens when you enter a website and scroll through the page you’re on? Let’s try to understand how the browser behaves in this case if you wish.

First of all, we have to talk about a DOM tree. What the browser does is it have a look at the created DOM tree and determines which of it thinks these DOM elements will look the same when the page scrolls. Your browser combines these elements together and takes a picture so that they look the same. This picture is called a layer.

What are Scrolling and Scrolling Performance?
What are Scrolling and Scrolling Performance?

Each layer created must be painted. That is, pictures that need to be rasterized and painted in order to be presented to the user, then become the image you see on the screen.

Now, you know what scrolling means and how browsers work when you scroll. So now you’re about to understand how Chrome DevTools also works in this framework.

The lower size images you are sending to the browser, the better so that the scrolling performance can be strong enough. Because the workload to be done will be reduced in this way. This may require technical optimization: For example, make changes to CSS files or image size attributes and simplify the process.

As a result, scrolling performance on a web page basically depends on 3 things:

  1. Expensive styles – Make sure the visuals don’t cost you money.
  2. Reflows and repaints – Consider how much workload the browser is under.
  3. Failing to debounce your scroll events

What Does Passive Event Listeners Do?

What Passive Event Listeners basically does is try to eliminate the need for waiting for the work of touch and wheel event listeners to scroll, allowing users to have a much better and optimized scrolling experience.

What Does Passive Event Listeners Do?
What Does Passive Event Listeners Do?

Basically, this problem is developed to solve the problem with the inability to achieve smooth scrolling performance. It is very important to be able to achieve a high level of scrolling performance, especially on touch devices. This helps you improve UX.

When you scroll a page and notice that the scrolling performance on the page is not exactly in sync with the movement of your thumb, you may start thinking there is something wrong with the screen. Let’s say this is what it is called in the world of developers: scroll jank.

The fact that you experience such asynchronous situations has an extra negative effect on the scrolling processes that you control by touching, not with the mouse. Usually, the biggest culprit of scroll jank is the touch event listener.

So what exactly do touch event listeners do?

Let’s say it right: what they do is basically watching the user interactions with the screen, preventing scrolling when needed, and enabling custom scrolling experiences. The browsers we use today have no idea where scrolling should start and end. So waiting for a touch event listener to finish its job and then scrolling is what browsers prefer.

So what exactly do touch event listeners do?
So what exactly do touch event listeners do?
  1. At this point, passive event listeners come into play to solve this “lack of control” that the user feels. What these tools do is closely related to the addEventListener element.
  2. Use AddEventListener and its element contains the options parameter.
  3. In this parameter, you must set a flag that indicates that the touch event listener will not cancel the scrolling. Indeed, it will request it to continue.
  4. When you do this, you transmit this information to the browser. In this way, scrolling continues smoothly and the problem is solved.
  5. This prevents the browser from waiting for the touch event listener to do scrolling. The browser immediately scrolls with the help of the options parameter of the AddEventListener element without waiting.
  6. At the end of the job, the user’s thumb gesture matches the scrolling result. This will mean a much higher quality browsing experience.

Which Browsers Support Passive Event Listeners?

So now we understand the issue much better: Especially on mobile devices, browsers no longer have to wait for touch event listeners. Because thanks to AddEventListeners, scrolling is possible with the help of Passive Event Listeners.

Which Browsers Support Passive Event Listeners?
Which Browsers Support Passive Event Listeners?

This means: Oftentimes, it can take quite a while for touch event listeners to finish off due to the high workforce running on the website. But if you have AddEventListeners, let the user swipe the page without your browser having to wait for other processes to execute.

Browsers support passive event listener. Credit: caniuse.com
Browsers support passive event listener. Credit: caniuse.com

Many browsers today support these new elements. It can be listed among those that do not support IE, Edge, and Opera Mini. Here are the supporters of this function and items:

  • Edge 16 – 88, 89
  • Firefox 49 – 85, 86, 87 – 88
  • Chrome 51 – 88, 89, 90 – 32
  • Safari 10 – 13.1, 14, TP
  • Opera 38 – 72, 73
  • iOS Safari 10 – 13.7, 14.4
  • Android Browser 81
  • Opera Mobile 62
  • Chrome for Android 89
  • Firefox for Android 86
  • UC Browser for Android 12.12
  • Samsung Internet 5 – 12.0, 13.0

How To Pass the Lighthouse Audit About Passive Event Listener?

You can easily and quickly perform Google Lighthouse audits on Screpy. Google Lighthouse also examines the scrolling performance of your website and within the framework of this performance, if you are not using passive event listeners, it will give you a warning as follows:

Consider marking your touch and wheel event listeners as “ passive ” to improve your page’s scroll performance.

Super, here’s how:

Feature detect Native Smooth Scrolling
Feature detect Native Smooth Scrolling

Check out Screpy’s Passive Event Listeners task to see what to do step by step when you receive such a warning. We will now examine this with various code snippet examples.

How To Make Event Listeners Passive To Improve Scrolling Performance?

Here is a piece of detailed information about how to activate passive listeners to improve your scrolling performance and make event listeners passive.

Adding Capture Argument

The primary thing we need to do is have a mechanism to add additional information to the event listener. For this, it may be a good idea to add the capture argument to the code snippet. It will offer us space to add additional information.

So if our first code snippet looks like this:

  document.addEventListener('touchstart', handler, true);

We will add capture and true to the end of our code snippet after optimization. So the code snippet should look something like this:

  document.addEventListener('touchstart', handler, {capture: true});

What we are using is a new syntax that deals with actually existing behavior. This is what syntax does, it allows you to specify whether you want the listener to be invoked during the capture phase. Cool, isn’t it?

Querying Event.defaultPrevented Before and After Calling PreventDefauls()

Now it’s time for the next step. After creating a workspace with the capture argument for ourselves, we can generate specific information about event handler registration time. For example, if we predict that the listener will not call the item named preventDefault() at the event time, the browser does not have to wait for the touch event listener to decide whether to scroll or not. Even if the touch event listener calls this item later, this request will be ignored and a warning will occur on the Console.

Here’s what the developer needs to do in order to do exactly that: make sure there is a query of Event.defaultPrevented before and after the preventDefault(). Now we will give you a code example for this.

  addEventListener(document, "touchstart", function(e) {
  	console.log(e.defaultPrevented);  // will be false
    e.preventDefault();   // does nothing since the listener is passive
    console.log(e.defaultPrevented);  // still false
  }, Modernizr.passiveeventlisteners ? {passive: true} : false);
 

How do you make an event handler passive and fix ‘’does not use passive listeners to improve scrolling performance’’?

Hey, you just did! Fantastic! In the past, the browser had to block and delay scrolling in the case of touch or wheel listener. But now, thanks to your optimization, this will not be necessary.

''does not use passive listeners to improve scrolling performance'' warning
”does not use passive listeners to improve scrolling performance” warning

This problem now can only happen again for non-passive listeners. The example above is for eventlisteners. But do not worry, you can also optimize the scrolling performance on the mobile device by following the same steps for touch event listeners.

What Does ‘’Does not use passive listeners to improve scrolling performance’’ Mean?

The message you see above is actually the warning message sent to you as a result of Google Lighthouse’s audit. When you receive this warning message, you will be able to solve the problem step by step using passive and capture.

What Does ‘’Does not use passive listeners to improve scrolling performance’’ Mean?
What Does ‘’Does not use passive listeners to improve scrolling performance’’ Mean?

Note that when a situation called scroll jank occurs within a page, it is a performance issue. Therefore, it is very likely that you will see such a warning when entering performance audits via Google Lighthouse. Through Screpy, you can regularly scan your website’s performance and see what you need to fix through tasks.

Remember, it’s not enough to use Passive Event Listeners to fix all the performance issues of your site. At the same time, reducing and breaking long-running Javascript files can positively affect your overall performance. It is about a limited space that Passive Event Listeners does.

How to Improve Scrolling Performance If The Browser Doesn’t Support Passive Event Listeners?

If you want to improve scrolling performance without using passive event listeners for non-modern and currently unused browsers, use the following tools:

  • Feature detection: Feature detection can be defined as a technique that can be used in the world of web development to determine which functions the environment used can and cannot.
  • Polyfill: Polyfill’s main purpose, produced using Javascript, is a tool used to add some functions of modern browsers to outdated and outdated browsers. This is often referred to as a browser fallback.

Test Your Website Issues

You can quickly analyze your site

Screpy Divider