WordPressサイトのパフォーマンスを最適化する方法は多数あります。例えば、絵文字の無効化はちょっとした最適化のひとつです。絵文字を使用することで、文章をポップにしたり表現を加えたりすることができますが、WordPressサイトに本当に必要かどうかを考えてみてください。特に企業サイトの場合は不要なことが多く、無効にしなければ読み込み時間に影響を与えます。

WordPress 4.2で組み込まれた古いブラウザ用の絵文字サポートは、wp-emoji-release.min.jsファイルを読み込むことから、WordPressサイトにHTTPリクエストが増えるのが厄介です(しかも全ページで読み込まれる)。このファイルはわずか10.5KBですが、塵も積もれば山となるもの。

wp-emoji-release.min.jsファイル
wp-emoji-release.min.jsファイル

WordPressで絵文字を無効にする方法

WordPressで絵文字を無効にするには、以下2つの方法があります。

1.プラグインを使ってWordPressの絵文字を無効にする

絵文字を無効化する最初の方法は、Ryan Hellyer氏が開発した無料プラグインDisable Emojisを使用することです。

Disable Emojisプラグイン
Disable Emojisプラグイン

Disable Emojisプラグインは9KBと超軽量で、本記事執筆時点で3万以上のアクティブインストール、5つ星の満点評価を得ています。注)このプラグインは古いブラウザでの絵文字サポートに追加される余計なJavaScriptファイルを削除してくれるもので、絵文字自体は組み込まれているブラウザで動作します。

WordPressのリポジトリからダウンロードするか、WordPress管理画面の「プラグイン」>「新規追加」から検索してインストールします。有効化するだけで、不要なJavaScriptファイルが削除されます。

マルチサイトにも対応しているEmoji Settingsというプラグインを使用することも可能です。

Emoji Settingsプラグイン
Emoji Settingsプラグイン

WordPressのリポジトリからダウンロードするか、WordPress管理画面の「プラグイン」>「新規追加」から検索してインストールします。有効化したら、左側メニューの「投稿設定」を開いて「Enable emoji support(絵文字サポートの有効化)」のチェックを外すだけで絵文字が無効になります。

また、Perfmatters(Kinstaの社員が開発)のような有料プラグインでもOKです。

Perfmattersプラグインで絵文字を無効化
Perfmattersプラグインで絵文字を無効化

2.コードを編集してWordPressの絵文字を無効にする

プラグインをインストールしたくなければ、コードを編集して絵文字を無効にすることもできます。この方法を選択する場合、まずは念のためにサイトのバックアップをとり、テーマを更新しても変更が失われないようにするために子テーマを作成します。それから、子テーマのfunctions.phpファイルに以下を貼り付けてください。注)コードは上記のDisable Emojisプラグインから引用しています。

/**
 * 絵文字を無効にする
 */
function disable_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_emojis' );

/**
 * tinymceの絵文字プラグインを削除するためのフィルター関数
 * 
 * @param array $plugins 
 * @return array 2つの配列の差分を返す
 */
function disable_emojis_tinymce( $plugins ) {
 if ( is_array( $plugins ) ) {
 return array_diff( $plugins, array( 'wpemoji' ) );
 } else {
 return array();
 }
}

/**
 * DNSプリフェッチのヒントから絵文字のCDNホスト名を削除する
 *
 * @param array $urls リソースヒントとして出力するURLのリスト
 * @param string $relation_type URLが出力される関係タイプ
 * @return array 2つの配列の差分を返す
 */
function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) {
 if ( 'dns-prefetch' == $relation_type ) {
 /** このフィルターは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;
}