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

Google Hosted Librariesで高速化

Akira

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

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

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

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

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

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

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

CDN で読み込むメリット

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 への導入方法

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

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

footer で読み込む

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

footer で読み込む場合には、下記のコードを子テーマの 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/2.2.4/jquery.min.js', false, '2.2.4', true );
		wp_enqueue_script( 'jquery' );
	}
});

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

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

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/2.2.4/jquery.min.js', false, '2.2.4', false );
		wp_enqueue_script( 'jquery' );
	}
});

wp_register_script() の第 5 引数の $in_footer に false を指定しています。

true を指定すれば footer で読み込まれますが、 false を指定すると head 内で読み込まれます。

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

注意点

Google Hosted Libraries を読み込む方法として、 add_action('init') を用いた方法がよく紹介されています。

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

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