WordPress の jQuery を Google Hosted Libraries に替えてサイト高速化

Google Hosted Librariesで高速化

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

カスタマイズ箇所jQuery
カスタマイズ方法PHP
テンプレート変更なし
コピペの可否100% 可能

WordPress には、 jQuery が同梱されています。

この jQuery は、当然ながらサーバーに負荷をかけます。

もし、サーバーへの負荷を軽減できれば、サイト表示は高速化します。

もし、 jQuery の読み込み速度が速くなれば、よりサイトは高速で表示されます。

この jQuery の高速化を一挙に行えるのが、 Google が無料で提供している Google Hosted Libraries です。

簡単に WordPress に導入できるため、導入されてはいかがでしょうか。

CDN で読み込むメリット

Google Hosted Libraries は、 jQuery などの javaScript ライブラリを Google が Google のインフラを使用し提供している CDN サービスです。

Google の高速かつ安定したサーバーで javaScript が処理される上に、地理的に最も近いサーバーが自動的に選択されます。

また、 CDN の Google Hosted Libraries を利用することで、サーバーの負荷が分散されます。これによりサイト表示が高速化されるほか、アクセス増加にサーバーが耐えやすくなります。

その他、ブラウザに1年間キャッシュされるのも、 Google Hosted Libraries の特徴です。サイト訪問者のブラウザにキャッシュされていれば、そのキャッシュをあなたのサイトで使いまわせます。

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

この Google Hosted Libraries を WordPress で利用することで、サイトを高速化できます。

WordPress への導入方法

WordPress への Google Hosted Libraries の導入は、子テーマの functions.php にコードをコピペするだけです。

ただ、 footer ( </body> の直前)で読み込むか、 head 内で読み込むかにより、1ヶ所だけコードに違いがあります。

footer で読み込む

footer で Google Hosted Libraries を読み込ませることで、レンダリング開始までにかかる時間を短縮できます。

footer で読み込む場合には、下記のコードを子テーマの functions.php に追加します。

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

サイトをより高速表示させたい方に適しています。

導入後は、エラーが出ていないかをデベロッパーツールでご確認ください。

head 内で読み込む

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

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

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

wp_register_script() の第5引数の $in_footer を指定していないだけです。

true を指定すれば footer で読み込まれますが、何も指定しないか false を指定すると head 内で読み込まれます。

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

要注意

Google Hosted Libraries を読み込む方法として、 add_action('init') を用いた方法を紹介しているサイトが多くあります。

しかし、 add_action('init') を用いると、 WordPress へのログインページで Notice が出てしまいます。

Notice を出さないために、上記コードのように add_action('wp_enqueue_scripts') を用いることをおすすめします。

簡単に導入できるのに高速化

Google Hosted Libraries は、どのサイトにも簡単に導入できます。

にも関わらず、サイトの高速化につながるのはさすが Google のサービスです。

デメリットを挙げるとすれば2つ。

1つは、インターネットは100%ではないため、不具合が起きることが今後あるかもしれないこと。ただし、 Google のインフラを使っているため、高い安定性を期待できます。

2つ目は、 Google Hosted Libraries のアップデートで現在の最新バージョン 2.2.4 が古くなる可能性があることでしょうか。

このサイトの SNS をフォローしていただくと、 Google Hosted Libraries のアップデートをお知らせいたします。

Facebook ページにいいね!をする
Twitter でフォロワーになる

シェアする

URL をコピーする