WEB制作(WordPress)

WordPressが重い!JavaScriptを1クリックで最適化

wordpressのJavaScriptをフッター移行の見出し画像

WordPressサイトを、PageSpeed Insightsで計測すると、「レンダリングを妨げるリソースの除外」という改善項目が出てきます。ものすごく噛み砕いて言えば、「JavaScriptと呼ばれるコードを、最適化してあげてね」ということです。

teru
teru
しかし、プログラミングの知識がないと、なぜそれが必要なのか、結局何をすればよいかわかりませんよね。

そこで今回の記事では、「プラグインを使って、かんたんにJavaScriptを最適化する方法」をご紹介します。1クリックでかんたんに解決できるので、初心者のかたこそ、ぜひお読みください。

そもそもJavaScriptとは?

wordpressのJavaScriptをフッター移行の見出し画像そもそもJavaScriptとは何でしょうか?

JavaScriptとは、WEBページに動きをつけるためのプログラミング言語です。たとえば、写真のスライドショーや、アニメーション、クリックすると表示されるポップアップ、これらはすべてJavaScriptによるものです。

JavaScriptのおかげで、サイト訪問者にとって、使い心地のよいサイトをつくることができています。

では、このJavaScriptと、サイト表示速度には、どういう関係があるのでしょうか。そして、JavaScriptをフッターに移行すると、なぜ重くなってしまったWordPressサイトが高速化するのでしょうか。

JavaScriptをフッターに移行する理由

wordpressのJavaScriptをフッター移行の見出し画像なぜ、JavaScriptをフッターに移行すると、サイト表示速度が改善されるのでしょうか。その理由は、「サイトが表示される仕組み」にあります。

WordPressサイトが表示される仕組み

WordPressサイトが表示されるまでの仕組みをご存知でしょうか?

かんたんにご説明しますので、下図をごらんください。

wordpressのJavaScriptをフッター移行する図

上の図は、WEBページの中身を、図で表したものです。

ページは大きく2つに分けることができ、それぞれ「ヘッド部分<head>」「ボディ部分<body>」と呼ばれます。(説明をわかりやすくするために、かなり大まかにまとめています)

ヘッド部分<head>

サイトの情報が書かれている場所です。サイト名、サイトの概要などが書かれます。いわば、サイトのプロフィール部分です。訪問者にはこの情報は見えません。

 

ボディ部分<body>

サイトの見た目に関する情報が書かれている場所です。普段あなたが見ているのは、ボディ部分に書かれている情報になります。

サイト情報は、上から(ヘッド部分から)下に向かって順番に読み込んでいく仕組みになっています。つまり、ヘッド部分<head>の情報の読込が終わらないと、ボディ部分<body>は表示されない=訪問者はサイトを見ることができない仕組みになっています。

そのため、ヘッド部分<head>の読込み時間をなるべく短くすることが、サイト表示速度に改善につながります

このことは、Googleの公式ドキュメントにも記載されています。

ページを高速で読み込むには、初回ペイント時に必要なスクリプトやリンクをインライン化して、それ以外の要素は後回しにします。

サイトに初回ペイントの遅延を引き起こすリソースを使用しない  |  Tools for Web Developers  |  Google Developers 

WordPressサイトの表示は「JavaScript待ち」

さて、ここからがやっと本題です。

WordPressサイトでは、JavaScriptがヘッド部分<head>に設置されていることがあります。前述のとおり、JavaScriptは、サイトに動きをつけるためのもの、あくまで演出するためのものであり、サイトを表示させるために、最優先で読み込むべきものはありません。

wordpressのJavaScriptをフッター移行する図

むしろ、JavaScriptがヘッド部分<head>にあることで、読込が遅くなってしまいます。サイト表示が「JavaScriptの読み込み待ち」状態になってしまう。これがWordPressサイトが重くなる原因の一つです。

JavaScriptをフッターに移行すれば、まずサイトを表示させることができる

では、サイト表示が「JavaScriptの読み込み待ち」状態になることを避けるには、どうでしょうか。その答えが、JavaScriptをフッターに移行させる、です。

wordpressのJavaScriptをフッター移行する図

繰り返しになりますが、WordPressサイトを高速化したいのであれば、まず取り組むべきは、サイトを表示させるまでの時間を短縮することです。JavaScriptをフッターに移行すれば、表示時間を短縮できるので、サイト表示速度が改善することができます。

プラグインでJavaScriptをフッターに移行する

ここからは、JavaScriptをフッターに移行する方法を、具体的に解説します。

まずは、「JavaScript to Footer」というプラグインを使った方法についてです。

