[SOLVED] Uses Passive Event Listeners to Improve Scrolling Performance (PS1.7.4.2)

[DARKF3D3]

Google recommend using Passive Event Listeners to Improve website Scrolling Performance:

https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners

In particular, regards of my website (using classic theme), it highlighted these lines:

/themes/core.js ----------------------------------------------------- line: 946
/content.js(dkpejdfnpdkhifgbancbammdijojoffk) -------- line: 42
/content.js(dkpejdfnpdkhifgbancbammdijojoffk) -------- line: 89
/content.js(dkpejdfnpdkhifgbancbammdijojoffk) -------- line: 161

 

Do you know if it's safe to do this and how this can be done?

Edited September 13, 2021 by DARKF3D3 (see edit history)

[Gerardo Martinez G]

https://www.npmjs.com/package/default-passive-events

[duredo]

On 3/21/2021 at 5:08 PM, Gerardo Martinez G said:

https://www.npmjs.com/package/default-passive-events

thanks, was looking for this

[DARKF3D3]

Thank you, so to implement that I have to upload via ftp "default-passive-events" folder and then simply add into head.tpl file this line of code?

<script type="text/javascript" src="node_modules/default-passive-events/dist/index.js"></script>

 

[duredo]

or add the script to themes/yourtheme/assets/js/custom.js

Edited September 8, 2021 by dosbiner (see edit history)

[DARKF3D3]

You mean adding place the code from /default-passive-events/dist/index.js into my theme custom.js file?

var e,t=["scroll","wheel","touchstart","touchmove","touchenter","touchend","touchleave","mouseout","mouseleave","mouseup","mousedown","mousemove","mouseenter","mousewheel","mouseover"];if(function(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t),window.removeEventListener("test",null,t)}catch(e){}return e}()){var o=EventTarget.prototype.addEventListener;e=o,EventTarget.prototype.addEventListener=function(o,r,n){var s,a="object"==typeof n&&null!==n,i=a?n.capture:n;(n=a?function(e){var t=Object.getOwnPropertyDescriptor(e,"passive");return t&&!0!==t.writable&&void 0===t.set?Object.assign({},e):e}(n):{}).passive=void 0!==(s=n.passive)?s:-1!==t.indexOf(o)&&!0,n.capture=void 0!==i&&i,e.call(this,o,r,n)},EventTarget.prototype.addEventListener._original=e}
//# sourceMappingURL=index.js.map

 

[duredo]

Use from this script https://unpkg.com/default-passive-events

[DARKF3D3]

Thank you, It worked.

[guanooo]

Thank you so much for the question and for the solution. I can confirm that it worked with PS 1.7.8.7. 😍

[Mehrshad Zakerian]

On 9/11/2021 at 6:03 PM, duredo said:

Use from this script https://unpkg.com/default-passive-events

Thanks, this solution worked. For theme developers, you can simply create a file called anything (like passive-listener.js) inside your theme directory/_dev/assets/js/lib folder and paste the contents from the link above (https://unpkg.com/default-passive-events) and inside your theme/_dev/assets/js/theme.js file import it, that's it!

Many thanks to @duredo