WordPress now ships with built-in emoji support. You can think of emojis as glorified emoticons or smileys (although it’s a little more complicated than that).

How was emoji added?

Starting in WordPress 4.2, some extra javascript code is now in the <head> section of almost every WordPress site. The code looks like this:

<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"https:\/\/facetwp.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.2"}};
!function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(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>

The following scripts are then dynamically loaded:

How does it work?

The first script, twemoji.js, is a helper library. You pass in a string (or HTML node), and it replaces emoji codes (e.g. \xF0\x9F\x8D\x94) with their image equivalents (hamburger).

Next, wp-emoji.js listens for DOM changes. For newer browsers, it uses MutationObserver to call twemoji.parse(document.body) when changes are detected.

Problems

The emoji script constantly listens for changes to the DOM. This is theoretically good for AJAX-based plugins where content is being refreshed on-the-fly. However, the process of actually replacing emoji codes with images can be very slow and CPU-intensive.

FacetWP is an AJAX-based filtering plugin that refreshes content on-the-fly. Depending on how much content has changed, the page can freeze for nearly 40 seconds while the emoji script is busy processing these DOM updates.

Disable Emojis

Ryan Hellyer was nice enough to write the Disable Emojis plugin. Simply install the plugin, and your site will no longer include emoji support.

Last updated: September 10, 2024