記事内にアフィリエイト広告を使用している場合があります。

ワードプレス

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

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

 

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

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

 

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

 

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

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

 

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

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

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

 

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

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

 

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

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

 

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

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

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

 

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

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

 

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

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

 

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

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

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

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

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

  • 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をフッターで読み込むカスタマイズ方法

 

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

  • <head></head>内で<script>タグを直接使用していると、エラーが出る場合がある。
  • <head></head>内でjQueryを利用するコードがある場合は、エラーが出ることがある。

この場合はプラグインやスクリプトが動作しなくなることもあるので、コードを適用した際はデベロッパーツールなどで、エラーが出ていないかを確認するようにしましょう。

jQueryが正常に読み込まれていない場合は、Console内に以下のエラーが出ることがあります。

Uncaught ReferenceError: jQuery is not defined

 

もしエラーがあるようであれば、functions.phpファイルの編集内容を、元の内容に戻すようにして下さい。

 

まとめ

これでレンダリングブロックしていたリソースを改善して、ワードプレスのファーストビューを高速化させることができました。

初めは意味がわからなかったことでも、こうして実際に取り組んでみると案外簡単にできるものだったので、まだ利用されていない方は活用されてみて下さい。

 

また、今回ご紹介した方法以外にも、ワードプレスの表示速度を速める対策は色々あるので、ページの読み込みが遅いと感じている場合は早めに改善しておきましょう。

私がこのブログで行っている高速化対策についてもご紹介していますので、気になる方はぜひ参考にされてみて下さい。

 

合わせて読んでほしい

WEBサイトのページスピード選手権!表示速度が最も速いのはどこだ?

人気ブロガーのページ速度を検証!好かれるブログに必要な速さとは

ワードプレスを高速表示!ブログの読み込み速度を速める5つの設定

たったこれだけ!?エックスサーバーの高速化機能でブログが加速する

サイドバーやフッターをスマホの時だけ削除して表示を高速化させるよ

こちらも読まれています

ABOUT ME
フリ
ブログで気になることをただひたすらに書き続けて、10ヶ月目で月間10万PV超えを達成。2018年5月から個人事業主として活動開始。今は資産運用に注力し、投資歴は5年になる。仮想通貨⇒DeFi・BCG・エアドロ案件など。BTC・ETHとNISAで積立中。自由であるために。to be free>>詳細プロフィール