プラグインW3 Total Cacheの使い方・設定方法!キャッシュでWordPressを高速化!

どうも。葉です。

この記事では、WordPressの表示速度を上げるためのプラグイン「W3 Total Cache」の使い方を紹介します。

1.動的ページと静的ページとW3 Total Cacheの導入目的

W3 Total Cache

まずは、プラグイン「W3 Total Cache」を導入すると、「なぜ表示速度を上げることができるのか?」を理解するための前提知識のお話から入ります。

ネット上には、大きく分けて動的ページと静的ページが存在します。それぞれの特徴を理解していきましょう。

動的ページは、アクセス毎にページを生成する

動的ページでは、ページを表示する際に、アクセスの度に毎回ページを生成します。

具体的には、下図のように、ブログやサイトにアクセスがあった際に、MySQLと呼ばれるデータベースからデータを読み込み、WordPressの型と合わせることでページを生成します。

動的ページの表示手順

静的ページは、既にあるページを表示させる

静的ページでは、ページを表示する際に、既にあるページを表示させます。

具体的には、下図のように、ブログやサイトにアクセスがあった際に、MySQLデータベースに格納されているページをそのまま表示します。

静的ページの表示順序

表示速度は「静的ページ>動的ページ」

動的ページ、静的ページにそれぞれメリット、デメリットは有るのですが、表示速度という点で見ると静的ページのほうが有利です。

また、ページの表示速度を向上させることは、「検索エンジン上での上位表示」や「ブログ訪問者へのストレス軽減」といった意味でも有利に働きます。なので、ページ表示速度は早くしておきたいのです。

W3 Total CacheでWordPressを静的ページに見せかけて高速表示

では、WordPressは、どうなのかというと、動的ページになります。なので、静的ページに比べると表示速度が遅いことがあります。

そこで、登場するのがプラグイン「W3 Total Cache」です。プラグイン「W3 Total Cache」を使うことで、キャッシュ(一時的に保存しておくデータ)を作成し、WordPress(動的ページ)を静的ページのように扱うことができます。

これによりブログの表示速度を向上させるのです。

実際に、「PageSpeed Insights」にて僕のブログの読み込み速度を計測しました。その結果を、次の図で紹介しますね。

「W3 Total Cache」なし

「W3 Total Cache」なし

「W3 Total Cache」あり

「W3 Total Cache」あり

この結果から、「W3 Total Cache」を導入することで、WordPressブログの表示速度が向上することが期待できます。

2.W3 Total Cacheのインストール・有効化

では、実際にプラグイン「W3 Total Cache」のインストールを行っていきます。

wpXを使用している方へ!
wpXサーバーで「W3 Total Cache」を使用すると500エラーにより管理画面にアクセスできなくなるそうなので、ご注意ください。

まず、WordPress管理画面の左メニューより「プラグイン→新規追加」をクリックします。

W3 Total Cacheのインストール手順1

プラグインの検索窓に「W3 Total Cache」と入力します。するとWordPressが、「W3 Total Cache」を検索してくれます。

そこで、「W3 Total Cache」の「今すぐインストール」をクリックします。

W3 Total Cacheのインストール手順2

「有効化」をクリックします。

W3 Total Cacheのインストール手順3

プラグイン一覧で、「W3 Total Cache」の背景が青くなっていれば、有効化されています。

W3 Total Cacheのインストール手順4

以上で、プラグイン「W3 Total Cache」のインストール・有効化は完了です。

3.W3 Total Cache の設定方法

次に「W3 Total Cache」の設定方法を紹介していきます。

※キャッシュ設定に関しては、サーバー関連の知識も必要で失敗するとエラーが発生する可能性もあります。

WordPress管理画面の左メニューより「Performance→General Settings」をクリックします。

W3 Total Cache の設定方法1

すると、次の画面に移動します。

W3 Total Cache の設定方法2

それでは、各項目の解説や設定方法について解説していきます。

一般設定:General Settings

W3 Total Cache の設定方法3

「Toggle all caching types on or off (at once)」にチェックを入れると「W3 Total Cache」のおすすめ設定になります。

チェックを入れることで不要な設定もONになってしまうのでチェックを外しておきましょう。

ページキャッシュ:Page cache method

W3 Total Cache の設定方法4

「Page Cache」にチェックを入れると、特定のページに始めて訪問者がアクセスした際に、キャッシュ(一時的に保存しておくデータ)が生成されます。

その状態で、他の訪問者が同じページにアクセスすると、キャッシュされたデータが呼び出されます。動的ページのようにアクセスの度にページを生成することはなくなるので、ページの表示速度が向上します。

なので、「Page Cache」にはチェックを入れておきましょう。

なお、「Page Cache Method」では、生成するキャッシュの形式を選択できます。HTML形式でキャッシュを生成する「Disk:Enhanced」を選択しましょう。

縮小化:Minify

W3 Total Cacheのインストール手順5

「Minify」にチェックを入れるとリソース(HTML/CSS/JavaScript)の圧縮を行ってくれます。

チェックを入れることで読み込みプロセスの高速化が期待できるのですが、HTML/CSS/JavaScriptについて詳しくない人には、おすすめしません。

