WP で CDN の jQuery を使う：フォールバック・キャッシュ対応 - 3

投稿日: 2015年10月21日
更新日: 2015年11月16日
タグ: jQuery

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

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

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

Hosted Libraries - Google Developers

WordPress で CDN の jQuery を読み込む方法

functions.php ファイルを編集する

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

add_action('wp_enqueue_scripts', 'theme_enqueue_scripts_styles');
function theme_enqueue_scripts_styles()
    wp_deregister_script('jquery');
    wp_register_script('jquery', '');
    wp_enqueue_script('jquery',
                      false,
                      array(),
                      null,
                      true);
}

この処理では、WordPress 標準の jQuery の登録を完全に取り除き、代わりに、空のデータに "jquery" なる ID(識別子) を追加しています。

この処理によって、テーマやプラグインからは jQuery が追加されているように見えますが、実態は何も追加されていない、という状況が作れます。また空のデータは wp_head や wp_footer 関数の実行時に出力されません。

footer.php ファイルを編集する

サイト全体の footer 要素を出力するテンプレート(テーマ)ファイルを編集します。多くの場合には footer.php ファイルでしょう。 wp_footer() 関数を実行する直前に、次のようなコードを追加します。

<script type='text/javascript' src='http:\/\/ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script>
window.jQuery || document.write('<script src="<?php echo includes_url(); ?>js/jquery/jquery.js"><\/script>');
</script>
<?php wp_footer(); ?>

wp_footer 関数からは、jQuery に依存する関数が出力される可能性があります。したがって、wp_footer 関数よりも早い段階で jQuery が読み込まれている必要があります。

1つ目の script 要素は CDN から jQuery を読み込むためのものです。2 つめの script 要素は、CDN がトラブルによって機能停止したとき、代わりに自分のサーバーから jQuery を読み込むためのものです(フォールバック)。

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

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

詳細が必要なら「Google の CDN でバージョンを指定する方法 2 種類」を参照してください。

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

フォールバックの動作を確認する

フォールバックの動作を確認するためには、スクリプトの URL を適当なものに変更する等するのが良いです。フォールバックの動作を確認した後は、CDN から jQuery をダウンロードできるように再修正します。

解説した方法の利点

ここで解説した方法の利点は jQuery をフッタで読み込むことができる点です。JavaScript の読み込みがヘッダにあり、さらにそれを遅延して読み込むような設定がされていない場合、ブラウザは対象の JavaScript が読み込まれるまでページの描画を中断してしまいます。その結果、ユーザに情報を提供するまでに時間を要すことになります。

jQuery をフッタで読み込む場合、少なくともフッタまでのページはブラウザによって描画されます。jQuery を使った処理によってページが再描画される可能性はありますが、ブラウザがレンダリングを中断することはありません。

解説した方法の欠点

ここで解説した方法には欠点もあります。導入するプラグインが jQuery をヘッダで読み込む必要があるとき、そのプラグインが適切に動作しません。多くの優秀な開発者はそのように実装していないと考えられますが、導入するすべてのプラグインが jQuery をヘッダで読み込まないように開発されている保証は得られません。

この問題を解決し、jQuery を CDN から読み込む方法はあります。ここで解説した方法と同じ要領で、wp_footer() 関数ではなく、wp_head() 関数の前に jQuery を読み込むようにします。

ヘッダで読み込む分、ページの描画は遅くなりますが、一度ダウンロードしたリソース(ここでは jQuery)がキャッシュされることを考えれば、悪い選択ではないでしょう。