Google Hosted Libraries とは？
「CDN を使うとサイトが高速になるよ」と聞いたことはありませんか？
WordPress に同梱の jQuery を CDN からの読み込みに変更すれば、サイトを高速化できます。
使用するのは、Google が提供する CDN サービス Google Hosted Libraries 。
Google Hosted Libraries は、jQuery などの javaScript ライブラリを Google が Google のインフラを使用し提供している CDN サービスです。
Google の高速かつ安定したサーバーで処理される上に、地理的に最も近いサーバーが自動的に選択されます。
また、CDN の Google Hosted Libraries の利用で、サーバーの負荷が抑えられます。これによりサイト表示が高速化されるほか、アクセス増加にサーバーが耐えやすくなります。
その他、ブラウザに1年間キャッシュされるのも、Google Hosted Libraries の特徴です。サイト訪問者のブラウザに jQuery がキャッシュされていれば、そのキャッシュをあなたのサイトで使い回せます。
通常 CDN の利用には相応の費用がかかりますが、Google Hosted Libraries は無料です。
この Google Hosted Libraries を WordPress で利用する方法を紹介します。
WordPress への導入方法
Google Hosted Libraries の WordPress への導入は、テーマの functions.php にコードを追加するだけで終わります。
footer で読み込む
footer（</body> 直前）で Google Hosted Libraries を読み込ませる場合は、下記のコードをテーマの functions.php に追加します。
add_action( 'wp_enqueue_scripts', function() {
if ( is_admin() === false ) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', false, '3.4.1', true );
wp_enqueue_script( 'jquery' );
}
});WordPress 同梱の jQuery の読み込みを停止し、新たに Google Hosted Libraries から jQuery を読み込んでいます。
footer での読み込みは、サイトをより高速表示させたい方に適しています。
導入後は、エラーが出ていないかをデベロッパーツールのコンソールタブで確認します。
head 内で読み込む
footer で読み込む場合は、一部の WordPress プラグインが正常に動作しないかもしれません。
そのような場合は、<head> 内で読み込む下記のコードをテーマの functions.php に追加します。
add_action( 'wp_enqueue_scripts', function() {
if ( is_admin() === false ) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', false, '3.4.1', false );
wp_enqueue_script( 'jquery' );
}
});wp_register_script() の第 5 引数の $in_footer に false を指定しています。true を指定すれば footer で読み込まれますが、false を指定すると <head> 内で読み込まれます。
その他の部分は footer で読み込むコードと変わりません。
バージョンを変える
上記のコードでは、jQuery の 3 系を読み込んでいます。
本来なら 3 系で動作するコードを書くべきですが、WordPress プラグインの中には 3 系に対応していないものもあります。
もし、デベロッパーツールのコンソールでエラーが出るのなら、読み込むバージョンを変更します。
例えば、2 系を読み込む場合は、コードの以下の部分を…。
wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', false, '3.4.1', false );このように変更します。2 系の最新バージョン 2.2.4 （ 2019 年 9 月 16 日時点）に URL を変更しています。
wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js', false, '2.2.4', false );3 系・ 2 系・ 1 系の各最新バージョンは、Google Hosted Libraries 公式サイトの jQuery で確認できます。
非同期で読み込む
jQuery の読み込みは、レンダリングをブロックします。
よりサイトを高速化したい場合は、jQuery を非同期（defer）で読み込みます。
非同期で読み込む場合は、以下のコードも functions.php に追加します。
add_filter( 'script_loader_tag', function( $tag, $handle ) {
if ( 'jquery' === $handle ) {
$tag = str_replace( ' src', ' defer src', $tag );
}
return $tag;
}, 10, 2 );ただし、jQuery を使っているコードは、必ず jQuery 本体より後で読み込む必要があります。また、jQuery を使っているコードは、インラインで書けません。
jQuery 本体より先に jQuery を使っているコードを読み込んだ場合、またはインラインで書いた場合は、いずれもそのコードは動かないため注意が必要です。