WP で CDN の jQuery を使う：フォールバック対応 - 1

jQuery を CDN から読み込むように変更します。CDN(Contents Delivery Network) とは、 端的に言えば、外部のサーバからコンテンツやリソースを読み込む仕組みです。 あるいはコンテンツの置いてある外部のサーバの場所、を指します。

ユーザがより高速なサーバからリソースを読み込めるようにすることは重要です。 一方でサーバ側は、そのリソースのためにネットワーク帯域を消費しなくなります。

ここでは WordPress 標準の jQuery を読み込まず、Google(CDN) から jQuery を読み込むようにします。 さらに、Google から jQuery がダウンロードできない場合には、WordPress 標準の jQuery を読み込むようにします。

WordPress で実現する方法

WordPress で実現するには次のようなコードを functions.php で実行します。 wp_enqueue_scripts アクションにフックして、CSS や JavaScript を出力する際に実行します。

function karakuri_scripts_styles()
{
    $jquery_cdn_url = 'http:\/\/ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';  
    $jquery_cdn_test = @fopen($jquery_cdn_url, "r");

    if($jquery_cdn_test)
    {
        wp_deregister_script('jquery');   
        wp_register_script('jquery', $jquery_cdn_url);
        wp_enqueue_script('jquery');
    }
}
add_action('wp_enqueue_scripts', 'sample_scripts_styles');

処理の流れを大まかに解説すると次のようになります。(1) Google の CDN にアクセスできるか確認する。 (2-1) アクセスできるとき、標準で登録されている jQuery を取り除き、Google の CDN にある jQuery の URL を登録する。 (2-2) アクセスできないとき、何もせず標準で登録されている jQuery をそのまま使う。

重要な点は、WordPress は標準で jQuery を読み込む点にあります(実行環境によって異なります)。 wp_enqueue_script 関数は登録済みの jquery が存在し、 既にwp_enqueue_script 関数によってそれが追加されているとき、実行されません。 例えば、プラグインなどが jQuery を必要とするときに、jQuery を重複させないためなどに役に立っています。

登録済みの jQuery が存在するので、CDN から jQuery がダウンロードできないときは何もしません。 一方で CDN から jQuery がダウンロードできるとき、登録済みの jQuery を削除し、新たに jQuery を登録して追加します。

実行結果を確認する

実行結果は出力されるソースコードを確認すれば良いでしょう。(Google の) CDN から jQuery が読み込めるときは次のようになります。 (読みやすさのために改行しています。)

<script type='text/javascript'
        src='http:\/\/ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=4.2.2'>
</script>

フォールバックをテストするときは、URL を少しだけ変更して、意図的にアクセスできないようにすれば良いです。 自身のサーバに設置された WordPress 標準の jQuery が読み込まれているかどうかを確認します。

<script type='text/javascript'
        src='http:\/\/ドメイン/wp-includes/js/jquery/jquery.js?ver=1.11.2'>
</script>
<script type='text/javascript'
        src='http:\/\/ドメイン/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'>
</script>

Google の CDN にある jQuery のバージョン

URL http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js の 1 の部分は、jQuery のバージョン番号です。 jQuery のバージョン番号等は状況に応じて変更します。

Google の提供する CDN ではバージョン番号に、1 を指定するとき、jQuery 1.x.x の最新のバージョンがダウンロードされます。 また、例えば 1.7 を指定するとき、1.7.x の最新のバージョンがダウンロードされます。

jQuery 2.x 系は古いブラウザへの対応を取り止め、その分だけ高速に動作するようにしたものです。 具体的には IE8(Windows7標準) などへの対応を取り止めています。

また WordPress が標準で読み込む jquery-migrate.js は jQuery 1.9 の時点で廃止された古い関数や機能を再現するための JavaScript です。 古い jQuery を導入しなければならないシチュエーションでなければ読み込む必要もないでしょう。

ユーザエージェント(ブラウザ)で実行するべきかどうか

ここでのフォールバックの実装方法は、十分に実用的な方法ですが、真に良い方法であるかどうかは検討の余地があります。

ここで提案する方法では、@fopen 関数によって jQuery が CDN からダウンロードできるかどうかを確認しています。 したがってどんな状況であっても、サーバマシン (WordPress) は少なくとも１回 jQuery にアクセスします。

一方で、ユーザエージェントによってフォールバックを実現する場合には、 予めダウンロードしたキャッシュを利用して、ダウンロードを実行しない可能性があります。

一般には、次のように記述して、ユーザエージェント(ブラウザ)によるフォールバックを実現します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
window.jQuery || document.write(‘<script src="jquery-1.11.min.js"></script>’)
</script>

ユーザエージェントによってフォールバックを実現するためには、 wp_deregister_script および wp_dequeue_script 関数を使って標準の jQuery を完全に無効化し、 head 要素内などに直接 script 要素を記述します。

ただし、この処理を行ったとしても、プラグインによって jQuery が追加される可能性があります。 一般に、head 要素に直接スクリプトを記述することは WordPress では推奨されません。 wp_enqueue_script 関数は重複するスクリプトの読み込みを抑制しますが、head 要素に直接書かれたスクリプトは対処できません。

ユーザエージェントによって jQuery のフォールバックを実現するときは、プラグインなどの動作をすべて確認します。 使い方が限定された WordPress サイトを構築する場合などは導入を検討しても良いと思います。

ページのキャッシュによって起こる致命的な問題

WordPress が出力したページをキャッシュするような仕組み(プラグイン)を導入するとき、 現在は CDN にアクセスできないものの、ページをキャッシュした時点では CDN にアクセスできた、という状況が起きる可能性があります。 そのような状況になると、ユーザが jQuery をダウンロードする手段がなくなります。