W3-Total-CacheとCloudFlareの設定

W3-Total-CacheとCloudFlareの設定

Initializing...

ブログの高速化には「W3-Total-Cache」は必須のプラグインだ

ブログを高速化したい場合、これから説明するW3-Total-Cacheプラグインの導入がもっとも効果的で必須ともいえるプラグインです。 今回使用したW3-Total-Cacheプラグインのバージョンは0.9.4.1となっています。バージョンにより設定の表示内容が異なる場合がありますのでご注意ください。 プラグインはWordpress.orgからダウンロードできます。

プラグイン一覧でバージョン番号を確認

プラグイン一覧でバージョン番号を確認

設定を開始する前に!

W3-Total-Cacheは以下のような機能で高速化を実現する。

機能名 可否 内容
ページキャッシュ 採用 要求のあったページを毎回作成するのではなく、あらかじめキャッシュしてあるページを返却する
Mifify 未使用 HTML、CSS、JSの各ファイルからコメントや改行を取り除きコンパクトにする。コンパクト化した各ファイルの視認性が悪くなるのが欠点。
データベースキャッシュ 未使用 データベースアクセスを重視したブログには効果があるかもしれない。当ブログでの効果未知数。
オブジェクトキャッシュ 未使用 wordpressのオブジェクトをキャッシュし、php等の動作を高速化する。
ブラウザキャッシュ 採用 ブログで使用するリソース(画像、CSS、JS等)の有効期限を設定し、期限内のリソースはキャッシュから読むように設定。
CloudFlare 採用 W3-Total-Cacheプラグインに効果を倍増させるCDNサービス。別途CloudFlareアカウントが必要になる。

上記のとおり、今回設定するのは以下の3つの機能。

  • Pageキャッシュ
  • ブラウザキャッシュ
  • CloudFlare

設定はPerformaceメニューから

W3-Total-Cacheプラグインのインストールをすると、下図のように設定メニューとは別にPerformanceメニューが表示されますので、ここからポップアップしたメニューにGeneral Settingsメニューが表示されますので、まずここから設定を始めます。

W3-Total-Cacheの設定を開始

W3-Total-Cacheの設定を開始する

 

W3-Total-Cacheの設定

設定は、PerformanceメニューのGeneralサブメニューで一括で設定する基本設定と各機能毎に用意された個別メニューで設定する詳細設定に分かれています。

基本設定

General

画面のように、Toggle all caching types on or off (at once)はチェックをはずします。

一般設定画面

一般設定画面

Page キャッシュ設定

Pageキャッシュ設定画面ではEnableにチェックをいれて、Page cache methodがDisk:EnhancedになっていればOKです。なお、対象とするページ等のPageキャッシュの詳細は別途設定します。

Page設定画面

Page設定画面

Minify設定

Minifyは使用しないので、Enableのチェックをはずしてください。

Minify設定

Minify設定

データベースキャッシュ設定

データベースキャッシュも使用しないので、Enableのチェックをはずしてください。

データベースキャッシュ設定

データベースキャッシュ設定

オブジェクトキャッシュ設定

同様に、オブジェクトキャッシュも使用しないので、Enableのチェックをはずします。

オブジェクトキャッシュ設定

オブジェクトキャッシュ設定

ブラウザキャッシュ設定

ブラウザキャッシュは、Enableにチェックしてあること確認してください。もしチェックされていない場合はチェックを入れておきます。またこのブラウザキャッシュの詳細も別途設定します。

ブラウザキャッシュ設定

ブラウザキャッシュ設定

CDN設定

ここでいうCDNはCloudFlareとは別物ですので、こちらはEnableのチェックをはずしておきます。

CDN設定

CDN設定

PROXY設定

PROXY設定も使いません。Enableのチェックをはずします。

PROXY設定

PROXY設定

MONITORING設定

MONITORING設定も、Enbleのチェックをはずします。

Monitoring設定

Monitoring設定

詳細設定

Page Cache設定

general Pageキャッシュ設定といっても、Cache front pageとDon’t cache pages for logged in usersの2カ所のみチェックを入れ、後はすべてチェックしない。

Page Cache-General

Page Cache-General

pagecache reload Cache Preloadは、あらかじめキャッシュを用意しておく(preload)機能ですが先頭のAutommatically prime the page cache項目のチェックがはずれていれば、特に変更する必要はありません。

Page Cache-preload

Page Cache-preload

Purge Policy ここでの設定は、下図の先頭にあるFont page 、Post page 、Blog feedの3つにチェックを入れておくこと(上側)と、すべてのfeedにチェックをはずれていること(下側)を確認すれば他の初期設定のままです。

Page Cache-purge

Page Cache-purge

Page Cache-advanced advanced設定は、モバイル機で表示不具合が発生する場合、下記のようにReject user agentsのモバイルのユーザーエージェントリストを登録する。なお、後述するBrowser Cache設定にも同様の設定があるのであわせて利用してみてください。 ユーザーエージェントリストなど、モバイルに対する設定下記の記事を参考にしてください。