理由としては、リソースと言うのは、テンプレートごとに異なっているので、テンプレートによっては、本来必要とされていたリソースが削除されてしまうことがあるからです。

また、よくこの設定の代わりにプラグイン「Head Cleaner」がおすすめされていますが、知識のない人は同様に行わないほうがよいと思います。

オペコードキャッシュ:Opcode Cache

W3 Total Cache の設定方法6

そもそも、オペコードって何だよ?と思ったので少し調べてみました。

オペコード (operation code, opcode) とは、機械語の1個の命令の部分で、実行する操作 (operation) の種類を指定する部分のこと、およびそのコード(符号)のことである。数式における演算子に相当する。

参照:オペコード – Wikipedia

僕自身も良くわからなかったので、この部分に関しては、チェックを外しておきます。

データベースキャッシュ:Database Cache

W3 Total Cache の設定方法6

「Database Cache」にチェックを入れることで、投稿や固定ページ、フィードの作成時間を短縮できます。

これにより、サイトの反応時間を短縮できると記述されています。

この項目は、「Enable」にチェックを入れおきましょう。

オブジェクトキャッシュ:Object Cache

W3 Total Cache の設定方法7

「Object Cache」にチェックを入れると「Object Cache APIを使っている動的サイトのパフォーマンスを向上する」と記述されています。

これにより、一般的な作業の実行時間が短縮されるとあるのですが、一般的な作業が具体的に何を指しているのかは、よくわかりませんでした。。。すみません。

注意
テンプレートのデザインを頻繁に変更する場合は、「Object Cache」のチェックは外しておきましょう。

ブラウザキャッシュ:

W3 Total Cache の設定方法8

「Browser Cache」にチェックを入れると、ブログに訪問したユーザーのブラウザ内に、そのページのリソース(ページの情報)を残すことができます。

これにより、同じユーザーが再度、同じページにアクセスしたときに、データベースからではなくブラウザのキャッシュから、そのページのリソースを読み込みます。

データベースからページまでページを読み込みにいく作業が省略されるので、ページの表示速度が大幅に向上します。

その他

以下、CDN、Reverse Proxy、Monitoring、Fragment Cache、Miscellaneous、Debug、Import/Export Settingsと言った項目がありますが、特に変更する必要はありません。

詳細設定

W3 Total Cache の設定方法9

また、Page Cache、Minify、Database Cache、Object Cache、Browser Cacheなどの詳細設定をすることもできますが、初期設定のままで問題ありません。

4.モバイル表示への対応

次に、モバイル表示への対応方法についてです。

レスポンスデザインに対応しているテンプレートを使用していると、PCとスマホのどちらからアクセスするかでPC表示、スマホ表示に別れます。

その際に、PCでアクセス下とすると、PC表示でキャッシュが作成されて、次にスマホでアクセスした際にPC向けのキャッシュが表示されてしまいます。

このままでは、表示があべこべになってしまうので、PCとスマホで別々でキャッシュを生成し、PCにはPC、スマホにはスマホのキャッシュを呼び出すようにします。

では、実際に具体的な設定方法を紹介していきます。

まずは、WordPressの管理画面より「Performance→User Agent Groups」をクリックします。

モバイル表示への対応の設定方法1

すると次の画面で、「high」と「low」の2つのユーザーエージェントグループがデフォルトで作成されています。

highは、スマホなどのユーザーエージェントグループで、
lowは、古い携帯のユーザーエージェントグループです。

なので、「Group name: 1.high」の「Enabled]にチェックを入れておきます。

モバイル表示への対応の設定方法1

「Group name: 2.low」に関しては任意で選択してください。

モバイル表示への対応の設定方法3

最後に「Save all settings」をクリックして設定を保存します。

モバイル表示への対応の設定方法4

以上でモバイルへの対応設定は完了です。

5.デザインや記事が変更されなかったらキャッシュリセット

次に、「W3 Total Cache」を導入後に、ブログのデザインを変更したり、ブログ記事を編集しても変更が反映されない事があります。

それは、変更前にキャッシュされたデータが表示されているからです。

そこで、キャッシュのリセットをする必要があります。手順は、簡単なので次の通りに行ってください。

WordPressの管理画面より「Performance→Dashboard」をクリックします。表示された画面で「empty all caches」をクリックします。

キャッシュリセット

これでキャッシュクリアは完了です。

以上で、プラグイン「W3 Total Cache」の設定・使い方の設定は完了です。

6.まとめ

この記事では、

  • 動的ページと静的ページとW3 Total Cacheの導入目的
  • W3 Total Cacheのインストール・有効化
  • W3 Total Cache の設定方法
  • モバイル表示への対応
  • デザインや記事が変更されなかったらキャッシュリセット

といったことをお話しました。

キャッシュ設定に関しては、サーバー関連の知識も必要で難しく感じますが、「W3 Total Cache」を使用することで簡単に設定することができます。ただし、失敗するとエラーが発生する可能性もあるので、心配な方は自分で知識を学んでから導入するようにしてください。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします