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:
<script type="text/javascript">/*<![CDATA[*/window._wpemojiSettings={"baseUrl":"https://s.w.org/images/core/emoji/2.3/72x72/","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=371b19f5ae5bed67ef4d578bd7a19944"}};!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> <style type="text/css">img.wp-smiley,img.emoji{display:inline !important;border:none !important;box-shadow:none !important;height:1em !important;width:1em !important;margin:0 .07em !important;vertical-align:-0.1em !important;background:none !important;padding:0 !important}</style> <script type='text/javascript'>var onepress_js_settings={"onepress_disable_animation":"","onepress_disable_sticky_header":"1","onepress_vertical_align_menu":"","hero_animation":"flipInX","hero_speed":"5000","hero_fade":"750","hero_duration":"5000","is_home":"","gallery_enable":"1"};</script> <script type='text/javascript'>var wtilp={"ajax_url":"https://www.snowys.com.au/blog/wp-admin/admin-ajax.php"};</script>
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.
I thought about removing it like in this link and adding it manually but I don’t think this is a good idea.
Advertisement
Answer
Cool I came across a solution written by devlucky who provides a small piece of javascript to fix the problem.
This is the javascript that made the listeners passive.
(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; } })();