jQueryをフッターに移して高速化する – Capital P

高速化の重要性が叫ばれる昨今だが、WordPressもその例に漏れない。WordPressのようなPHP+MySQLという構成のCMSは、データベースやサーバー間ネットワークがボトルネックになることが多く、その対処法（キャッシュなど）はたくさんあるのだが、フロントエンド高速化となると、フロントエンド業界からの情報発信に埋もれてWordPressに固有のハックを見つけるのが難しいというのが現状ではないだろうか。フロントエンド業界の情報にはSPAを主に作っている人からの発信も含まれるので、WordPressとは必ずしも相性がよくない場合がある。

今回はそんなせわしない時代においても手軽に高速化を実現できるハックを紹介する。

フロントエンド高速化とは？

フロントエンドでの高速化には色々あるが、昨今よく言われているのは次のようなものではないだろうか。

HTTP/2導入でのストリーム並列処理。HTTP/2の登場により、一度に一定の外部ファイルしか読み込めないという制約はなくなった。画像のためにサブドメインを切る必要もない。まあ、クッキーフリードメインにこだわるのであれば、その限りではないが。
DNS Prefetchによる名前解決時間の節約。Automatticのドメインであるwp.comなどはすでに実装済み。
細かいJS・CSSのインライン展開によるネットワークオーバーヘッドの削減。
defer/asyncによる遅延ロード

他にもCDNによるエッジロケーション利用などのネットワーク速度の削減方法などもあるが、WordPressでは他のプラグインが$(document).ready()を使っていたら遅延読み込みしたくでもできない。そんな状況で簡単に高速化できるのが、以下に紹介する2つの手法である。

jQueryをフッターに移す

WordPressのほとんどのプラグイン・テーマはjQueryに依存している。しかし、jQeuryはわりと大きなファイルサイズのライブラリで、しかも歴史的な経緯により、WordPressではheadタグ内に読み込まれてしまう。これをフッターに移すことで、レンダリングブロックを避けることができる。

jQuery Migrateをなくす

jQuery MigrateはjQueryの後方互換性を担保するプラグインなのだが、これはWordPressでjQueryを利用すると必ず読み込まれる。あなたの書いたプラグインなりテーマなりが$.liveをまったく使っていなかったとしても、読み込まれる。

しかし、ある程度活発に開発されているプラグイン・テーマならば、jQuery Migrateを必要とすることはほとんどない。しかも、このJSはjQueryと同じくheadタグに読み込まれる上、DOMへアクセスするので結構重い。多くの場合外してしまっても問題がないのだから、外してしまおう。

それでは、上記の条件を満たすコードを紹介しよう。

/**
 * jQueryをフッターに動かす
 */
add_action( 'init', function() {
  // 管理画面ではjQueryを削除できない。
  if ( is_admin() ) {
    return;
  }
  // 現在のバージョンとURIを保存。
  // CDNを使いたい方は$jquery_srcのURIを変更してもよい。
  global $wp_scripts;
  $jquery = $wp_scripts->registered['jquery-core'];
  $jquery_ver = $jquery->ver;
  $jquery_src = $jquery->src;
  // いったん削除
  wp_deregister_script( 'jquery' );
  wp_deregister_script( 'jquery-core' );
  // 登録しなおし
  wp_register_script( 'jquery', false, ['jquery-core'], $jquery_ver, true );
  wp_register_script( 'jquery-core', $jquery_src, [], $jquery_ver, true );
} );

この処理を追記することで、jQueryはフッターに移動され、しかもjQuery Migrateは読み込まれなくなる。体感的にかなり早くなるので、興味がある方にはオススメだ。

もちろん、jQueryがheadタグ内にないと動かないプラグインを利用しているのであればエラーが起きて動かなくなる。高速化はサイトの健全性とトレードオフなので、それはしょうがない。一度試してみて、問題がなければ採用することをオススメする。

高橋文樹による追記 @ 2018年5月3日

Capital PではJetpackのシェアボタンと相性が悪かったので、次のようなカスタマイズを行なった。まあ、これはJetpackのお行儀が悪いとも言えるのだが……

/**
 * Jetpackのシェア用スクリプトの優先順位を下げる
 */
add_action( 'wp_footer', function() {
  if ( has_action( 'wp_footer', 'sharing_add_footer' ) ) {
    remove_action( 'wp_footer', 'sharing_add_footer' );
    add_action( 'wp_footer', 'sharing_add_footer', 20 );
  }
}, 1 );

なお、有料会員向けSlackでは宮内が色々と試行錯誤していたので、興味のある方はログを遡っていただきたい。

“jQueryをフッターに移して高速化する”への2件の反応