WordPress has been constantly improving with new and exciting features in each new edition. Some of these new features range from something really small to very substantials updates. Starting from version 4.2, for example, WordPress added support for new Emojis. In general emojis and smiley allow you write more fun posts.
The thing is, on the web, Emojis are essentially just a set of javascript and images files. The files that contain these add multiple requests to your WordPress site. It’s all fun and games until your site starts loading slowly.
We at WPLobster.com are strong believers in Web Performance and are fully convinced that if you don’t need a resource on the website, it should be taken away. Ilya Grigorik, web performance engineer at Google; co-chair of W3C Webperf WG, once said that
No bit is faster than one that is not sent; send fewer bits.
As Ilya says, the fastest and easiest way to improves the speed of your website is to send as little data over the wire as possible. You don’t want your website to load files that you might not be using.
For WordPress to display an Emoji, WordPress loads a script with the file name wp-emoji-release.min.js, as part of the requests. That is the script that we are going to try to prevent from loading on the web page when it loads. Below is a screenshot of the script loading on a website that doesn’t have disabled.
Approach #1: Using WordPress Hook in the functions.php
If you don’t want to install another plugin, you can also just disable emojis with code. Simply add the following to your WordPress Theme’s functions.php file. If you don’t know what function.php is, it’s one of the core functions of your theme and the code in there executes on every request. It’s a very useful place to put code that needs to fun at any time.
/**
* Disable the emoji's
*/
function disable_wordpress_emojis() {
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('admin_print_styles', 'print_emoji_styles');
remove_filter('the_content_feed', 'wp_staticize_emoji');
remove_filter('comment_text_rss', 'wp_staticize_emoji');
remove_filter('wp_mail', 'wp_staticize_emoji_for_email');
add_filter('tiny_mce_plugins', 'disable_emojis_tinymce');
add_filter('wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2);
}
add_action( 'init', 'disable_wordpress_emojis' );
/**
* Filter function used to remove the tinymce emoji plugin.
*
* @param array $plugins
* @return array Difference betwen the two arrays
*/
function disable_emojis_tinymce( $plugins ) {
if ( is_array( $plugins ) ) {
return array_diff( $plugins, array( 'wpemoji' ) );
} else {
return array();
}
}
/**
* Remove emoji CDN hostname from DNS prefetching hints.
*
* @param array $urls URLs to print for resource hints.
* @param string $relation_type The relation type the URLs are printed for.
* @return array Difference betwen the two arrays.
*/
function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) {
if ( 'dns-prefetch' == $relation_type ) {
/** This filter is documented in wp-includes/formatting.php */
$emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/2/svg/' );
$urls = array_diff( $urls, array( $emoji_svg_url ) );
}
return $urls;
}
Approach #2: Using A WordPress Plugin
If for some reason you are not able to make changes to the functions.php file of your theme, there is another alternative. There are a collection of plugins in the WordPress plugin repository that can allow you to do that without touch any piece of code.
The plugins essentially perform the same function, and most of them contain the exact same code as described above. While we tend to discourage the use of plugins for such small changes, we totally understand and have seen scenarios where it’s impossible to make the change in the function.php file.
There are 3 major plugins that allow you to do this effectively.
Disable Emojis
Disable WP Emojis
Disable Emojis
Just like all other plugins, you just need to download them, install it and then activate it. You will be able to see it in your admin/settings page.
We hope you learnt something new from this post. Feel free to reach out to one of our experts to talk about the best ways we can help you speed up your website and troubleshoot any website issues you might be facing. If you enjoyed reading this article or it was a helpful resource, then please share it or leave a comment below and let us know what you think.
