【スポンサーリンク】

【検討中】 jquery-migrateを減らしてみたけど、戻した [WordPress]

この項目は、随時追記します。なにかのヒントになれば嬉しいです。

PageSpeed Insightsで「レンダリングを妨げるリソースの除外」を見てみると、jqueryに関する2つのスクリプトが目につきました。

  • (Google CDN)jquery.min.js?ver=3.6.1
  • (Cloudflare CDN)jquery-migrate.min.js?ver=3.0.1

これを除外できないか試みてみました。

\記事が役に立ったらシェアしてね/
【スポンサーリンク】

jQueryスクリプトを入れ替え

jQueryのスクリプトを入れ替えてみます。

(参考)
function refresh_jquery_script() {
  wp_deregister_script('jquery');
  wp_enqueue_script('jquery',
    'https://code.jquery.com/jquery-3.7.0.slim.min.js', 
     array(), '3.7.0');
}
add_action( 'wp_enqueue_scripts', 'refresh_jquery_script' );

「レンダリングを妨げるリソースの除外」をみると、jQueryが一か所になり、0.82s → 0.63s に改善しました。

defer

ちなみに、もし スクリプトの読込みで defer を付加するなら、add_filter の ‘script_loader_tag’ で実行します。

add_filter('script_loader_tag', 'add_defer', 10, 2);
function add_defer($tag, $handle) {
  // 識別名がmain_script以外はそのまま返却
  if ($handle !== 'main_script') {
    return $tag;
  }

  // deferを追加して返却する
  return str_replace(' src=', ' defer src=', $tag);
}

ただ、jqueryはほかの機能の土台になっているので、読込みが遅くなるとほかのスクリプトが動きません。このままにしておきます。

うまく動かない

ところが、画面移動をスクロールで移動する表示が、一瞬になってしまいました。

下記のコードのjQueryがうまくいっていないようです。

/** 目次からスクロール */
JQuery(function(){
    var windowWidth = JQuery(window).width();
    var headerHeight = 100; 
    JQuery('a[href^=#]').click(function() {
		var speed = 300;
		var href= JQuery(this).attr("href");
		var target = jQuery(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top-headerHeight;
		JQuery('body,html').animate({scrollTop:position}, speed, 'swing');
		return false;
	});
});

ちなみに、WordPressの名前空間では $ は使えないので、JQueryで呼び出しています1

機能の互換性を補う jquery-migrateがなくなったからかもしれません。

jquery-migrateは、jqueryのバージョン1.9で廃止になった機能を補うプラグインです。(…)

プラグインによっては正常に動かなくなる可能性があるので実際に動かしてから確認します。

WordPressでjqueryとjquery-migrateの2つの読み込みを解除する方法 | Musible

migrate

最新の migrateを追加してみました。

/**  jquery-migrateを減らした 2023-07-02 */
function refresh_jquery_script() {
  wp_deregister_script('jquery');
  wp_enqueue_script('jquery',
    'https://code.jquery.com/jquery-3.7.0.slim.min.js', 
     array(), '3.7.0');
  wp_enqueue_script('jquery',
    'https://code.jquery.com/jquery-migrate-3.4.1.min.js', 
     array(), '3.4.1');
}
add_action( 'wp_enqueue_scripts', 'refresh_jquery_script' );

しかし、それでもダメでした。

スクロールのコードを、ざっと書き直してみましたが、それでも動きません。

結局、あまり高速化の効果がなくて、かえって動作が不安定になるので、JQueryのコードを変更するのは取りやめました。

今回は、試行錯誤したものの元に戻ってしまいました。

(補足)

  1. WordPressでjQueryが動作しない場合【jQuery/WordPress】 | ウェブ倉庫
QRコードを読み込むと、関連記事を確認できます。
【検討中】 jquery-migrateを減らしてみたけど、戻した [WordPress]
【スポンサーリンク】
タイトルとURLをコピーしました