PageSpeed Insightsのレンダリングを妨げるJavaScriptの除外を改善する方法

PageSpeed Insights の「レンダリングを妨げるリソースの除外を改善する方法」には、レンダリングをブロックする CSS や JavaScript が指摘されます。

例えば、このような感じに表示されます。

PageSpeed Insights レンダリングを妨げるリソースの除外を改善する方法

この記事では 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 に対する指摘が解消されます。

PageSpeed Insights レンダリングを妨げるリソースの除外を改善する方法