WordPressの jQuery を jsDelivr に変えてみたけれど（CDNとパフォーマンス）

WordPressのjQueryの読込みを高速化するために、CDNの jsDeliver に変更してみました。
しかし、結果としてはほとんど違いは出てきませんでした。
WordPressデフォルトのGoogle Cloud CDN 自体がすでに高速なCDNだったようです。

1. jQueryがメインスレッドをブロックしている

Chromeの開発モードでパフォーマンスを見ていたら、「第三者コードの影響を抑えてください」という診断が目につきました。

jqueryライブラリの読み込みに時間がかかっているようです。

第三者コードの影響を抑えてください – 第三者コードによってメインスレッドが 1,180 ミリ秒間ブロックされました

コード	転送サイズ	ブロック時間
https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js?ver=3.6.1	31 KiB	1,185 ms
https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.3.2/jquery-migrate.min.js?ver=3.0.1	4 KiB	0 ms

目次に戻る

2. 高速なCDNなら jsDelivr？

CDNで高速なドメインを調べてみると、jsDelivrが有力なようです。

ライブラリ配信なら jsDelivr 一択！（…）
CDN の中でも爆速です。
ライブラリ用 CDN は jsDelivr が無料 & 爆速で、これだけあれば十分 – 自主的20%るぅる（2019.08.26）

「CDN」とは？（サイト高速化）

「CDN（Content Delivery Network）」は、サーバ負荷を分散させて、インターネット上のコンテンツを高速に配信する仕組みです。CDN は世界各地にサーバを分散させて設置した大きなシステムです。コンテンツを配信するときに、アクセスするユーザーに近いサーバから送信してダウンロード時間を短縮します。

jQueryのバージョンを同じもので、jsDelivrから読み込んでみたいと思います。
jsDelivr から jQuery 3.6.1を読み込むには、以下のURLを使います。

https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js

jquery CDN by jsDelivr – A CDN for npm and GitHub

目次に戻る

3. WordPressのjQueryを変更する

WordPressで使われる jQuery を変更するには、functions.php で wp_enqueue_scripts にアクションを追加します。いったん、既存のコードを解除して、再登録すればよいわけです¹。

add_action( 'wp_enqueue_scripts', function() {
    if ( is_admin() ) {
        return; // 管理画面は変更しない
    }

    if ( ! wp_script_is( 'jquery', 'registered' ) ) {
        return; // jqueryがない
    }

    // jqueryの登録解除
    wp_deregister_script( 'jquery' );
    wp_deregister_script( 'jquery-core' );
    wp_deregister_script( 'jquery-migrate' );

    $new_ver = '3.6.1';

    // jquery-core, jquery-migrateのエイリアス
    wp_register_script( 'jquery', false, [ 'jquery-core', 'jquery-migrate' ], $new_ver );

    //JQueryの登録
    $src = 'https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js';
    wp_register_script( 'jquery-core', $src, [], $new_ver );

    // JQuery migrateの登録
    $new_ver = '3.0.1';
    $src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.3.2/jquery-migrate.min.js?ver=3.0.1';

    wp_register_script( 'jquery-migrate', $src, [], $new_ver );
} );

目次に戻る

4. 結果：あまり変わらなかった

結果をみると、ちゃんと JSDelivr CDN から jqueryを読み込むことができました。
しかし、読み取り時間がほとんど変わっていません。

jquery.min.jsの読み取り時間

Google CDN：1,185 ms
JSDelivr CDN：1,080 ms

コード	転送サイズ	ブロック時間
https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js	32.1 KiB	1,080 ms
https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.3.2/jquery-migrate.min.js?ver=3.0.1	4.0 KiB	780 ms