WordPressでjqueryとjquery-migrateの2つの読み込みを解除する方法
サイトのソースコードを確認したら、jQueryが2つ読み込まれていました。それぞれ、jqueryとjquery-migrateというものです。バージョンも違っていて、そもそもそういう設定をした覚えがないのに読み込まれているのはなんでだろう、と疑問に思ったのが今回の経緯です。
そこからjquery-migrateの読み込みを解除して、ついでにバージョンを最新のものにすることにしました。そのやり方を紹介します。
当サイトではアフィリエイト広告を利用しています。
リンクや画像に広告が含まれている場合があることを予めご了承ください。
まずはソースコードを確認
ブラウザで該当ページを開き、右クリック > 『ページのソースを表示』を左クリックするとソースコードが見られます。
<script type='text/javascript' src='https://musible.net/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
ソースコードの該当部分を確認してみると上記にように記述されています。
jquery1.12.4とjquery-migrate1.4.1が読み込まれています。
jqueryとjquery-migrateの違い
jqueryは今では説明する必要が無いほど知れ渡っているのでここでは割愛します。
jquery-migrateは、jqueryのバージョン1.9で廃止になった機能を補うプラグインです。
そもそも、jQueryのバージョン1.9が出た時に廃止になった機能があります。しかし、廃止になった機能を使っていた場合は正常に動作しなくなります。それを動かせるようにフォローするのが、jquery-migrateです。
バージョンごとによる違いはなんなのか？
今回はjquery-migrateの解除ついでに、バージョンを現時点での最新である3.4.1にします。
バージョンを1から3にアップデートするのですが、一気に上げても大丈夫なのかを考えなくてはなりません。なので、まずはjQueryのバージョンの違いを認識しておきましょう。
バージョン1と2の違い
バージョン1系とバージョン2系は対応しているブラウザが違います。バージョン2系は古いブラウザに対応していないので機能させることができなくなります。
バージョン2と3の違い
バージョン2系とバージョン3系は対応ブラウザは同じながらも設計に違いがあって、単純に性能が上がっています。ただし、その分、一部廃止されたメソッドがあって、それを使ったプログラムだと正常に動かなくなります。
バージョン移行するなら、この2つの違いをしっかり認識しておく必要があります。
自分のサイトとの影響を考える
jquery-migrateとjQueryのバージョンの違いを把握したら、次は実際に自分のサイトに与える影響を考えていきます。
私のサイトではバージョン1系統を使っていましたが、そもそも古いブラウザで閲覧している人がほとんどいないんですよ。アクセス解析を使って閲覧状況を確認しました。
次に3へ移行する際の廃止機能ですが、私のサイトは自分で作ったオリジナルテーマを使用していて、制作時にはある程度デザインに関する経緯や注意点などのメモを残しています。それを見直して、トラブルが起きそうかどうかを精査しました。その結果、問題ないことがわかりました。
後はWordPressのプラグインによる影響。jquery-migrateについても同様です。
こればかりは実際に稼働させて確認することになります。自分でHTMLなどをマークアップした部分では影響が出ないことはわかるのですが、プラグインによっては正常に動かなくなる可能性があるので実際に動かしてから確認します。まあ、プラグインもアップデートを日々繰り返していますし、廃止になった機能をいつまでも放置しておくとは思えませんけどね。
以上の理由により、バージョンアップを行うことにしました。
jquery-migrateの読み込みを解除する方法
function.phpに以下の記述を追記するだけ
function my_scripts_method() {
wp_deregister_script('jquery');
wp_enqueue_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', array(), '3.4.1');
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
ちなみにこれはjQueryを外部から読み込む方式です。今までは自分のサーバーに保存していたデータを読み込んでいました。
どちらにもメリット・デメリットはありますが、どうやら外部からの方が速度面で良いらしく、なおかつjQueryのデータを管理する手間が減るので、こちらを採用しました。
バージョンは現時点での最新である『3.4.1』です。他のバージョンにしたいなら、この数字部分を変えていきます。試しに『1.9.0』に変えてみて下さい。読み込むバージョンが変わるはずです。
結果を確認
読み込み前と比較すると、2つあった記述が1つになって、かつ『3.4.1』を外部から読み込んでいます。リンク先を確認したら、ちゃんとそのバージョンになっています。これで変更は完了。
サイトの最終確認
予想外のトラブルやエラーが出るなんてことはよくあります。確実に大丈夫と言えるのは、実際に確認してからです。
確認ブラウザ
- Google Chrome
- Firefox
- Microsoft Edge
- Internet Explorer
私のパソコンに入っているそれぞれのブラウザで確認しましたが、エラーやトラブルは見つかりませんでした。
jQueryのバージョンによる機能の違いは事前に確認していましたが、自分のサイトがちゃんと正常に動くのを確認するまではちょっと心配でした。問題なさそうでよかったです。
一応、今後も経過観察はしていこうと思います。備えあれば患いなし、ですから。
読み込み容量を約19KB削減
95KB：jquery.min 1.12.4
10KB：jquery-migrate.min 1.4.1
↓
86KB：jquery.min 3.4.1
廃止された機能を使わない場合はjquery-migrateは必要ありません。jquery単体だけで大丈夫ならこの読み込みは不要になります。不要であれば、読み込みを解除すると良いです。読み込むデータ量が減るとそれだけページの表示速度が速くなるので利益になります。私のサイトでは結果的に19KBの削減に成功しました。
よりよいサイトにするために
jqueryとjquery-migrate、この2つの読み込みは知らないうちにそうなっていました。たぶんWordPressのバージョンアップ時にそういう仕様になったのではないかと予想します。
私自身、そういう設定をした覚えもないので、jQueryのバージョンアップに伴って、トラブルが起きないようWordPressが気を利かせてくれたのかなと。
とはいえ、サイトによってはそれが必要ない場合もあります。余計な読み込みをすると表示速度が遅くなるので、いらないなら削除した方が良いと思います。上手く動作しない部分が出て来たら元に戻せばいいだけですし。
余計な読み込みを抑えればページの表示速度が速くなり、より快適なサイトになります。こういったことは気が付いた時になるべく速やかに対処していきたいものですね。サイトがより良くなるならそれに越したことはないですから。
