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

Akira

福岡在住の Web デザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

「CDN を使うとサイトが高速になるよ」と聞いたことはありませんか?

WordPress に同梱の jQuery を CDN からの読み込みに変更することで、サイトを高速化できます。

使用するのは、Google が提供する CDN サービス「Google Hosted Libraries」。

Google Hosted Libraries を使えば、このようなメリットがあります。

  • 別のサイトで読み込んだ jQuery のキャッシュを利用できる。
  • サーバーの負荷を抑えられる。
  • Google の環境は、一般的なサーバーより高速。

WordPress に簡単に導入でき、サイトの高速化を実現できます。

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 公式サイトで確認できます。

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 を使っているコードを読み込んだ場合、またはインラインで書いた場合は、いずれもそのコードは動かないため注意が必要です。

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。