WordPress and best practice with passive event listeners

by

So I have run an audit on a website in chrome and google says I should use passive event listeners.

I have looked through the code and identified it’s coming from the wordpress emoji integration:

[code lang=”js”]/*<![CDATA[*/window._wpemojiSettings={"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/72×72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/mysite.com.au\/blog\/wp-includes\/js\/wp-emoji-release.min.js?ver=14BexZMoP1gqvSbLZSfYigjUvfcXkroScK"}};!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,56826,8203,55356,56819),0,0),c=j.toDataURL(),b===c&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55358,56794,8205,9794,65039),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55358,56794,8203,9794,65039),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);/*]]>*/</script> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3Eimg.wp-smiley%2Cimg.emoji%7Bdisplay%3Ainline%20!important%3Bborder%3Anone%20!important%3Bbox-shadow%3Anone%20!important%3Bheight%3A1em%20!important%3Bwidth%3A1em%20!important%3Bmargin%3A0%20.07em%20!important%3Bvertical-align%3A-0.1em%20!important%3Bbackground%3Anone%20!important%3Bpadding%3A0%20!important%7D%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D’text%2Fjavascript’%3Evar%20onepress_js_settings%3D%7B%22onepress_disable_animation%22%3A%22%22%2C%22onepress_disable_sticky_header%22%3A%221%22%2C%22onepress_vertical_align_menu%22%3A%22%22%2C%22hero_animation%22%3A%22flipInX%22%2C%22hero_speed%22%3A%225000%22%2C%22hero_fade%22%3A%22750%22%2C%22hero_duration%22%3A%225000%22%2C%22is_home%22%3A%22%22%2C%22gallery_enable%22%3A%221%22%7D%3B%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> <script type=’text/javascript’>var wtilp={"ajax_url":"https:\/\/www.snowys.com.au\/blog\/wp-admin\/admin-ajax.php"};[/code]

Now I want to keep emoji support for wordpress but I want to add the passive listeners for better usability, how would I go about this.

Best Answer

Cool I came across a solution written by devlucky who provides a small piece of javascript to fix the problem.

Check out this article

This is the javascript that made the listeners passive.

[code lang=”js”](function() {
var supportsPassive = eventListenerOptionsSupported();

if (supportsPassive) {
var addEvent = EventTarget.prototype.addEventListener;
overwriteAddEvent(addEvent);
}

function overwriteAddEvent(superMethod) {
var defaultOptions = {
passive: true,
capture: false
};

EventTarget.prototype.addEventListener = function(type, listener, options) {
var usesListenerOptions = typeof options === ‘object’;
var useCapture = usesListenerOptions ? options.capture : options;

options = usesListenerOptions ? options : {};
options.passive = options.passive !== undefined ? options.passive : defaultOptions.passive;
options.capture = useCapture !== undefined ? useCapture : defaultOptions.capture;

superMethod.call(this, type, listener, options);
};
}

function eventListenerOptionsSupported() {
var supported = false;
try {
var opts = Object.defineProperty({}, ‘passive’, {
get: function() {
supported = true;
}
});
window.addEventListener("test", null, opts);
} catch (e) {}

return supported;
}
})();[/code]

[custom-related-posts title=”You may Also Like:” none_text=”None found” order_by=”title” order=”ASC”]

Leave a Comment