1分で実装！WordPress標準搭載のjQuery本体コードをCDNに変更する方法

みなさんこんにちは！エンジニアの高澤です！

今回はWordPress標準搭載のjQuery本体コードをCDNに変更する方法について解説していきたいと思います。

当記事の実装が必要になる場面

当記事の内容が必要になる場面は以下の内容になるかと思います。

• jQuery本体コードをCDNにしてページスピードを向上させたい
• 実装上の都合で、CDNに変更したい

上記のような場面で必要になる可能性があります。

jQueryをCDNに変更するメリット

WordPressで標準搭載のjQueryをCDN（Content Delivery Network）に変更することには、いくつかのメリットがあります。

CDNに変更するメリットは、特にWebサイトのパフォーマンスやユーザー体験の向上に関連しています。以下、わかりやすく詳しく説明します。

キャッシュの利用

CDNを使用することで、多くのユーザーがすでに同じCDNからjQueryをロードしている場合、そのファイルはすでにブラウザのキャッシュに保存されています。これにより、ユーザーは再度ダウンロードする必要がなく、ページの読み込み速度が向上します。

例えば、多くのWebサイトが同じCDN（たとえば、GoogleやjQuery公式のCDN）からjQueryを読み込んでいる場合、ユーザーのブラウザはすでにそのファイルをキャッシュしていることが多いです。

キャッシュされていることにより、閲覧されているサイトではそのファイルの読み込みが不要になる可能性が高くなり、余計な読み込みがなくなります。

サーバー負荷の軽減

jQueryファイルを自分のサーバーからではなくCDNから配信することで、あなたのWebサーバーへのリクエストが減少します。これにより、サーバーの負荷が軽くなり、他のリソースに割り当てられる帯域幅が増えます。

つまり、サーバーのパフォーマンスが向上し、トラフィックの多いサイトや共有ホスティングを使用している場合でも安定した運用が可能になります。

高速なコンテンツ配信

CDNは世界中にサーバーが分散しており、ユーザーの地理的な場所に最も近いサーバーからファイルを配信するため、ファイルの読み込みが高速化されます。

例えば、閲覧しているサイトのユーザーが日本にいる場合、CDNは最も近いサーバー（たとえば、日本国内のサーバー）からjQueryファイルを提供します。これにより、応答時間が短縮されます。

ダウンロードの安定性と信頼性

大手のCDNは高い稼働能力を持っており、停電やサーバーダウンなどが発生しにくい環境でjQueryを提供しています。これにより、jQueryファイルのダウンロードが安定して行われ、ユーザーがスムーズにサイトを閲覧できるようになります。

例えば大手のCDNといえるGoogle CDNやjQuery公式CDNなどは、大規模なインフラストラクチャによって支えられており、非常に安定しています。

SEOやランキングへの影響

ページの読み込み速度は、検索エンジン（特にGoogle）のランキング要素の一つです。CDNを使用してjQueryのロードを高速化することで、ページのパフォーマンスが向上し、結果的にSEOにもプラスの影響を与える可能性があります。

複数サイトでのバージョン管理が容易

CDNを利用することで、WordPressが標準で使用しているjQueryのバージョンを超えて、特定のバージョンを指定して使うことができます。また、他のプラグインやテーマが異なるバージョンを要求しても、CDN上でバージョンを簡単に変更できます。

実装する方法

それでは早速実装する方法について解説していきたいと思います。

wp_enqueue_scriptsフックで実装

新しいスクリプトやスタイルの読み込みにはwp_enqueue_scriptsフックを使用し、WordPress のスクリプト管理機能を活用するのが推奨されます。

以下のコードをfunctions.phpにコピー＆ペーストしてください。

<?php
function custom_load_scripts() {
    if (!is_admin()) {
        // jQueryの登録を解除
        wp_deregister_script('jquery');

        // jQueryをGoogle CDNから読み込む
        wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js', array(), null, false);
    }
}
add_action('wp_enqueue_scripts', 'custom_load_scripts');

wp_enqueue_scriptsフックの目的等は以下になります。

wp_enqueue_scriptsフックで実装（jQuery UIを含めた場合）

wp_enqueue_scriptsフックを使ったスクリプトやスタイルシートの読み込みで、jQuery本体と合わせてjQuery UIも読み込みたい場合は以下のソースコードが使えます。

jQuery UIを利用したい場合はこちらをお使いください。

以下のコードをfunctions.phpにコピー＆ペーストしてください。

<?php
function custom_load_scripts() {
    if (!is_admin()) {
        // jQueryの登録を解除
        wp_deregister_script('jquery');

        // jQueryをGoogle CDNから読み込む
        wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js', array(), null, false);

        // jQuery UIのsortableを読み込む
        wp_enqueue_script('jquery-ui-sortable');
    }
}
add_action('wp_enqueue_scripts', 'custom_load_scripts');

wp_print_scriptsフックで実装（非推奨）

wp_print_scriptsフックは古いコードや既存のテーマ・プラグインで使われていることがありますが、新規の開発や更新であればwp_enqueue_scriptsフックを利用することが推奨されます。

推奨はしませんが、ご参考までに以下のコードを掲載しておきます。

<?php
function custom_print_scripts() {
	if (!is_admin()) {
		//デフォルトjquery削除
		wp_deregister_script('jquery');

		//GoogleCDNから読み込む
		wp_enqueue_script('jquery-js', 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js' );
	}
}
add_action('wp_print_scripts', 'custom_print_scripts');

wp_print_scriptsフックの目的等は以下になります。

それぞれのコードは、WordPressの管理画面以外、つまりサイトページ表示時にCDNのjQuery本体コードをロードし、WordPress標準搭載のjQuery本体コードの読み込みを無効化しています。

これにより、Google の CDN から最新バージョンの jQuery を使用することができます。

wp_enqueue_scriptsフックと wp_print_scriptsフックはスクリプトの読み込みにおける違いがあり、適切に使用することで WordPress のパフォーマンスと保守性を向上させることができます。

まとめ

WordPress標準搭載のjQuery本体コードをCDNに変更する方法について解説は以上になります。

CDNにjQueryを変更することは、サイトのパフォーマンスを向上させ、サーバーの負荷を軽減し、SEOの向上に貢献するなど、さまざまなメリットがあります。特に、大量のユーザーが訪れるサイトや、グローバルなユーザー層をターゲットとする場合には、CDNを活用することでユーザー体験の向上が期待できます。

これらのメリットを踏まえて、WordPressでCDNを使ってjQueryを提供することは、多くのサイトで推奨されるアプローチです。

よろしければぜひお仕事にお役立ていただけましたら幸いです。