ワードプレスを遅くするレンダリングブロックを改善して高速化しよう

ワードプレスを遅くするレンダリングブロック

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

ブログの表示速度を高速化させるための対策は行っていますか？

ページの読み込み速度は、ユーザビリティや離脱率に影響することなので、ワードプレスなどのWEBサイトの速度を計測できる「PageSpeed Insights」等のツールを使って、日々改善に取り組まれている人も多いと思います。

そこで適応可能な最適化の方法の１つとして、「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」があります。

私の場合「レンダリングブロック？意味がわからん。」となってしまったので調べてみると、どうやらワードプレスのファーストビューを重くしているようです。

そこで今回は、このレンダリングブロックを改善して、表示速度の高速化対策を行っていこうと思います。

レンダリングブロックとは何か

「レンダリングブロック」なんて聞き慣れない言葉だと思うので、簡単に説明をしておくとJavaScriptファイルなどのリソースを読み込んでいる間は、ブラウザの処理が停止してしまうことを意味します。

例えばプラグインを使ってワードプレスに機能を追加した際に、リソース(JavaScript・jQuery・CSS)ファイルをブログで読み込まれます。

これらのファイルは通常、ワードプレスの「ヘッダー」部分で処理が行われる仕組みになっているので、ユーザーがページを開いた時に読み込みが開始されます。

ブラウザはページを開く処理を行う際に、ヘッダーにあるJavaScriptなどのリソースファイルを発見すると一旦処理が停止し、ファイルの読み込みが優先して行われます。

この読み込みが終了するまで、ブラウザが動けなくなる状態がレンダリングブロックです。

ヘッダーのリソースが重くしている

レンダリングブロックが起こる原因は、ワードプレスのヘッダーにあるリソースのファイルです。

ヘッダーのリソースを読み込むことに時間が取られて、結果的にページの表示が遅くなってしまうことになります。

それじゃファイルを削除すればいいのかというと、リソースを使って動作しているプラグインや、コンテンツが停止してしまうので削除はできません。

これを例えるなら、「車はあるけどハンドルがない状態」のようなものなので、ファイルは残したままで読み込み自体を遅延させるのが効果的です。

レンダリングブロックを起こすようなリソースファイルは、「フッター」部分に移動させてブラウザがページを表示した後に読み込ませるようにします。

これなら従来の方法よりも、ワードプレスの表示速度を高速化させることができます。

リソースの読み込みを遅延させる方法

JavaScriptなどのリソースファイルを、フッターに移動して読み込みを遅延させる方法は、主に以下の２つになります。

リソース移動用プラグインを使う
「functions.php」ファイルを編集する

リソース移動用プラグインを使う

リソースを出力する場所を、ヘッダー(ページ上部)からフッター(ページ下部)に移動できるワードプレスプラグインはこちらの３つです。

JavaScript to Footer
Scripts To Footer
Head Cleaner

どれも内容としてはそれほど違いもなく、インストール&有効化するだけで使える簡単なものですが、「Scripts To Footer」に関しては移動させるリソースを、個別に選択することも可能です。

プラグインは管理画面メニューの「プラグイン」⇒「新規追加」から、プラグイン名を入力すればすぐに見つかるはずです。

ただし、プラグインは仕組みを理解することなく手軽に使える半面、不都合が起きてしまった時に対応ができない場合があるので、その点については注意しておきましょう。

「functions.php」ファイルを編集する

ワードプレスの子テーマにある「functions.php」に、JavaScriptファイルをフッターで読み込ませるためのコードを追加する方法になります。

方法といってもコードをファイル内にコピー&ペーストするだけなので、難しい作業はありません。

※functions.phpを編集する際は、必ずFTPソフトなどを使ってバックアップファイルを用意しておいて下さい。

準備ができたら、functions.phpファイル内に以下のコードを追加しましょう。

//レンダリングブロックするJavascriptの読み込みを遅延
function move_scripts_head_to_footer_ex(){
  //ヘッダーのスクリプトを排除
  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_print_head_scripts', 5);
  add_action('wp_footer', 'wp_enqueue_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'move_scripts_head_to_footer_ex' );

上記コードは寝ログさんがご紹介して下さっている、こちらの記事のものをそのまま参考にさせて頂きました。

⇒「WordPressヘッダーでレンダリングブロックしているJavascriptをフッターで読み込むカスタマイズ方法」

コード追加の注意点として、以下の２つを把握しておいて下さい。