【WordPress】Defer parsing of JavaScript を修正する

ウェブサイトを作るうえで大切な前提にページの表示スピードがあります。内容はもちろん大事ですが、そこに至るSEOやUXの観点でも、ページの表示スピードは重要です。

ページスピードはグーグルの検索ランクの評価の一つになっています。

また、スマホがユニークアクセスやページビューの50%を超えるという最近の調査もあるように、サイトを訪れたユーザーの印象は大事です。表示スピードが遅いという悪印象を与えないよう、調整をしていきたいですね。

Defer parsing of JavaScript

GTmetrixPageSpeed Insightsなどで自サイトを調べたとき、下記のように修正項目が提示されることがあります。

  • JavaScriptに関する文言:Defer parsing of JavaScript

Defer parsing of JavaScriptの意味は?

詳細を見ると、JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering. と推奨されています。

Deferとは延期という意味で、parsingは構文解析を意味します。
つまり、JavaScriptの構文解析を延期するということ。

ブラウザがそのウェブページをレンダリングするとき、外部JavaScriptファイルを指定するscript要素に到達すると、レンダリング処理をいったんストップさせてJavaScriptファイルのダウンロードと解析を実行します。
それらのあいだ、ブラウザはHTMLの解析や他スクリプトの実行、レイアウト処理を行わないため、ユーザーに読み込みスピードが遅いと感じさせてしまいます。

解決方法

●方法1

次のcodeをfunctions.phpに追記します。
jquery.js以外のjsファイルの解析・読込をDefer(延期)します。

if (!(is_admin() )) {
    function defer_parsing_of_js ( $url ) {
        if ( FALSE === strpos( $url, '.js' ) ) return $url;
        if ( strpos( $url, 'jquery.js' ) ) return $url;
        // return "$url' defer ";
        return "$url' defer onload='";
    }
    add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}
●方法2

上記の方法1でうまくいかない場合は、下記を追記してみてください。

if(!is_admin()) {
// Move all JS from header to footer
  remove_action(‘wp_head’, ‘wp_print_scripts’);
  remove_action(‘wp_head’, ‘wp_print_head_scripts’, 9);
  remove_action(‘wp_head’, ‘wp_enqueue_scripts’, 1);
  add_action(‘wp_footer’, ‘wp_print_scripts’, 5);
  add_action(‘wp_footer’, ‘wp_enqueue_scripts’, 5);
  add_action(‘wp_footer’, ‘wp_print_head_scripts’, 5);
}