Browser Cache設定

General General設定では、以下に示す①と②のそれぞれの項目にチェックが入っていれば、後は変更する必要はありません。

BrowserCache-General

CSS,JS 特に変更する必要はありませんが、下記の赤枠内の有効期限は使用状況に応じて秒数で設定してください。CSSやJSファイルでは数日程度だとあまり効果がありませんので、できれば1ヶ月以上半年ぐらいの期間で設定(最大1年間)してください

BrowserCache-CSS,JS

BrowserCache-HTML HTMLページのキャッシュ時間の設定です。上記と同様ですが期限は初期設定のままで1時間(3600秒)のままにしてください。

BrowserCache-HTML

ここをチェック! Browser設定をすると上記で設定したページやファイルの有効期限がルートにある.htaccessファイルを自動書き換えします(書き換え可能な場合)。PHPがセーフモードにしか対応していないレンタルサーバーの場合はこれらのファイルを自分で追加しなければなりません。また、.htaccessファイルの自動書き換えにより500エラーが発生することもありますので、事前にバックアップしておくようおすすめします。

Media Media設定は、画像やその他のファイルの有効期限の設定で最大に設定できる1年間(3600秒x24時x365日=31536000のままにしておきましょう。

BrowserCache-Media

CloudFlareを設定する

アカウントの取得

CloudFlare(クラウドフレア)は、無料で使えるCDN(コンテンツデリバリーネットワーク)です。ここで紹介したW3-Total-Cacheプラグインに設定するだけであなたのブログは見違えるように早くなります。CloudFlareの設定するまえに、下記の記事を参考にCloudFlareのアカウントを取得してください。

設定

W3-Total-Cacheプラグイン導入当初はCloudFlareの設定画面は表示されません。後述するExtention設定でCloudFLareを有効にしてから始めます。 CloudFlare設定する項目は、

  1. Enableを設定する
  2. API Keyの設定
  3. 対象ドメインの設定
  4. 動作設定

の4つです。 下図のようにEnableにまずチェックをいれてから、②の”CloudFlare account email”にE-Mailアカウントを正しく設定してください。次にAPI Keyを取得するために枠右側にある”find it here”リンクをクリックします。もし、E-Mailアカウントが正しく入力さればAPI Keyは自動的に取得されます。 次に、対象ドメインですがwww等サブドメインの付かないドメイン名で入力します。本ブログのサイトURLは、b logpot.ok55.netですがここで入力するドメインはok55.netとなります。 最後に動作設定③を設定します。おすすめの設定は、Security level(Medium)、RocketLoader(Automatic)、Minification(CSS,Javascript, and HTML)です。

CloudFlare設定

CloudFlare設定

ExtensionでCloudFlareを有効に! CloudFlare設定画面を表示させるためには、まずはじめに管理画面左にあるPerformaceメニューより表示されるポップアップメニューの最下部にあるExtentionを選択します。下記に掲載したとおりCloudFlareに有効リンクが表示されますので、これをクリックして有効にしてください。(画面例はすでに有効にした場合の例です)。

Extension

Extension

 

設定内容はエクスポート可能

ここまでに設定した内容はファイルとしてエクスポート可能です。PermanceメニューのGeneralサブメニューの最下部にある下記画面で、設定内容をエクスポートしてください。

エクスポート指定画面

エクスポート指定画面

.htaccessの書き換えと500エラー

W3-Total-Cacheプラグインを設定した場合には、ルートおよびページキャッシュフォルダー(通常は/wp-content/cache/page_enhanced)にある2つの.htaccessの内容変更が必要になります。ルートの.htaccessはブラウザのキャッシュ期限設定に、ページキャッシュフォルダのものはセキュリティのために変更します。各変更内容は各設定完了後にPerformanceメニューからinstallサブメニューをクリックすると確認できます。 w3tc_install_menu もし.htaccessファイルが書き換え可能な場合にはこれらの変更は自動で行われますので、手動での変更は必要ありません。ただ、.htaccessファイルが自動変更されたために500エラーが発生することがありますので、気をつけてください。もしエラーが発生した場合には、FTPソフトで事前にバックアップした.htaccessファイルを戻すことでエラーを回避できることがあります(ルートにある.htaccessファイルのみ)。

デバックモードとキャッシュクリア

W3-Total-CacheとCloudFlareを使用すると様々なところにキャッシュが作成され、ページを更新しても以前の表示のまま最新状態が画面に反映されない場合が多々発生します。こういう場合は、それぞれのキャッシュを手動でクリアした後、CloudFlare設定画面にあるのデバックモード(上記④)に有効にすると変更内容がすぐに反映され作業がはかどり増す。

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

スポンサーリンク
ページ上部へ戻る