WordPress 6.03でお客様のウェブサイトを構築し動作確認をしていたところ、jQueryで作成した自作スクリプトの処理スピードが遅いのを発見。原因が分からず時間を浪費してしまったので、解決方法を共有します。
結論
結論から言うと、jquery-migrate.min.jsが原因でした。
動作はするけど処理スピードが遅かったため下記を試したところ、どれも関係ありませんでした。
- 作成したJSファイル内の各スクリプトをコメントアウトし、機能ごとに動作チェック
- HTML内でのjQueryの読み込み位置を変更
- 他スクリプトの読み込み順の変更
- プラグインを全て無効化
他に疑わしいのはjquery-migrate.min.jsです。
jquery-migrate.min.jsは、WordPressを使用するとデフォルトでjQuery本体と一緒に読み込まれるファイルで、jQueryで廃止になったメソッドが使用されている場合に正しく動作させるためのライブラリです。
とりあえずこのスクリプトを出力しないように設定したところ、正しく動作しました。
jQuery自体が動作しない場合はこちらをご参考ください。
対処法
WordPressでjquery-migrate.jsの読み込みを行わないようにするには、functions.phpに下記のコードを記入します。
function remove_migrate($scripts){
if(!is_admin()){
$scripts->remove('jquery');
$scripts->add('jquery',false,array('jquery-core'));
}
}
add_filter('wp_default_scripts','remove_migrate');WordPress 6.03で2022年12月現在に出力されていたjquery-migrate.min.jsのバージョンは、3.3.2でした。以前のバージョンでも今回と同じスクリプトを使用しており正しく動作していますので、このバージョンとの相性が悪いようです。
これはjquery-migrate.min.js（ver 3.3.2）が悪いのではなく、こちらで作成したスクリプトの書き方に問題があると思われますので、後日修正したいと思います。
ちなみに、こちらで作成しているスクリプトでは廃止されたメソッドを使用していませんので、jquery-migrate.min.jsを読み込まなくても表示に問題はありません。
まとめ
いかがでしたか？ スクリプトが動作しない原因は多々ありますが、今回は「動作はするけどスピードが遅い」と言うレアケース？でした。
WordPressでjQueryの動作が遅くて原因が分からずお困りの方は、とりあえずjquery-migrate.min.jsを出力しないようにしてみてはいかがでしょうか？（修正は自己責任でお願いします）
それで解決する場合は、作成したスクリプトの書き方に問題があるか、使用しているjQueryのライブラリとの相性が悪いと思われますので、対処方法も見えてくると思います。