WordPressのfunctsions.phpを使って「Defer parsing of JavaScript」対応
サイト表示スピード・パフォーマンスチェッカーツールで有名な「GTMetrix」というサービスがあります。
サイトを評価してもらった結果で出てくる警告として
「Defer parsing of JavaScript」というものがあります。
WordPressを使っていた場合の上記「Defer parsing of JavaScript」の対処法を記載していきます。
Defer parsing of JavaScript
どういう意味か
Defer parsing of JavaScript
In order to load a page, the browser must parse the contents of all ＜script＞ tags, which adds additional time to the page load.
By minimizing the amount of JavaScript needed to render the page, and deferring parsing of unneeded JavaScript until it needs to be executed,
you can reduce the initial load time of your page.
ページを読み込むためには、ブラウザはすべての＜script＞タグの内容を解析する必要があるためページの読み込みに時間がかかります。
ページのレンダリングに必要なJavaScriptの量を最小限に抑えることと、実行する必要があるJavaScriptの解析を延期することで、ページのロード時間を短縮できます。
「javasciprtを読み込むタイミングをロードと同じではなく、ほんの少しだけ遅らせると表示速度改善されるよ？」
ということを言っているのでしょう。
現状、デフォルト（指定なし）でjavascriptを読み込んでいるので、新たに属性を追加し読み込みの司令を出すことで解決できます。
defer属性とasync属性
defer属性
defer属性を指定すると、ページの読み込みが完了した時点で実行する。
defer属性 ≪ script要素 ≪ スクリプト記述 ≪ 要素 ≪ HTML5入門
async属性
async属性を指定すると、使用可能になった時点で実行する。
async属性 ≪ script要素 ≪ スクリプト記述 ≪ 要素 ≪ HTML5入門
async属性とdefer属性を両方記述した場合は、async > defer という強弱関係となるみたい。
つまりasync属性を付けておけば問題なさそうです。
ちなみに、最近はjavascriptを読み込む記述に
type=”text/javascript”
は不要な流れになってきていますね。
この上記２つの記述を入れ替えるようにすれば解決・速度改善されるみたいです。
ただWordPressのjavascript読み込みの多くは、
wp_enqueue_script()
を使っているかと思います。
このwp_enqueue_script関数には「async / defer」属性を追加するような引数は用意されていません。。。
WordPressでwp_enqueue_script()のasync
wp_enqueue_scriptはテーマの基盤となるような箇所で記述されていることも多いので該当部分を見つけて削除するのは難易度が高いです。
またheaderに直接scriptタグを記述するのも面倒。。。
ということで、script_loader_tagというフィルターを使い
wp_enqueue_scriptの出力を加工することで対処しようと思います。
修正するファイルはfunctions.phpです。
<?php if (!is_admin()) { add_filter('script_loader_tag', 'replace_script_tag'); function replace_script_tag ( $tag ) { return str_replace( "type='text/javascript'", 'async', $tag ); } }
is_admin判定で管理画面表示かどうかを判定しています。
管理画面ではscriptタグを書き換える必要はありません。
str_replaceはPHP関数の置換処理をしています。
type='text/javascript' を見つけて、asyncに書き換えています。
functions.phpに数行追加するだけなのでとても簡単で誰にでもできる作業です。
これでwp_enqueue_scriptを使っている箇所全体にasync属性を追加することができました。
ただしすべてのwp_enqueue_scriptに対して行っているため、きちんとjavascriptが動かなくなる可能性もあります。
反映が簡単な分、動作チェックは入念に行うなどの注意が必要です。
GTMetrixの評価も向上しているかと思います。
