New WordPress Plugin Serves Pre-Compressed Emoji

compressed-emoji

WordPress emoji are served from s.w.org, but they are not compressed. This impacts the SVG loading time, depending on how many emoji you are using, and can even throw warnings on Google’s PageSpeed Insights tool. Turkey-based WordPress developer Mustafa Uysal has just released Compressed Emoji, a plugin that makes use of the emoji_svg_url filter introduced in 4.6. This filter allows developers to change the URL for where emoji SVG images are hosted.

When the plugin is activated, the compression offers savings in the range of 3kb ~ 1.3kb (roughly %60) per emoji.

emoji-compressed-comparison

Uysal said he hopes WordPress.org will consider compressing emoji in the future, especially since approximately 10% of the web is using WordPress 4.6. Compressing emoji is a small way to speed up a sizeable chunk of the web. A ticket was created on Trac four months ago, requesting cache headers for emoji files and compression. According to Gary Pendergast, the change is something that can be made outside of the WordPress core development cycle, so he closed the ticket and passed the suggestion on to the Systems team. Cache headers were added by the team, but compression was not implemented in that update.

“The current plan is to move everything to a new CDN,” Gary Pendergast reported after chatting with the Systems team. “The current CDN is a bit outdated – they don’t support HTTP/2, for example. They need to do some more testing, but it’s high on the todo list.”

In the meantime, users who want compressed emoji can use Uysal’s plugin. It compressed the files using SVGO, an open source Node.js-based tool for optimizing SVG vector graphics files. The tool removes unnecessary things like metadata, comments, hidden elements, and default or non-optimal values from the SVG files without affecting their rendering. Another advantage is it doesn’t require an internet connection for those who are developing locally.

Compressed Emoji is available in the WordPress plugin directory and is also open for contributions on GitHub.

Would you like to write for WP Tavern? We are always accepting guest posts from the community and are looking for new contributors. Get in touch with us and let's discuss your ideas.

7 Comments


  1. Why is WordPress using image based emoji instead of Unicode emoji characters? Then you wouldn’t have the problem of slow loading content in the first place. Not to say that the file size would go down a fair wack.

    Report


    1. Actually, it uses a JavaScript browser detection. The images are a fallback if the browser lacks Unicode support for the characters.

      Report


    2. The alternative, a font would be of large size. Hence WordPress does feature detection and loads the needed images in the page if the browser doesn’t support emoji.

      Report


  2. Update: s.w.org has been switched to a new CDN, which supports HTTP/2 and compression. Using the example above, the emoji drops from 3kb to 1.2kb.

    An added benefit of HTTP/2 is multiplexing – if you have multiple emoji on a page, the images will be requested simultaneously, rather than the sequential behaviour of HTTP/1.1.

    Report


  3. Thanks to this plugin. Helped remove the bloat from WordPress and reduced the number of external calls. Also improved the page loading times on pages with multiple emoji.

    Report

Comments are closed.