【WordPress】javascriptの読み込みをdeferで遅延読み込みして速度改善する

こんにちわ、PHPエンジニアのエンジニア婦人（@naho_osada）です。
私はPHPエンジニアとして8年～の経験があります。

この記事では「WordPressサイトでjavascript読み込みに遅延読み込みのdeferを実装して表示を速くする」方法について掲載します。爆速！とまではいきませんが若干早くなる場合があります。

CSS版はこちらです。
【WordPress】CSSの非同期読み込みpreloadを実装して表示を速くする

簡単にWordPressを手軽に構築するならカラフルボックス※広告

カラフルボックスはオールインワンの超快速レンタルサーバー。

まずはWordPressで公開してみたい！という方におすすめです。

javascriptにdefer属性を追加する

functions.phpに書きます。

/**
 * scriptLoader
 * javascriptの遅延defer属性を追加
 */
function scriptLoader($script, $handle, $src) {
	if (is_admin()) {
		return $script;
	}
	$script = sprintf('<script src="%s" type="text/javascript" defer=""></script>' . "\n", $src);
	return $script;
}
add_filter('script_loader_tag', 'scriptLoader', 10, 5);

scriptタグにdeferを追記しています。

script_loader_tagにフィルターフックをかけて、フィルターフック実行時にscriptタグを書き換えるときに、deferをつけています。

管理画面の時はdeferをつけないようにしています。管理画面のみで動作するプラグインも多いので、いつでも全てにdeferを付けると何かしらの影響が出るかも…そして管理画面は高速化する必要はそれほどありませんね（管理画面がとても遅くてお悩みの場合はプラグインを整理する方が良いかもしれません）。

jqueryだけはdeferをつけてしまうとほとんどの場合動作しなくなると思います。
その他ライブラリが使用する前提のものなので、これは従来通り先読みしましょう。

footerにscriptを移動する場合の注意

「現状以上にプラグインを任意に追加する可能性がそれなりにある場合」「お客様自身がプラグインを自由に追加する可能性がある」場合はjquery.jsの読み込みをheaderにしておいた方が無難です。

functions.phpで特別指定しなければ、プラグインのscriptなどはheaderに書かれます。そのため前提であるjquery.jsが先に読み込まれていないと正常動作しなくなる可能性が高いです。

全部のscriptをfooterに移動し、jquery.jsを一番に読み込み（defer属性をつけない）してその後順次、となれば基本的に問題はありませんが、ソースを管理している人以外、プログラムを理解している人以外がWordPressのプラグインを触ったりなどする可能性がある場ときは後々の余計な問題を呼び込まないようにしておくべきです。

「それなりに」若しくは「不意に」プラグイン追加があるとサイト表示できない問題が発生したら…お客様のサイトだとクレーム発生かも…お互いに良い気持ちはしないですね。

実装した体感

元々とても遅いサイトではないので、実装したからと言ってそこまでの効果は感じられませんでした。PageSpeedInsightなどでみると数値が若干上向いた？程度です。
それよりもjavascriptの読み込みそのものを減らす、（重要ではない）javascriptの読み込みをfooterに移動する方が効果が出ます。両方やるとより良いですね。

ただし、場合によってはfooter×deferで遅くなってしまうケースもあるそうです。
そもそもfooterに書くのはscriptを一番最後に読み込むことでメインの表示の読み込みを止めない、結果的に早く見られるようになる技。元々後ろにあるjavascriptにdeferを付けると遅延読み込みが完了するまでの方が時間かかってしまうケースがあるのかもしれません？