JavaScript の非同期云々、WPでの対応メモ。

PageSpeed Insights で検証した際に「レンダリングを妨げる JavaScript があるからどうにかせぇ」というような警告が出てくることがあります。ちょっとしたモノならインライン化（外部ファイルにしないでHTML内に直接記述）したり、外部ファイルを読み込むにしてもscript要素に async/defer属性 をつけたりして対応するかと思うのですが、でもこれ……テーマ内のファイルにタグが記述してある場合に限っちゃいますよね。

WPが吐き出しているものは直接書き直したりするのが難しいので、 function.php に以下の記述を追加する方法をとっている方が多いようです。

function replace_scripttag ( $tag ) {
    return str_replace( "type='text/javascript'", 'async', $tag );
}
add_filter( 'script_loader_tag', 'replace_scripttag' );

type属性の部分をasync/defer属性に置き換えてしまう方法。HTML5はtype属性を省略してもOKなので問題ありませんが、HTML4や(x)HTMLの場合はその辺を変更しないといけません。そして更に、この方法だと古～いWPを使っている場合に対応できません。script_loader_tag というフィルタが、WordPress 4.1 から採用されたものだからです。その場合はどうするか。ちょっと無理やり感がありますが、下記の方法で属性をつけることもできます。

function add_async_scripttag( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    return "$url' async charset='UTF-8";
}
add_filter( 'clean_url', 'add_async_scripttag', 11, 1 );

先程のものとはちがい、置き換えるのではなく捻じ込んでいる感じになります。そのため、余分な属性（コレの場合は charset=UTF-8 にあたりる部分）を付けなければならず、ちょっとスッキリしないですが仕方ありません。そもそもそんな古いの使ってるんじゃないよって話ですが、止むを得ない事情があったりするかも知れません……。

それにしても、HTML仕様書やらWPリファレンスやら、主要な部分だけじゃなくてマイナーなものまで完璧に頭に入れておきたいもんですね。そしたらきっと色々楽だし便利だろうなぁと思うのでした