
WordPressでjQueryにdefer属性を追加しましたので、その防備録です。
広告
目次
defer属性を追加した理由
「スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する」の解決です。
PageSpeed Insightsで、それをまだ解決できていなかったので、解決のために調べた結果、そうすることに決めました。
bodyの終了タグ付近に書くという解決法もあったんですが、deferは仕様的にscriptタグで記述した順番での読み込みをしてくれるらしいので、ヘッダー部分でdeferで読み込みを明記することにしました。
asyncは読み込みの順番が保障されないようなので却下。
jQueryにdefer属性を追加する方法
トライしてみた結果、私の環境では方法が2通りありましたので、書いておきます。
functions.phpにコードを書く
jqueryにdefer属性を加えるために、functions.phpに書くコードは以下の通りです。
add_filter('script_loader_tag', 'defer_jquery', 10, 2);
function defer_jquery($tag, $handle){
if('jquery' === $handle){
return str_replace("type='text/javascript'", 'defer', $tag);
}
}
一行目でscript_loader_tagフィルターにdefer_jqueryを追加します。
これにより、scriptの記述の際に2行目から記述しているdefer_jqueryが実行されるようになりました。
add_filter関数によって渡される引数を2つにすることで、スクリプトとして記述されるタグに加え、それをWordPressの関数として登録するときに用いられるhandleも取得できるように。
あとは、$handleが’jquery’であるとき、つまり$tag内にjqueryに対応するタグが入っているときに、str_replace関数を使い、その文字列を置き換えるだけです。
これでもよかったのですが、なんだかインラインのJavaScriptさんにエラーが出たので、次の方法をためしてみました。
LiteSpeed CacheでjQueryにdeferを適用する
私の使用しているサーバはLiteSpeedで、LiteSpeed Cacheがこのサイトには入っています。
jQuery以外のJavaScriptやCSSはこれで最適化していたのですが、jQueryは除外していました。というかjQueryの除外オプションがあったのでそれをオンにしていました。
しかしまあ、js結合の優先度もONにしているしで、特に読み込む順番が変わるとも思えませんでしたし、ついでにCDNのオプションでjQueryをGoogleのCDNからの配信にしていたので、もしかしたらうまく最適化が適応されるかと思い、オフにしました。
オフにしたのはダッシュボードからだと、「設定」→「LiteSpeed Cache」もしくは「LiteSpeed Cache」→「設定」で開いた設定画面で、「[5]最適化」のタブを押して一番下辺りを見れば参照できる、「JQueryを除外する」オプションです。
念のために結合からjQueryのアドレスは除外するようにチューニングタブで設定しておきました。
これにより、結果的にはうまいことdeferを挿入できました。エラーは相変わらずでますが、普通にjQueryをdeferせずに入れたときと同じエラーだったので、これでよしとしています。
まとめますと、
- LiteSpeed CacheでJavaScriptの最適化を設定するときに「JQueryを除外する」オプションをはずす
でどうやらdeferができるみたいです。
うまくdeferがかからない場合は、CDNタブから、「JQueryをリモート読み込み」オプションを使って、jQueryのCDN配信を利用してみてください。
その他コメントなど
今回はjQueryにdeferオプションをつける方法を書きました。
なんとなくですが、PageSpeed Insightsの点数が少しだけ安定したように思います。GtMetrixさんにはまだ叱られるけど…。
あとついでにscript系のWordPressでの細かい扱いも分かってきたように思います。がんばる。