WordPress

WordPressの絵文字スクリプトとjquery-migrateを外す前に確認したこと

WordPressの絵文字互換処理とjquery-migrateを、定番コードだけで止めず実ページで検証。残ったwp-emoji-stylesの停止、非推奨APIの確認、管理画面を除外した実装と約40 KBの削減を解説します。

絵文字とjquery-migrateを確認して停止する流れと約40 KB削減を示す日本人女性

WordPress高速化の記事では、絵文字用コードやjquery-migrateを止めるスニペットをよく見かけます。しかし、僕の環境ではよくある絵文字停止コードだけではCSSが残り、jquery-migrateは非推奨APIの使われ方を確認しないと判断できませんでした。実際の通信と動作を見ながら、フロント画面だけを整理しました。

WordPressの絵文字互換処理は複数の場所にある

WordPressには、環境によって絵文字を画像へ変換するための処理があります。WordPress公式の関数リファレンスでも、print_emoji_detection_script() は絵文字対応を調べるインラインスクリプトを出力し、wp_staticize_emoji() は絵文字を静的な画像要素へ変換する関数と説明されています。

僕の利用環境ではブラウザ標準の絵文字表示で問題がないことを確認しました。そこで、フロント画面と管理画面の出力、フィード、メール向けの処理を外しました。

add_action( 'init', 'mackers_disable_emoji' );
function mackers_disable_emoji() {
    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' );
}

よくあるremove_actionだけではCSSが残った

ここで終わりだと思ってページを測り直すと、絵文字用の wp-emoji-styles が残っていました。僕の環境ではスタイルとして登録されていたため、ハンドルを直接停止する処理も必要でした。

add_action( 'wp_enqueue_scripts', 'mackers_dequeue_emoji_styles', 20 );
function mackers_dequeue_emoji_styles() {
    wp_dequeue_style( 'wp-emoji-styles' );
}

変更後は、動的に読み込まれていた wp-emoji-release.min.js 22,752 Bと、HTML内のインライン処理が消えました。HTMLが約4 KB小さくなったのは、事前見積もりに入れていなかった副産物です。

jquery-migrateは警告の内容を見て判断した

WordPressでは、jquery の依存関係として jquery-core と jquery-migrate が登録されています。僕の環境ではjQuery本体が3.7.1、jquery-migrateが3.4.1でした。

移行用スクリプトを有効にした状態で警告を確認すると、検出された古い書き方は .scroll() と .click() の2件だけでした。

jQuery公式APIでは、これらのショートハンドは3.3から非推奨で、.on("scroll", handler) や .on("click", handler) への移行が案内されています。ただし、非推奨と「現在のjQuery本体から削除済み」は同じ意味ではありません。

この2つはjQuery 3.7.1本体にまだ実装があり、移行スクリプトなしでも動作することを実ページで確認しました。

管理画面を除外し、依存関係からmigrateだけ外した

フロント画面のjQuery本体は残し、依存関係から jquery-migrate だけを外しました。

add_action( 'wp_default_scripts', 'mackers_remove_jquery_migrate' );
function mackers_remove_jquery_migrate( $scripts ) {
    if ( is_admin() ) {
        return;
    }

    if ( isset( $scripts->registered['jquery'] )
        && ! empty( $scripts->registered['jquery']->deps ) ) {
        $scripts->registered['jquery']->deps = array_diff(
            $scripts->registered['jquery']->deps,
            array( 'jquery-migrate' )
        );
    }
}

管理画面を除外したのは、投稿編集やプラグイン設定まで同時に変更しないためです。

この判断はサイト固有です。警告が多数出るサイトや、古いプラグインが移行用処理へ依存しているサイトでは、そのまま外すと壊れる可能性があります。最初から停止するのではなく、警告を確認し、該当機能を操作し、コンソールエラーがないか調べる必要があります。

絵文字とjquery-migrateで約40 KB、HTMLも小さくなった

今回の一連の作業では、絵文字スクリプト22,752 B、jquery-migrate約13.6 KB、絵文字関連のインラインHTML約4 KBが削減対象になりました。

表示と動作は次のように確認しました。

  • 記事内の絵文字がブラウザ標準で表示される
  • コピーボタン26個がすべて生成される
  • jQuery 3.7.1が単独で動作する
  • ページ読み込み時と操作時のコンソールエラーが0件
  • 管理画面は今回の変更対象外

定番スニペットの行数より、確認範囲が大切

絵文字停止もjquery-migrate停止も、コード自体は短いものです。しかし、短いコードだから影響も小さいとは限りません。

絵文字は、フロント画面だけでなくフィードやメールにも処理があります。よくある remove_action() だけでは、登録済みCSSが残る環境もあります。jquery-migrateは、古いコードがあることを知らせる役目を持つため、警告を見ずに外すと問題を隠すことになります。

僕のサイトでは、対象を調べてから停止し、必要な操作を一通り確認できました。汎用コードとして貼るより、「自分のサイトでは何が検出されたか」を記録しながら進める作業だと思います。

参考リンク

参考になったらブログランキングを1回だけ押してもらえると助かります。
（1日1回でOK／匿名のまま応援できます）
人気ブログランキング ブログランキング・にほんブログ村へ FC2ブログランキング

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

トップへ戻る