言語(PHP他)PHPjavascrip/jQueryWordPress
投稿日 : 2021年2月13日

【WordPress】javascriptをdefer(遅延)読み込みさせて表示を速くする

【WordPress】javascriptをdefer(遅延)読み込みさせて表示を速くするの画像

こんにちわ、PHPエンジニアのエンジニア婦人(@naho_osada)です。
私はPHPエンジニアとして8年~の経験があります。WordPressは2年半~の経験があります。その他、jQuery、HTML、CSSも使用します。
ここでは主に過去に納品した案件や自サイト運営(エンジニア婦人ノート)で遭遇したことについて書いています。

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

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

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つけるとほとんどの場合動作しなくなると思います。その他ライブラリが使用する前提のものなので、これは従来通り先読みしましょう。

実装した体感

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

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

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

全部のscriptをfooterに移動し、jquery.jsを一番に読み込み(defer属性をつけない)してその後順次、となれば問題ありません。

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

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

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

プラグインを追加するときにfunctions.phpも調整する運用であれば問題ありません。それもまたひと手間かかってしまいますけどね。

まとめ

WordPressサイトにscriptの遅延読み込み、deferを実装しました。

過度な期待は禁物ですが、それなりに速度改善に効果はあります。
headerにscriptを付けている場合、defer属性をつけるよりもscriptの読み込み自体をfooterにした方が効果が出ると思います。気になる方はやってみてください。