chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag

ブログ移転のお知らせ

当ブログは新ブログ「DEV.NISMIT」に移転しました。それに伴い、ドメインも全てリニューアルしました。

お手数ですが、ブックマーク、Feedly等の変更をお願いします。当ブログは数ヶ月を目安にリダイレクト、削除します。

2015/04/13

[WP]WordPressで読み込むjQueryをCDN経由の読み込みに変更しつつフォールバックに対応する

wp_headやwp_footerを実行した際に読み込まれるjQueryのコアファイルをローカルからの読み込みではなく、CDNを利用した読み込みに変更する方法をご紹介致します。もしも場合も考え、CDNサーバーが落ちた際のフォールバックにも対応させています。参考になれば、幸いです。

WordPressのデフォルトで読み込むjQueryをCDN経由に変更する

サイトを本格的に運用してから、色々と試行錯誤を繰り返しております。

色々考えなければならない事が多々あります。その中の一つとしてページの表示速度があります。

今回ご紹介する、WordPressのデフォルトで読み込むjQueryをCDNからの読み込み変更する事によって、多少効果がありました。

 

CDN(Contents Delivery Network)とは、コンテンツ(CSSや画像、Javascriptファイル等)を、

CDNサーバーにキャッシュすることにより負荷を分散させる仕組みです。

詳しい仕組みは、以下のサイトが詳しく説明しています。

Google Hosted Library – Webを速くするためにGoogleがやっていること Make the Web Faster 03 | HTML5Experts.jp

