Does not use passive listeners to improve scrolling performance, SEO techniques

Provide Better UI/UX to your website’s visitors

In November 2020 GTmetrix finally got an update. Nowadays, it looks like another Lighthouse or better a twin of PageSpeed Insights. Results and fix proposals follow Google’s guidelines and all SEOs got crazy. All? Not, all…keep calm and continue reading!

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

Passive event listeners are a new feature in the DOM spec that enable developers to opt-in to better scroll performance by eliminating the need for scrolling to block on touch and wheel event listeners. Developers can annotate touch and wheel listeners with {passive: true} to indicate that they will never invoke preventDefault. This feature shipped in Chrome 51, Firefox 49.

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.

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. It gives them the impression that your page is unresponsive to their interactions.

Adding a passive: true or the (minified js equivalent) {passive:!0} 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 to Use passive listeners to improve SEO scrolling performance?

To fix this audit issue, Measure tool from web.dev propose us to consider marking our touch and wheel event listeners as passive. This way, we can improve our page’s scroll performance. By adding a passive: true or {passive:!0} flag to every event listener flagged by GTmetrix or Lighthouse you get a few points up.

Quick steps to implement the solution for passive event listeners in WordPress:

1. Open your javascript file (it is the related file that GTmetrix or Lighthouse proposes to fix and ends with the suffix .js ) with a text editor of your choice, like notepad++.
2. Then, perform a quick search by pressing on your keyboard the control button plus the button with letter F (CTRL+F).
3. Inside the pop-up window, add the term addEventListener and press “search“. You will be shown all the instances of the searched term inside your document.
4. Find every addEventListener and step by step, one after another, do your changes from {passive: false} to {passive: true} or {passive: !0} . I prefer small changes at a time, it is easier to spot any problems.

For example, find in your javascript file (e.g. jquery-1.12.4.min.js) the row with an event listener. It could be many of them. Add after the second comma, inside the parenthesis, your fix like:

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

Any Questions on how to improve SEO of your website?

You can send me your questions about GTmetrix recommended solutions or any other message related to SEO performance. I will respond with a quick advice, through the contact page

image attribution : Man vector created by upklyak – www.freepik.com

• javascript
• SEO

... Any published article or post on SEO is valid. You can follow any posted recommendations to fix your code in order to get a better score on GTmetrix or PageSpeed Insights. Whenever I find time, I continue developing my website.

Also, if you have a new SEO technique or want to publish a fantastic new SEO strategy online that converts into leads or sales, especially in the e-commerce space, please contact me and I will host your (strictly relative) article, with all proper credits to the author, for at least one month.

Moreover, I will be especially happy if I receive from you an email related to search engine optimization in Greek, which is my native language. Of course, I can provide you with any help you need and it concerns SEO in Greek or creating websites, since I have developed the Wordpress theme that you literally read from scratch. If you are an SEO specialist in Greece, share your opinion with me! So do not hesitate to contact me, I am waiting for you for any advice, question or suggestion to improve my site or anything related to SEO in Greece.

My message in Greek
Θα χαρώ ιδιαιτέρως, αν λάβω από εσάς email σχετικό με search engine optimization στα Ελληνικά, τα οποία αποτελούν τη μητρική μου Γλώσσα. Φυσικά, μπορώ να σας παράξω οποιαδήποτε βοήθεια χρειαστείτε και αφορά SEO στα Ελληνικά ή δημιουργία ιστοσελίδων, μιας και έχω αναπτύξει το Wordpress theme που διαβάζετε κυριολεκτικά από το μηδέν. Αν είστε SEO specialists στην Ελλάδα, μοιραστείτε την άποψή σας μαζί μου! Μην διστάσετε, λοιπόν, να επικοινωνήσετε, σας περιμένω για οποιαδήποτε συμβουλή, απορία ή πρόταση για βελτίωση του site μου ή οτιδήποτε σχετικά με SEO στην Ελλάδα.