[WordPress] script要素にdefer/asyncを付与する方法
2 min read
functions.phpにコードを追加して</<!--more--> <h2><code>defer/async</code>とは</h2>
<h3><code>async</code>属性</h3>
ダウンロード完了直後、レンダリングとスクリプトを平行して実行する。 <h3><code>defer</code>属性</h3>
ページの解析後、レンダリングとスクリプトを平行して実行する。
ただし、スクリプトはレンダリング完了後に実行する。 <h3>注意</h3>
実行順序が保障されなくなるため、ライブラリなどに<code>async・defer</code>は指定しない方がよい。
また、<code>document.write()</code>などのレンダリング関連の処理があると使えない。 <hr> <h2>functions.php に追加するコード</h2>
<h3>clean_url</h3>
<pre class="php"><code>function add_attr_for_script($url) {
return ( strpos($url, '.js' ) === false ) ? $url : $url ."' defer='defer' async='async";
}
add_filter('clean_url', 'add_attr_for_script', 11, 1);</code>
一括で付与するので用法を守って正しくお使いください。
</<hr>
ライブラリを読み込んでる場合はこういう条件も入れた方がいいかも
<pre class="php"><code>if ( strstr($url, 'jquery') !== false ) {}</code></pre> <hr> <h3>script_loader_tag</h3>
大抵の場合、以下の様な形でスクリプトを出力用のキューに入れて出力していると思う。
<pre class="php"><code>wp_enqueue_script('js', get_template_directory_uri(). "hoge.js", [], null, true);</code></pre>
ここでは、スクリプトのハンドル名を指定を「js」としているが任意で付けて良い。この名称を後述の処理で使用する。 <pre class="php"><code>function add_async_to_script( $tag, $handle ) {
if ( 'js' !== $handle ) { // wp_enqueue_scriptに指定したハンドル名'js'
return $tag;
}
return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'add_async_to_script', 10, 2 );</code></pre><code>if</code>の条件は<code>!==</code>でも<code>===</code>でもどちらでも良いが、やっている事は<code>clean_url</code>と大差ない。