【検討中】 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

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

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 に改善しました。

1-1. 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はほかの機能の土台になっているので、読込みが遅くなるとほかのスクリプトが動きません。このままにしておきます。

2. うまく動かない

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

下記のコードの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で呼び出しています¹。

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

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

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

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

3. 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のコードを変更するのは取りやめました。

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

こちらもどうぞ。

LiteSpeed CacheがアップデートされてJQueryが遅延読込みされている 【ただしサイトスピードは高速化】

ほとんどタイトルが全てなんですが、LiteSpeed Cacheプラグインのアップデートについてメモしておきます。プラグインのアップデート一つでこんなに変わるんですね。LiteSpeed Cacheのバージョンが3.5.0.1にアップグレードされたLiteSpeed CacheはWordPressのプラグインで、mixhostサーバーではサイトスピード向上のために利用することができます。最近（2020年9月29日）バージョンが3.4.2→から3.5にアップデートされました。そ...

chiilabo.com

[JavaScript]JQueryとdocument、どっちを使う？【HTML5】

インターネットの情報の特徴として、新しい情報も過去の情報も混在しています。過去の情報を元にした新しい記事もあるため、「何が最新なのか」わかりにくい面があります。JavaScriptでウェブページの要素にアクセスしようと、インターネットで検索すると、「JQueryを使った方法」と「document」を使った方法が出てきます。そこで悩むのが、いったい どっちを使う方がよいのか、ということです。JQueryとgetElementBy〜例えば、idセレクタからDOM要素にアクセスする...

chiilabo.com

1. WordPressでjQueryが動作しない場合【jQuery/WordPress】 | ウェブ倉庫

QRコードを読み込むと、関連記事を確認できます。