Google PageSpeed Insightsで「レンダリングを妨げるリソースの除外」に含まれているjqueryの改善方法 WordPress

2019-03-30

PageSpeedInsightsの「改善できる項目」のなかに「レンダリングを妨げるリソースの除外」の矢印をクリックするとWordPressで使われているjqueryやjquery-migrate.min.jsが含まれていたりします。

これを改善するにはスクリプトソースにasyncかdeferをつけます。

functions.phpに以下を記載します

//PageSpeed Insightsのレンダリングを妨げるJavaScriptの除外を改善
if ( !(is_admin() ) ) {
    function replace_script_tag ( $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_script_tag' );
}

script_loader_tagフィルターを使います。

これでpagespeed Insightsで指摘されなくなりました^^

※後日Googleデベロッパーツールで確認したところ、

Uncaught ReferenceError: jQuery is not defined

という様なエラーが出ていたので、一旦上記ソースは削除しました。
他の方法を模索中・・・

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

WordPress

Posted by ともろう