メインコンテンツまで移動する

WordPress の jQuery を Google の CDN に変更し高速化

  • 公開日
  • 更新日

Akira Web デザイナー

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 の特徴です。

通常 CDN の利用には相応の費用がかかりますが、Google Hosted Libraries は無料です。

この Google Hosted Libraries を WordPress で利用する方法を紹介します。

WordPress への導入方法

Google Hosted Libraries の WordPress への導入は、テーマの functions.php にコードを追加するだけで終わります。

フッターで読み込む

フッター（</body> 直前）で Google Hosted Libraries を読み込ませる場合は、下記のコードをテーマの functions.php に追加します。

add_action( 'wp_enqueue_scripts', function() {
  if ( !is_admin() ) {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js', false, '3.7.1', true );
    wp_enqueue_script( 'jquery' );
  }
});

WordPress 同梱の jQuery の読み込みを停止し、新たに Google Hosted Libraries から jQuery を読み込んでいます。

フッターでの読み込みは、サイトをより高速表示させたい方に適しています。

導入後は、エラーが出ていないかをデベロッパーツールのコンソールタブで確認します。

head タグで読み込む

フッターで読み込む場合は、一部の WordPress プラグインが正常に動作しないかもしれません。

そのような場合は、<head> 内で読み込む下記のコードをテーマの functions.php に追加します。

add_action( 'wp_enqueue_scripts', function() {
  if ( !is_admin() ) {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js', false, '3.7.1', false );
    wp_enqueue_script( 'jquery' );
  }
});

wp_register_script() の第 5 引数の $in_footer に false を指定しています。true を指定すればフッターで読み込まれますが、false を指定すると <head> 内で読み込まれます。

その他の部分はフッターで読み込むコードと変わりません。

バージョンを変える

上記のコードでは、jQuery の 3 系を読み込んでいます。

本来なら 3 系で動作するコードを書くべきですが、WordPress プラグインの中には 3 系に対応していないものもあります。

もし、デベロッパーツールのコンソールでエラーが出るのなら、読み込むバージョンを変更します。

例えば、2 系を読み込む場合は、コードの以下の部分を…。

wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js', false, '3.7.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 本体より後で、かつ defer で読み込む必要があります。また、jQuery を使っているコードをインラインで書く場合は、type="module" を付けないといけません。

<script type="module">
  jQueryを使ったコードを書く;
</script>

jQuery 本体より先に jQuery を使っているコードを読み込んだ場合、または type="module" を付けずインラインで書いた場合は、いずれもそのコードは動かないため注意が必要です。

フォローする