【W3 Total Cache】Webサイトの表示を高速化して読みやすくするプラグインを徹底解説!

w3totalcache_アイキャッチ画像

こんな方に読んで欲しい!

  • webサイトの表示速度を改善したい!
  • webサイトの直帰率が高いので改善したい!
  • Google Page speedでのモバイルの点数を高めてSEOに役立てたい!
Webサイトの表示スピードを上げて読者の離脱を減らすにはどうしたら良い・・・?

質の高い記事をたくさん書いても、Google検索などの検索結果の上位に表示されないときは、「サイトの表示速度」を改善する必要があるかもしれません。

 

Google検索で上位に表示されるためには、記事の質やサイトの直帰率など様々な要素がありますが、Webサイトの「表示スピード」もその1つです。

表示順位に大きく影響を与えると言われています。

 

そこで今回は、Webサイトの表示スピードを改善できる「W3 Total Cache」をご紹介したいと思います。

さらに詳しく!

Webサイトの高速化は、読み込みを遅延させる「Lazy Load」プラグインも効果的です。

[blogcard url=”https://iblab.net/lazy-load/”]

もくじ

1. webサイトの表示を高速化する「W3 Total Cache」とは?

名前に「Cache(キャッシュ)」とあるように、キャッシュを利用して高速化するプラグインです。

キャッシュとは?

一度利用したデータを蓄積しておき、次回以降、そのデータを利用する時に素早く参照できるようにするための仕組みです。

Webサイト関係だけでなく、業務用のWebシステムなどにも利用される技術です。

キーボードの「Ctrl+F5」を押すと、ブラウザのキャッシュを使わずに、サーバーにある最新の情報を読み込んで画面を表示します。キャッシュをスーパーリロードとも言います。

WordPressはデータベースに記事の情報を保存しています。誰かがwebサイトを見に来ると、毎回データベースから記事を取り出してくる仕組みなので、たくさんの人が見ようとすると、混雑し記事の取り出しが遅くなってしまうのです。

そんな時、あらかじめ保存しておいた「キャッシュ(Cache)」を替わりに渡すことで高速化できるわけです。

この効果を最大限に発揮できるプラグインとして「W3 Total Cache」はサイト運営者から人気があります。

2. W3 Total Cacheの導入方法

「W3 Total Cache」はWordPress公式プラグインのため、WordPress管理画面 > プラグイン >新規追加 から簡単に導入できます。

wordpress_add_plugin

 

検索ボックスに「W3 Total Cache」と入力すると、上位に表示されます。表示されない場合は、製作者名「BoldGrid」で検索するのが効率的です。

w3totalcache_install_

「今すぐインストール」→「有効化」をクリックすれば完了です。

 

3. W3 Total Cacheの使い方

W3 Total Cacheを使うためには設定が必要です。今回は「初心者向けの簡単設定」と「中級者以上向けの詳細設定」に分けて説明をします。

設定ページで、プラグイン>インストール済みプラグイン> W3 Total Cache 欄の「 Settings 」 をクリックします。

w3totalcache_click_settings

3-1. W3 Total Cache の設定(初心者向け)

設定項目がたくさんありますが、初心者の方は「ページキャッシュ」と「ブラウザーキャッシュ」だけでも効果を期待できます。

 

3-1-1. 「ページキャッシュ」の設定

「ページキャッシュ」までスクロールし、「Page Cache」にチェックを入れ有効化します。チェックが終わったら、画面左下の「すべての設定を保存」をクリックします。

pagecache_pic

 

3-1-1. Browser Cacheの有効化

またWebページを下にスクロールをします。

「ブラウザーキャッシュ」の「ブラウザーキャッシュ」にチェックを入れ有効化します。チェックが終わったら、画面左下の「すべての設定を保存」をクリックします。

browserchache

以上で、初心者向けの簡単な設定です。こちらの設定でも十分に効果を発揮します!

 

3-2. W3 Total Cacheをカスタマイズ(中級者以上向けの詳細設定)

初心者向けと同様に、プラグイン>インストール済みプラグイン> W3 Total Cache 欄の「 Settings 」 をクリックします。

w3totalcache_click_settings

3-2-1. 「一般設定 > 一般」の設定

「一般」の項目には「Preview mode」があり、設定を変更する前にWordpressプラグインの干渉が起きないかチェックできます。

重要なサイトであれば、こちらの機能を利用することをオススメします。

 

「Preview mode」の「有効化」ボタンをクリックして有効化します。

general

 

クリックをすると、画面上部に「プレビューモードの有効化に成功しました」と表示されます。

totalcachepreviewmode

成功したら、そのまま同じ画面の下の方の設定を変更してみてください。

設定変更後に「プレビュー」をクリックすると、あなたのWebサイトが表示されます。

Webサイトの見た目が崩れていなければ、問題ありません。もしも、Webサイトの見た目が崩れていれば、何かしらが干渉・競合してしまっているので、設定を戻しましょう。

 

 

プレビューでの確認が終わったら、「無効化」もしくは「デプロイ」をクリックします。

total_cache_mukou

ここに注意!

「無効化」は、設定内容を破棄して元に戻します。

「デプロイ」をクリックすると、プレビューモードで変更された設定をサイトに適用します。クリックするときは注意をしてください。

 

3-2-2. 「一般設定 >ページキャッシュ」の設定(重要)

同じページをまた下にスクロールすると、「ページキャッシュ」の項目があります。

Page Cacheの「有効化」は必ずチェックをしましょう。この設定が、本プラグインで特に重要な設定です。

また「Page Cache Method」は、「ディスク:拡張」がデフォルトですが、そのままでOKです。設定したら、忘れずに保存してくださいね。

totalcache_pagecache

さらに詳しく!

Page Cache Method のプルダウンは、以下の画像のように選択肢が表示されます。キャッシュする方法を選択するのですが、レンタルサーバーの場合は「ディスク:拡張」のままでOKです。

 

3-2-4. 「一般設定 >圧縮」の設定

同じページをまた下にスクロールすると、「圧縮」の項目があります。

「圧縮」の設定では、特に設定することはありません。圧縮欄の「有効化」にチェックがついていないことを確認しましょう。

圧縮の設定をすると、CSS・JavaScriptのファイルを圧縮してサイトの高速化を図ることができます。

ただ、同じ機能がWordpressのテーマに含まれていることがあり、テーマの機能とプラグインが干渉しあって、不具合が起きる可能性があります。

 

3-2-5. 「一般設定 >Opcode Cache」の設定

設定不要です。

 

3-2-6. 「一般設定 >データベースキャッシュ:」の設定

「データベースキャッシュ:」の設定をすると、サーバーがデータベースにアクセスをして情報を処理する時間を減らすことができます。

ただ、サーバーマシンのスペックによって、この設定をすることで動作が重たくなってしまうことがあります。そのため、こちらの設定は「OFF」のままにしておくことをオススメします。

 

3-2-7. 「一般設定 >object Cache」の設定

「オブジェクトキャッシュ」の機能は、データベースへアクセスをして動的にWebページを作成する仕組みのサイトで効果を発揮します。

通常のブログであれば、利用する必要がありませんので、「有効化」欄にチェックがないことを確認します。

 

3-2-8. 「一般設定 >ブラウザーキャッシュ」の設定

「ブラウザーキャッシュ」欄の「ブラウザーキャッシュ」をチェックします。チェックが終わったら、画面左下の「すべての設定を保存」をクリックします。

capture-20200508-143909

さらに詳しく!

ブラウザーキャッシュは、訪問者がWebサイトを閲覧した時に、サイトのデータをキャッシュとして保存をさせておき、次回訪問時のサイト表示を高速化するための仕組みです。必ずチェックをしておくことをオススメします。

 

3-2-9. 「一般設定 >CDN」以降の設定

以下の項目は、設定不要です。

  • CDN
  • リバースプロキシ
  • User Experience
  • Statistics
  • Fragment Cache
  • ライセンス

 

3-2-10. 「一般設定 >その他」の設定

「その他」の設定では、「Google Page Speed ダッシュボードウィジェットを有効化」と「NFS 向けにディスクの拡張ページを最適化する」のチェックを外します。

「Google Page Speed ダッシュボードウィジェット」は、Wordpress内でGoogle Page Speedの機能を使えるというものですが、公式サイトでスピード計測をすれば事足ります。

 

3-2-11. 「ページキャッシュ > Page Cache」の設定

次に、Page Cacheの詳細設定を行います。Wordpress左メニューより、 パフォーマンス > ページキャッシュ をクリックします。

下の画像の通り設定をします。設定箇所は次の項目です。

  • フロントページをキャッシュ
  • フィードのキャッシュ:サイト、カテゴリー、タグ、コメント
  • Cashe SSL (HTTPS)requests
  • ログイン済みユーザに対してページをキャッシュしない

設定変更後、「すべての設定を保存」をクリックします。

さらに詳しく!

CSSの修正をしたときにキャッシュが残ったままで、設定が反映されなくて困ったことがあると思います。「ログイン済みユーザーに対してページをキャッシュしない」にチェックをしておくと、ログインしている場合はWebブラウザにキャッシュが残らなくなるため、すぐにCSSの反映されたデザインを見ることができるようになります。

 

3-2-12. 「ページキャッシュ > キャッシュプリロード」の設定

下の画像の通り、キャッシュの保存期間を設定します。設定箇所は次の項目です。

  • ページキャッシュを自動に事前準備する:ON
  • Preload the post cache uopn publish events:ON

設定変更後、「すべての設定を保存」をクリックします。

 

3-2-13. 「ページキャッシュ > 詳細」の設定

次に、「詳細」の設定では、Compatibility modeの「有効化」にチェックをします。

翻訳

Decreases performance by ~20% at scale in exchange for increasing interoperability with more hosting environments and WordPress idiosyncrasies. This option should be enabled for most sites.

より多くのホスティング環境やWordPressの特異性との相互運用性を高める代わりに、パフォーマンスを大規模に最大20%低下させます。このオプションは、ほとんどのサイトで有効にする必要があります。

 

3-2-14. 「ブラウザーキャッシュ > 詳細」の設定

WordPress左メニューより、 パフォーマンス > ブラウザーキャッシュ をクリックします。

ブラウザーキャッシュの設定画面では、次の通り設定することをオススメします。設定箇所は次の箇所です。

  • Last-Modified ヘッダーを設定
  • Expires ヘッダーを設定
  • キャッシュ制御ヘッダーを設定
  • エンティティタグを設定
  • HTTP圧縮を有効化

チェックが終わったら、画面左下の「すべての設定を保存」をクリックします。

 

4. 「W3 Total Cache」のメリット・デメリット

4-1.「W3 Total Cache」のメリット

WordPressプラグイン「W3 Total Cache」のメリットは下記のとおりです。

ここがポイント!

  • 無料で利用できる
  • WordPress公式プラグインのため、インストールが簡単
  • 導入しているユーザーが多く情報が多い
  • 初期設定が少ないためシンプルに使える
  • やる気になればカスタマイズもできる

 

4-2. 「W3 Total Cache」のデメリット

メリットをいくつか書きましたが、「W3 Total Cache」にはデメリットもあります。

ここに注意!

  • WordPressのテーマによって干渉してしまい不具合が起きる

WordPressのテーマは日々進化してきています。少し昔であればキャッシュのプラグインは「W3 Total Cache」が主流でしたが、近年キャッシュ機能がWordpressのテーマにも付いており、本プラグインを利用しなくても良いことがあります。気になる人は、テーマの作成元のFAQサイトや問い合わせで確認をしてみると良いかもしれません。

 

5. まとめ

表示にかけられる時間は「3秒」です。これ以上かかると離脱される可能性が高まります。

Webサイトの表示スピードを上げることは、Googleの検索で上位に食い込むために重要な要素です。

そのための方法の1つとして「キャッシュの導入」のプラグイン「W3 Total Cache」を徹底解説しました!

一般的な機能なため「キャッシュの導入」機能を持つテーマも多数あります。重複して機能を使わないように気を付けてくださいね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
もくじ