WordPressサイトのパフォーマンスを最適化する方法は多数あります。例えば、絵文字の無効化はちょっとした最適化のひとつです。絵文字を使用することで、文章をポップにしたり表現を加えたりすることができますが、WordPressサイトに本当に必要かどうかを考えてみてください。特に企業サイトの場合は不要なことが多く、無効にしなければ読み込み時間に影響を与えます。
WordPress 4.2で組み込まれた古いブラウザ用の絵文字サポートは、wp-emoji-release.min.jsファイルを読み込むことから、WordPressサイトにHTTPリクエストが増えるのが厄介です(しかも全ページで読み込まれる)。このファイルはわずか10.5KBですが、塵も積もれば山となるもの。
WordPressで絵文字を無効にする方法
WordPressで絵文字を無効にするには、以下2つの方法があります。
1.プラグインを使ってWordPressの絵文字を無効にする
絵文字を無効化する最初の方法は、Ryan Hellyer氏が開発した無料プラグインDisable Emojisを使用することです。
Disable Emojisプラグインは9KBと超軽量で、本記事執筆時点で3万以上のアクティブインストール、5つ星の満点評価を得ています。注)このプラグインは古いブラウザでの絵文字サポートに追加される余計なJavaScriptファイルを削除してくれるもので、絵文字自体は組み込まれているブラウザで動作します。
WordPressのリポジトリからダウンロードするか、WordPress管理画面の「プラグイン」>「新規追加」から検索してインストールします。有効化するだけで、不要なJavaScriptファイルが削除されます。
マルチサイトにも対応しているEmoji Settingsというプラグインを使用することも可能です。
WordPressのリポジトリからダウンロードするか、WordPress管理画面の「プラグイン」>「新規追加」から検索してインストールします。有効化したら、左側メニューの「投稿設定」を開いて「Enable emoji support(絵文字サポートの有効化)」のチェックを外すだけで絵文字が無効になります。
また、Perfmatters(Kinstaの社員が開発)のような有料プラグインでもOKです。
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;
}