ウェブサイトを作るうえで大切な前提にページの表示スピードがあります。内容はもちろん大事ですが、そこに至るSEOやUXの観点でも、ページの表示スピードは重要です。
ページスピードはグーグルの検索ランクの評価の一つになっています。
また、スマホがユニークアクセスやページビューの50％を超えるという最近の調査もあるように、サイトを訪れたユーザーの印象は大事です。表示スピードが遅いという悪印象を与えないよう、調整をしていきたいですね。
Defer parsing of JavaScript
GTmetrixやPageSpeed 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);
}