SEO Post no261

Read Our SEO POST, on 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 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.

For example, 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 – www.freepik.com

Related tags:
Back to SEO Blog

Mar 2021
Some parts of this website are under development, like this dummie post!

Photo credit Senivpetro / Freepik

Our Blog is still under development...

... 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.

Θα χαρώ ιδιαιτέρως, αν λάβω από εσάς 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.