JavaScript to Footeを使うメリット
  • わずか2kbしかない
  • インストールするだけなのでかんたん
  • ファイルを編集する必要がなく低リスク

テーマとの相性を確認する

プラグインをインストールする前に、念のため、お使いのテーマとの相性を確認しておきましょう。「JavaScript to Footer テーマ名」でGoogle検索し、不具合が発生したケースがないか調べてみましょう。

「JavaScript to Footer」を使うと、不具合が発生しそうであれば、他のプラグインを使うか、次の章でご説明する「ファイルに直接書き込む」を試してみてください。

インストール手順

それでは、「JavaScript to Footer」をインストールしていきましょう。

wordpressのJavaScriptをフッター移行のプラグイン

WordPressの管理画面、左メニュー「プラグイン」→「新規追加」を選択。検索窓に「JavaScript to Footer」と入力します。

wordpressのJavaScriptをフッター移行のプラグイン

上記のプラグインが見つかったら、「インストール」→「有効化」と選択。

以上で終了です。とても簡単ですね。

プラグインを使わずに、JavaScriptをフッターに移行する

wordpressのJavaScriptをフッター移行の見出し画像

プラグイン「JavaScript to Footer」がテーマと相性がよくなかった場合、もしくはプラグインを使いたくないという人向けに、直接ファイルに書き込む方法も解説します。

functions.phpへの書き込み

この方法を行うかたは、事前に必ずバックアップとってください。バックアップは、下記の記事が参考になります。

バックアップがとれたら、書き込みをしていきましょう。

wordpressのJavaScriptをフッター移行のプラグイン
  1. WordPress管理画面の左メニュー「外観」→「テーマエディター」を選択
  2. 右メニュー「テーマファイル」→「テーマのための関数(functions.php)」を選択
  3. 表示されたコードをスクロールし、一番下の行に、下記のコードをコピペ
function move_scripts(){
  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' );

これで、WordPressが書き出しているほとんどのJavaScriptを、フッターへ移行することができます。

作業としては以上になります。

お疲れさまでした。

まとめ

wordpressのJavaScriptをフッター移行の見出し画像

今回の記事をまとめると以下のようになります。

  • サイト表示速度を上げるには、ヘッダー部分の読込みを早くするべき
  • JavaScriptがヘッダーにあると、サイト表示が「JavaScript読込み待ち」になってしまう
  • JavaScriptをフッターへ移行すれば、サイト表示時間を短縮できる
  • プラグイン「JavaScript to Footer」を使えば、かんたんにフッターに移行できる

WordPressサイトは、メンテンスしなければ、どんどん重くなってしまいます。SEOにも不利なので、サイト表示速度はできるだけ改善しましょう。

WordPressサイトを高速化するための方法は、下記の記事にまとまっていますので、ぜひあわせてお読みください。

【Google Speed Update】サイト表示速度を上げるために必要な施策サイトの表示速度を向上させる方法には多くの方法があります。しかし、全て対応するには膨大な時間と手間がかかります。まずは、この記事でお伝えすることから取り組みを始めてみましょう。...
【初心者向け】WordPressが重いときのおすすめプラグイン5選WordPressが重く、サイト表示速度が遅いと感じている方が、プラグインをつかうことで、かんたんに速度改善できるようになります。主に初心者向けに書いています。...
ABOUT ME
テル(webmarksライター)
テル(webmarksライター)
WEBエンジニア / プランナー。食品メーカーで営業、WEBディレクターを経験。人手不足により、サイト制作や広告運用など、幅広く兼務するうちに、ECサイト運営スキルを一通り身につける。Amazon出店時には、10ヶ月で月商7桁達成。2019年に独立。人にキャリアを考えてもらう「キャリアブレスト」の企画も行っている。
【おすすめ】個人事業主は加入必須の安心サービス!
フリーナンス

フリーナンスは、フリーランス・個人事業主のための「お金と保険のサービス」です。会員登録するだけで、業務遂行中の事故、仕事の結果の事故、受託物の事故などを最高5,000万円まで無料で保証。業務中の万が一の情報漏えい、著作権侵害、納品物の瑕疵、納期遅延に対しても守ってくれるため、個人事業主なら加入必須のサービスです。

評価(星5個中)
即日払い請求書をフリーナンスが買い取り(最高300万円まで)、その代金を即日払い。手数料は請求書額面の3.0%~
あんしん補償事故等の補償(最高5,000万円)、情報の漏洩や著作権侵害などによる事故の補償(最高500万円)
振込専用口座ご希望の口座名義で開設可能、口座維持費も振込手数料も無料

詳細ページ公式ページ

RELATED POST