PageSpeed Insights の「レンダリングを妨げるリソースの除外を改善する方法」には、レンダリングをブロックする CSS や JavaScript が指摘されます。
例えば、このような感じに表示されます。
この記事では JavaScript に注目してみると、”…jquery/jquery.js?ver=1.12.4″ や “…jquery/jquery-migrate.min.js?ver=1.4.1” が指摘されています。
jquery.js や jquery-migrate.min.js は WordPress 本体が読み込んでいるので、WordPress を使っていれば、これらが指摘されてしまいます。
今回は、これらのレンダリングブロックを解消しましょう。
PageSpeed Insights のレンダリングを妨げる JavaScript の除外を改善する方法
JavaScript のブロッキングを回避するには、async か defer を付けて JavaScript をロードします。
async を付けた場合は、JavaScript のダウンロード中にレンダリングを停止させません。
また、ダウンロード完了後すぐにそのスクリプトが実行されます。
defer を付けた場合も、JavaScript のダウンロード中にレンダリングを停止させません。
ただ、スクリプトの実行は、HTML をレンダリングした後に、順次、記述した順に実行されます。
複数の JavaScript を使用していて、それらに依存性がある場合は、defer を、それ以外の場合は、async を使うとよいでしょう。
依存性がある場合の例としては、JQuery を使う JavaScript があります。
JQuery が読み込まれる前に、JQuery を使う JavaScript が実行さfれるとエラーになります。
WordPress の JavaScript を非同期に読み込む方法
functions.php に下記を追記します。
if ( !(is_admin() ) ) {
function replace_scripttag ( $tag ) {
if ( !preg_match( '/\b(defer|async)\b/', $tag ) ) {
return str_replace( "type='text/javascript'", 'async', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'replace_scripttag' );
}
やっていることは、JavaScript を読み込む記述のうち、defer や async が指定されていないものに、async を付けています。
defer で読み込みたい場合は、’async’ の部分を ‘defer’ に変更すればよいです。
HTML5 では、<script> タグで type=’text/javascript’ を省略できるので、同時に削除しています。
これで、PageSpeed Insights の「レンダリングを妨げるリソースの除外を改善する方法」で、JavaScript に対する指摘が解消されます。