SEO Post no261

Read Our SEO POST:

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

Learn how to SEO your Website!

Tips & Tricks about Content, Local or Technical SEO optimization for every website

Don't miss it! Read my WordPress SEO post and discover tips & trics on "How to optimize my website". Specific code optimization techniques for Pagespeed or GTmetrix reports, to speed up your WordPress and help you reach the top organic rankinks, at the first page of Google results.

Photo of post: Does not use passive listeners to improve scrolling performance, SEO techniques

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!

Browsers like Chrome normally block page scrolling during the initial page load. They block scroll until JavaScript is executed. With JavaScript already blocking the main-thread, smooth scrolling is not possible. This has a negative impact on page experience for your visitors.

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.
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. 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 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});

Note that the above code is only valid for browsers that support passive event listeners. Be very careful, you must keep a backup before doing anything. Your score will definitely increase. Sometimes, there might be a small chance, where your performance slightly decrease, in favor of structure. Decide, which metrics is better and keep or undo any changes. For enhanced performance, always minimize your .js script, you can try many tools, even online!

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 –

Related tags:
Back to SEO Blog

May 2024
This website is releted to the term: Search Engine Optimizion (SEO), or otherwise known as Digital Marketing, in English (USA, Great Britain, Ireland, Australia) or Greek!

Photo credit Image by Pixabay

Guest Posting on: Digital Marketing, from SEO experts...

... 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 στην Ελλάδα.

SEO Implementations on Websites that I helped to get a better Google Ranking

These are a few websites on which I performed SEO (Search Engine Optimization) and of course, they now get traffic from the first page of Google results.