レンダリングブロックJavaScriptをフッターに移動しサイトを高速化

GoogleのPageSpeed Insightsでウェブサイトの読み込み時間を確認

ブロッキングスクリプトリソースが3つありレンダリングに遅延が発生しています

WordPressでブログを開始した当初JavaScriptの読み込みをbodyタグ終了直前で行うように変更しようと考えていたが、

PageSpeed Insightsを実行しサイトの表示状態を確認し、それらの設定をしていなかったことに気付いた。

計測結果は画像のとおり

モバイル

pagespeed-insights-mobile

PC

pagespeed-insights-pc

水色で囲った部分にレンダリングを妨げているJavaScriptがリストされていて、それぞれheadタグ内に配置されている状態になっていた。対処方法は、

  • script要素を削除する
  • 非同期読み込みに変更する
  • script要素をフッターに移動する

複数の手段があるが、今回は

script要素をフッターに移動

上の方法で対策することにした。

対策方法

今回、PageSpeed InsightsからレンダリングブロックJavaScriptとして指定されたスクリプトは、WordPressの標準状態で読み込まれるように設定されているJavaScriptで、WordPressの関数を利用してheadタグ内に設定されているscript要素をフッターに移動することができる。

comment-reply.min.js

WordPress3.9.2の公式テーマTwenty Thirteenの場合は、functioons.phpで

wp_enqueue_script( 'comment-reply' );

としてcomment-reply.min.jsを読み込む設定をしているので、以下のように変更した。

wp_enqueue_script( 'comment-reply', null, null, null, true );

5番目の引数をtrueにするとフッターにJavaScriptを移動することが可能。WordPress3.8.4環境の場合は、以下のように引数を設定してフッターに移動した。

wp_enqueue_script( 'comment-reply', 'http://dim5.net/wp-includes/js/comment-reply.min.js', array(), '2014-08-16', true );

jquery.jsとjquery-migrate.min.js

jquery関連についてもheadタグ内に配置されていたので、フッターに移動すると同時にcdnから読み込むように変更した。変更方法については、

WordPressのjQueryをcdnに変更

で以前記事にしてあるが、上のリンクで利用しているwp_register_scriptの5番目の引数をtrueに変更することで、フッターにjquery関連のscript要素を配置することができる。

再計測

レンダリングブロックJavaScriptをフッターに移動しPageSpeed Insightsで再計測したのが下の結果。

モバイル

new-pagespeed-insights-mobile

PC

new-pagespeed-insights-pc

ページのフッターで読み込むように変更したところ、レンダリングブロックJavaScriptのリストを消すことができた。また、速度の点数を数ポイント上昇させることが出来た。

Webエンジニアブログにコメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

レンダリングブロックJavaScriptをフッターに移動しサイトを高速化の記事にコメントを投稿

開発