( http://html5experts.jp/jxck/3102/ )

CDNのメリットは、自分のサーバーの負荷を分散させる事により、コンテンツの読み込みが早くなる事です。

デメリットとしては、CDNサーバーがダウンした場合、CDNサーバーにあるファイルが読み込みが出来なくなる事です。

今回は、そのCDNサーバーがダウンした時も考慮してみました。

※jQueryの読み込みを変更する為、場合によってはプラグインに影響を及ぼす可能性がございます。

また、functions.phpに記述していく為、条件分岐やPHPの記述ミスによりページが真っ白になる事があります。

データベース等のバックアップを取り、テストを十分に行った上で判断してください。

 

functions.phpに書いています。

function include_jquery_cdn_loader() {
  if( !is_admin() ){
   //WP Default jQuery Load Deregister.
   wp_deregister_script('jquery');

   //jQuery CDN
   $jsCore = '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js';
   $jsMigrate = '//code.jquery.com/jquery-migrate-1.2.1.min.js';

   //jQuery CDN Check
   $core_url = @fopen('http:'.$jsCore, 'r');
   //jQuery CDN Server Down
   if( $core_url === false ){
      $jsCore = home_url( '/' ).'DIR_NAME/wp-includes/js/jquery/jquery.js';
   }
   wp_register_script( 'jquery', $jsCore, array(), null, false );
   wp_enqueue_script( 'jquery' );

   $migrate_url = @fopen('http:'.$jsMigrate, 'r');
   //jQuery Migrate CDN Server Down
   if( $migrate_url === false ){
      $jsMigrate = home_url( '/' ).'DIR_NAME/wp-includes/js/jquery/jquery-migrate.min.js';
   }
   wp_register_script( 'jquery_migrate', $jsMigrate, array(), null, false );
   wp_enqueue_script( 'jquery_migrate' );
 }
}
add_action('wp_enqueue_scripts', 'include_jquery_cdn_loader');

ソースコードの簡単な解説

!is_admin()を条件として、管理画面以外で実行するようにしています。

管理画面内で使用しているプラグイン等に影響する可能性や、管理画面は管理者のみしかアクセスしない為実行していません。

wp_deregister_script

Remove an enqueued script.

To be dequeued, the script must have been enqueued. Attempting to dequeue a script before the script is enqueued will have no effect.

WordPress Codex

wp_head()/wp_footer()を実行した段階で色々なものが読み込まれます。

その読み込むものは事前に登録されているのですが、wp_deregister_scriptを使う事により、

指定したものの登録を外す事(フックを外す)が可能です。

デフォルトで読み込まれるものは、コアのjqueryとmigrate(後方互換性を持たせたjQuery)です。

jQueryの格納場所は、/wp-includes/js/jquery/ 内にそれぞれあります。

wp_deregister_script( ‘jquery’ )を実行させる事により、コアのjqueryとmigrateの2つの読み込みをさせないようにします。

 

次に、fopen関数を使って、CDNがダウンしていないかチェックします。

fopen (http://php.net/manual/ja/function.fopen.php )

PHPの関数を使って、指定したurlを読みに行くのですが、アクセス出来ない場合だと、falseを返します。

これによって、CDNがダウンしているかどうかをチェックしています。

falseを返した場合、元々WordPressに同梱されている、jQueryを読みに行くようにしています。

ローカルに置いてあるjQueryのパスは適時変更を加えてください。

次は、wp_register_script を使って、読み込み内容を登録します。

wp_register_script

Register a new script.

Registers a script to be linked later using the wp_enqueue_script() function.

WordPress Developer Resources

そのままですが、新たに読み込むスクリプトを登録します。

引数はこんな感じとなっております。

 

wp_register_script( $handle, $src, $deps, $ver, $in_footer )
$handle(string/None) 登録名となります。※必須
$src(string/None) 読み込むスクリプト(URL,パス) ※必須
$deps(array/array()) 読み込みの依存関係。指定した登録名のすぐ後に登録されます。
$ver(bool/false) パラメーターを付けるかどうか。trueの場合はWordPressのバージョン番号が付与される。nullを入れる事によりパラメーターの付与されなくなる。
$in_footer(bool/false) trueの場合はwp_footer()側に登録されます。

 

今回の場合は、

wp_register_script( ‘jquery_migrate’, $jsMigrate, array(), null, false );

$handle – 「jquery_migrate」という登録名

$src – $jsMigrateにはURLが入っています。

$deps – array()で空です。

$var – nullを入れているのでパラメーターの付与はなしです。

$in_footer – falseなので、wp_headに登録されます。

 

続いて登録したスクリプトを読み込みキューに追加させるwp_enqueue_scriptを実行します。

wp_enqueue_script

スクリプトファイルがまだインクルードされていない場合、また、すべての依存するスクリプトが登録済みの場合、依存関係に従った適切なタイミングでファイルを生成されたページにリンクします。

スクリプトのリンクは、wp_register_script() 関数ですでに登録済みのハンドル、またはこの関数に必要なパラメータを与えることで行えます。

これは WordPress が生成するページに JavaScript をリンクする際に推奨されている方法です。

関数リファレンス/wp enqueue script – WordPress Codex 日本語版

wp_enqueue_scriptの引数は以下のようになっています。

 

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )
$handle(string/None) 登録名となります。※必須
$src(string/None) 読み込むスクリプト(URL,パス)
$deps(array/array()) 読み込みの依存関係。指定した登録名のすぐ後に登録されます。
$ver(bool/false) パラメーターを付けるかどうか。trueの場合はWordPressのバージョン番号が付与される。nullを入れる事によりパラメーターの付与されなくなる。
$in_footer(bool/false) trueの場合はwp_footer()側に登録されます。

 

ほぼ、一緒じゃねーかってなりました。。w

wp_enqueue_scriptwp_register_scriptの違いは、

wp_enqueue_scriptはスクリプトの登録からスクリプト読み込みまでを一括で行うのに対し、

wp_register_scriptは、スクリプトの登録までを行い、スクリプトの読み込みはしません。

使い方としては、wp_register_scriptでまとめてjsを登録だけしておき、

ページ分岐等で一部のjsをwp_enqueue_scriptで読み込みさせるなどだと思います。

 

最後にadd_action()でデフォルトで登録されているものが読み込まれるタイミングでこの関数を実行します。

 

今回はスクリプトの読み込みでしたが、WordPressにはスタイルも同じように読み込み出来る機能が用意されています。

スタイルの場合はこちらの記事を参考にしていただけますと幸いです。

[WP]WordPressのfunctions.phpでCSSの読み込みを管理・制御する方法

 

いかがでしょうか?

CDNに変えた効果としては、読み込み速度が1秒程上がりました。

なかなかの効果ではないかと思います。またjQueryのMigrate版が必要ない方は、

Migrateに関する部分を全て消して頂ければ、読み込みされなくなります。

 

参考サイト

WordPressでのGoogle CDNからのjQuery読み込みフォールバック方法 | Lancork

( http://www.lancork.net/2014/04/load-google-cdn-jquery-with-local-fallback/ )

WordPressのjQueryをcdnに変更 | Webエンジニアブログ

( http://dim5.net/wordpress/cdn-jquery.html )

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加