ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

W3 Total Cache(W3 トータル・キャッシュ)のベストな設定方法

WordPressのキャッシュ系プラグインとして、人気の高い「W3 Total Cache」の設定方法です。サーバやウェブサイトによってベストな設定方法を紹介します。また「W3 Total Cache」で不具合が出た場合の対策、削除方法もご紹介します。

「設定が難しい」と言われる「W3 Total Cache」ですが、サーバやブログに合わせて最適な設定ができれば、非常に強力なキャッシュプラグインとして恩恵を受けることができます。

特にページ数が多いウェブサイトの場合は、他のキャッシュプラグインよりサーバも安定して表示速度も上がっています。

サーバやウェブサイトに合わせて「W3 Total Cache」のベストな設定を備忘録も兼ねてご紹介します。

W3 Total Cacheがお薦めのケース

W3 Total Cacheは、データベースのキャッシュやオブジェクトキャッシュなど、様々なキャッシュ機能をトータルで設定、管理できます。

サーバのスペックが高い場合、W3 Total Cacheの機能をフル活用できます。
CPUやメモリの多いVPSや、専用サーバでウェブサイトを運営している場合はW3 Total Cacheはお薦めのキャッシュ系プラグインです。

Page Speed Insigntsの結果

ページ速度改善のチューニングはW3 Total Cacheだけではありませんが、W3 Total Cacheによるキャッシュで大幅に改善されています。

Page Speed Insightsで計測した結果が下記になります。

W3 Total Cacheの設定方法

W3 Total Cacheをインストールするとセットアップガイドが表示されますので「スキップ」をクリックして手動で設定していきます。

W3 Total Cache セットアップガイド

W3 Total Cacheの設定は手動で設定を進めていきます。

まずは、基本的な設定の「General Settings」から設定を進めていき、次にページキャッシュやオブジェクトキャッシュなどの細かな設定を進めていきます。

設定をする前に気をつける点

これから設定を進めていきますが、気をつける設定が「データベスキャッシュ(Database Cache)」と「オブジェクトキャッシュ(Object Cache)」の設定です。

W3 Total Cacheで不具合が起こる原因がこの2つのキャッシュ設定です。
この2つのキャッシュ設定は、サーバのスペックに合わせて設定することが重要になりますので、設定の時には慎重に設定することになります。

ページキャッシュ

ページやクエリ、HTTPヘッダーなどのキャッシュについての設定ができます。

設定で表記されている「Enable(イネーブル)」は有効という意味です。
ちなみに逆の無効は「Disable(ディスエブル)」です。

一般

ページやRSSフィードなどのキャッシュ設定になります。

W3 total cacheの一般設定

  • 投稿ページをキャッシュはON
  • フロントページはキャッシュしないはOFF
  • フィードのキャッシュはON
    RSSフィードの配信をしていない場合はOFF
  • XML MIME タイプを処理はON
    サイトマップのXMLを生成している場合はONにします。
  • SSL (HTTPS) リクエストをキャッシュはON
  • クエリ文字列変数を使ってURLでキャッシュを実行は、サイト内検索があり、よく検索されている場合はONにすると検索結果がキャッシュされます。
  • 404 (not found) ページのキャッシュはON
    404Not Foundページが無い場合はOFFにします。
  • ログイン済みユーザーに対してページをキャッシュしない。は、ONにします。
  • 以下のユーザー権限グループに対してページをキャッシュしない。は、ユーザーレベルごとにキャッシュの表示・非表示を設定できます。運営に合わせて適宜設定してください。

Aliases

ミラーサイトなど、複数のドメインで同じコンテンツが存在する場合に設定します。
通常のウェブサイトはOFFにします。

Aliasesの設定

該当するウェブサイトの場合はONにして「Additional home URLs」にドメインを記入します。

キャッシュプリロード

キャッシュはアクセスされたページがキャッシュされ、2回目の表示からキャッシュが表示されるため表示が早くなります。

ページへのアクセスが無くても、事前にページをキャッシュするのが「キャッシュプリロード」機能になります。
便利な機能ですが、ページ数が多い場合はサーバーに負荷がかかります。そのためOFFでも問題はありません。

キャッシュプリロードをONにした場合は自動的にキャッシュする間隔やプリロードするタイミングを設定できます。

キャッシュプリロードの設定

  • 更新期間は、15分(900秒)間隔で良いでしょう。
  • キャッシュするページ数は10で良いでしょう。サーバーの負荷を抑えたい場合はページ数を減らします。
  • サイトマップURLにsitemap.xmlのURLを記載すると、sitemap.xmlの情報を基にページをキャッシュしていきます。
  • Preload cache upon publishing a postはONにします。
    非公開のページが公開になった時にキャッシュするようになります。
  • Preload cache upon updating a postは、ON、OFFどちらでも良いです。
    ページが更新された後にキャッシュされます。

パージポリシー

記事やページの投稿・更新をした際のキャッシュのパージ(削除)を設定できます。

キャッシュのパージ設定パージもサーバに負荷がかかるため、パージさせるコンテンツは少ない方が良いです。

  • 削除するフィードの種類は、全てOFFでも良いでしょう。
  • パージ上限は、アーカイブのパージ上限を設定できます。全て削除する場合は「0」を記入します。
    例えば、ページ数が1,000以上ある場合、記事を投稿しても古いアーカイブまでパージする必要はありません。
  • 追加ページは、任意のページをパージする設定ができます。
    例えば、記事を固定ページで表示している場合は、固定ページのURLを記載します。

REST API

W3 Total CacheのPROではREST APIのキャッシュ機能が利用できます。

REST APIのキャッシュ設定

  • フリーの場合は「キャッシュしない」が選択されます。
  • Disable REST APIを選択すると、REST API機能を無効にすることができます。
    セキュリティは向上しますが、REST APIを利用しているプラグインを導入している場合などは不具合が発生します。通常はOFFにしておきます。

詳細

ページやディレクトリ、HTTPヘッダーなど、細かい設定ができます。

W3 Total Cacheの詳細設定

  • 後期の初期化は、フラグメント(一部)キャッシュに関する設定になります。
    動的コンテンツが多い場合はONにしますが、サーバの負荷は大きくなります。
    ON / OFFを切り替えてパフォーマンスを測定した方が良いでしょう。
  • Late cacingは、キャッシュのキーをコントロールする機能になります。一般的なウェブサイトではOFFにします。
  • キャッシュの有効期間は、頻繁に更新される場合は「3600秒(1時間)」ほとんど更新されない場合は「86400秒(24時間)」「604800秒(7日間)」など、ウェブサイトの更新頻度に合わせて設定してください。
  • ガベージコレクション間隔は、期限切れキャッシュを削除する間隔を設定できます。
    サーバーのリソースにも影響するため、パフォーマンスを測定しながら設定します。
    目安としてウェブページが1,000ページ以上ある場合は、3600秒より徐々に減らして最適値を探ります。1,000ページ以下の場合は3600秒より徐々に増やして最適値を探ります。
  • コメントcookieの有効時間(TTL:Time to Live)は、コメントするユーザーが多いウェブサイトでは1800(30分)や3600秒(1時間)が良いでしょう。
    コメントが少ない、またはOFFの場合は「-1」(WordPressのデフォルト)に設定します。
  • 利用可能なクエリー文字列は、クエリパラメーターを含むURLをキャッシュします。
    例えば「category=news」と記入すると「?category=news」が含まれるURLがキャッシュされます。
    動的なコンテンツでも頻繁に使用されるクエリパラメーターを記入することでキャッシュされ、パフォーマンスが向上します。
  • 拒否されたユーザーエージェントは、キャッシュページを表示しないデバイスやボットを指定できます。例えば「Googlebot」と記入すると、Googleのボットにはキャッシュを表示しません。
    ※Googlebotのユーザーエージェント
  • 拒否されたクッキーは、指定したCookieを使用するページをキャッシュから除外します。Cookieを利用したプラグインを利用している場合は記入することがあります。
  • Never cache pages associated with these categories:は、キャッシュから除外するカテゴリーのカテゴリー名、またはIDを記入します。
  • Never cache pages that use these tags:は、キャッシュから除外するタグのタグ名、またはIDを記入します。
  • Never cache pages by these authors:は、キャッシュから除外するユーザーページのユーザー名を記入します。
  • Never cache pages that use these custom fields:は、特定のカスタムフィールドを含むページがキャッシュから除外します。除外する場合はフィールド名を記入します。
  • キャッシュ除外リスト:は、キャシュから除外するページを指定できます。
    お問い合せページを除外する場合は「/contact/」や「/^\/contact\/.*/」などと記入します。
  • 非末尾のスラッシュのページ:は、URLの最後「/contact」と最後にスラッシュの無いページ(ディレクトリー)をキャッシュする場合に記載します。
    「/contact」や「/^\/contact\/[a-z0-9-]+$/」などと記入します。
  • ページヘッダーを指定:は、キャッシュに含める追加のHTTPヘッダーを指定するための機能です。
    例えば、XMLRPCのPingback機能を無効にしている場合は「X-Pingback」を削除しても良いです。「X-Frame-Options」など任意のHTTPヘッダーも追加できます。

圧縮

W3 Total Cacheには、htmlやCSS、javascriptファイルのminify(最小化)機能が備わっています。この機能の設定を行うことができます。

サーバーや他のプラグインとの互換性によって、minifyや、リライト機能が正しく動作しない場合もあります。
(キャッシュをパージすることで機能することもあります)

一般

w3 total cacheの圧縮設定

  • URL 構造をリライト:は、ONにします。
    この機能は、CSS、JSファイルをユーザーフレンドリーなURLに表示します。
    例えば「/test.js?ver=4.4」を「/test.js」のような形式にします。
  • ログイン中のユーザーに対する圧縮を無効化:は、OFFにします。
  • 圧縮エラー時の通知:は、適宜ご設定ください。

HTML&XML

HTML、フィードのminify機能の有効化、設定ができます。

JSをminifyすると不具合が発生しやすいので、JSファイルをminifyする場合は、検証しながら設定してください。

w3 total cache設定HTMLのminify

JS

javascriptファイルのminify機能を利用する場合は有効化します。詳細設定ではJSファイルの読み込み方法などの設定ができます。

JSのminifyはトラブルが発生しやすいので、有効化する場合は検証しながら調整を進めてください。

W3 Total CacheのJS minifyの設定方法

  • Minify engine settings:は、JSファイルの読み込み方法を設定できます。
    JSを使用した非ブロック」は、JSファイルが非同期でロードされます。
    asyncを使用した非ブロック」は、レンダリング後にJSファイルが並行で読み込まれます。JSの実行順序は保証されませんが、ページの表示速度は向上します。
    deferを使用した非ブロック」は、HTMLが解析後にJSが実行されますので、ページの読み込み速度は高速です。JSの実行に依存関係がある場合は有効な選択です。
    extsrcを使用した非ブロック」は、CDNなどの外部からJSファイルをロードしている時に有効な選択です。
    asyncsrcを使用した非ブロック」は、外部からのJSファイルを非同期でロードし、ページのレンダリングをブロックしないでスクリプトの実行順序を無視して実行します。
  • JS file management:はminifyするテーマを選択します。
  • HTTP/2 push:はONにします。
    サーバーとブラウザのリクエスト方式で、現在、ほとんどのサーバーが対応しています。

CSS

CSSファイルのminify機能の有効化、詳細設定ができます。

W3 Total cacheのcss minify設定方法

  • Minify method:は、「結合と縮小」「縮小のみ」「結合のみ」を選択できます。通常は「結合と縮小」を選択します。
  • Minify engine settings:は、コメントや改行の除去設定ができます。両方ともONにします。
  • @importの扱い:は、パフォーマンス重視なら「Process」を選択します。CSSの読み込み順が重要な場合は「Bubble」を選択します。通常は「Process」を選択します。
  • CSS file management:は、CSSをminifyするテーマを選択します。
  • HTTP/2 push:は、ONにします。

詳細

minifyキャッシュのパージや、minifyしないファイルなどを設定することができます。

W3 Total Cacheの圧縮設定

  • 外部ファイルを以下の間隔で更新:は、外部のJS、CSSのキャッシュ期間を記入します。
  • ガベージコレクション間隔:は、期限切れのキャッシュデータを削除する頻度を記入します。最大値は30日間(2592000秒)までとなります。
  • 以下のページは圧縮しない:は、圧縮しないページやディレクトリを記入します。
    例えばページの場合は「pagename」。ディレクトリの場合は「blog」。サブディレクトリの場合は「blog/category」。正規表記での指定も可能です「^(category|tag)」
  • Never minify the following JS files:は、minifyから除外するjavascriptを指定できます。
    例えばファイル名を指定する場合は「wp-content/themes/theme-name/js/custom.js」。
    特定のディレクトリ以下のファイルの場合は「wp-content/themes/theme-name/js/」
    特定のファイル名のJSの場合は「*jquery*.js」
  • Never minify the following CSS files:は、minifyから除外するCSSを指定できます。記述方法はjavascriptの場合と同じです。
  • 拒否されたユーザーエージェント:は、キャッシュしたファイルを表示しないデバイスやボットを指定できます。

ブラウザキャッシュ

データベースキャッシュ、オブジェクトキャッシュの前に「ブラウザキャッシュ」を設定します。

一般

ブラウザキャッシュの一般的な設定を行います。

W3 Total Cacheのブラウザキャッシュ設定

  • Last-Modifiedヘッダーを設定:は、ONにします。
    ファイルが最後に更新された日時を示し、ブラウザはキャッシュの更新日を判断することができます。
  • Expiresヘッダーを設定:は、ONにします。
    キャッシュの有効期限をブラウザに指定します。サーバーへの無駄なリクエストがなくページの読み込み速度が向上します。
  • キャッシュ制御ヘッダーを設定:は、ONにします。
    ブラウザやサーバにキャッシュ方法を指示します。
  • エンティティタグ (ETag) を設定:は、ONにして、不具合がある場合はOFFにします。
    キャッシュのバージョンを認識させるために利用され、効率的にキャッシュの読み込みができます。
  • W3 Total Cache ヘッダーを設定:は、OFFにします。
    デバッグやパフォーマンスを調査する時にONにします。
  • Enable HTTP (gzip) compression:は、ファイルをgzipで圧縮する場合にONにします。
  • Enable HTTP (brotli) compression:は、ファイルをbrotli形式で圧縮する場合にONにします。
    ※サーバーがbortliに対応しており、既にbortliに圧縮されている場合、グレーアウトして有効化できない場合があります。
    bortliに圧縮されているかをチェックすることができます。
  • 設定変更後のオブジェクトのキャッシュを防止:は、変更されたCSSやJSファイル名にクエリ(?ver=1.0など)を追加します。
    必要な場合はONにします。
  • Remove query strings from static resources:は、OFFにします。
    CSSやJSのファイル名のクエリを削除します。
  • 静的ファイルに Cookie を設定しない:は、ONにします。
    静的ファイル(画像、CSS、JavaScriptなど)には通常Cookieは不要です。
  • 静的オブジェクトに対する404エラーを WordPress で処理しない:は、通常はOFFにします。
    404エラーはサーバー側で処理した方がパフォーマンスが向上することがありますが、動的に生成されるファイルがある場合は404エラーと誤認識されないように「404エラー除外リスト」に記載します。
  • Rewrite URL structure of objects:は、JSやCSSをユニークなファイル名にリライトして、更新されたJSやCSSファイルをブラウザが読み取りやすくします。
    必要な場合はONにします。

CSS&JS

CSSとjavascriptのキャッシュポリシーの設定になります。
先程の「一般」設定と同じ項目の説明は割愛します。

W3 Total Cacheのブラウザキャッシュ設定

  • Expires ヘッダーの有効期限:は、CSS、JSファイルをブラウザがキャッシュする期間を設定します。
    デフォルトは1年(31536000秒)です。頻繁にCSS、JSが更新される場合は7日(604800秒)などの値にします。
  • キャッシュコントロールポリシー
    「cache ("public")」は、殆どCSSやJSが更新されない場合に選択します。CDNを利用している場合でも有効です。
    「cache with max-age」は、キャッシュの有効期間だけキャッシュします。CSSやJSがあまり更新されない場合に選択します。
    「cache with validation」は、CSSやJSが頻繁に更新される場合に選択します。
    「cache with max-age and validation」もCSSやJSが頻繁に更新される場合に有効です。cache with validationより厳密にキャシュを検証し利用します。
    「プロキシなしでキャッシュ」は、ブラウザのみキャッシュされます。通常は選択することはありません。
    「don't cache」は、キャッシュさせないことになるため、通常は選択しません。
    「don't store」は、キャッシュさせないことになるため、通常は選択しません。

 

 

Minify

HTMLや、CSS、JavaScriptをコンパクトにする設定です。コンパクトにすることでファイル容量が小さくなります。

「Enable」にチェックを入れた場合、表示が崩れたり、一部のプラグインが正常に作動しない場合があります。
その場合は「Enable」のチェックを外すことで不具合は解消されます。

「Enable」のチェックはオフにします
Minifyは全ての設定が完了後に設定するのが良いです。
Minifyは別のプラグインを利用しても良いでしょう。

Opcode Cache

PHPをキャシュする設定ですが、設定できるのはProバージョンだけになります。
そのままの設定でOKです。

Database Cache

ワードプレスはデータベースから頻繁にデータを取得するため重く遅くなります。

そこでデータベースのクエリを予めキャッシュすることで、データベースへのアクセスを減らすことができて表示速度を上げることができます。

ただし、データベースキャッシュはサーバのリソースを大きく消費するため、サーバのスペックが低い場合はワードプレスが落ちます。

サーバスペックが高いVPS、専用サーバの場合は「Enable」にチェックして、「Disk」を選択します。

共有サーバを利用している場合は「Enable」のチェックはオフにした方が良いです。

Object Cache

データの処理をメモリにキャッシュして、パフォーマンスを向上させるのが「オブジェクトキャッシュ」です。

メモリが少ないサーバではワードプレスは落ちます。逆にパフォーマンスが低下することもあります。

サーバスペックが高いVPS、専用サーバの場合は「Enable」にチェックして、「Disk」を選択します。

共有サーバを利用している場合は「Enable」のチェックはオフにした方が良いです。

Browser Cache

ホームページを閲覧しているユーザーのブラウザにキャッシュさせるのが「ブラウザキャッシュ」です。
「クライアント・サイド・キャッシュ」とも呼ばれます。

「Enable」にチェックします。

CDN

CDN(コンテンツ・デリバリー・ネットワーク)を利用している場合のみ、設定します。

今回はCDNを利用しないため設定方法は割愛します。

「Enable」はオフにします。

Reverse Proxy

サーバにロードバランサーを導入して負荷を分散させている場合は、チェックを入れてIPアドレスを記入します。

「Enable」はオフにします。

リバースプロキシについてはこちらの動画が参考になります。

Monitoring

ワードプレスが落ちていないかを監視してメールで知らせてくれます。

利用する場合は「New Relic」のアカウントが必要となります。

利用しない場合はスルーしてOKです。

Fragment Cache

Proバージョンのみ利用できるキャッシュとなります。

「Please select a method」を選択したままでOKです。

フラグメントキャッシュを使用する場合

フラグメントキャッシュとは、ページを構成する要素ひとつひとつをキャッシュして再利用させるキャッシュ方法の一つです。

使用する場合は「Fragment Cache Method」を選択します。基本的には「Disk」をします。または環境に合わせて適宜設定します。

wp-config.phpファイルに下記を記載して有効にします。

define('W3TC_DYNAMIC_SECURITY', 'somesecurestring');

PHPコードにフラグメントキャッシュを適用する場合は下記のように囲みます。

<!-- mfunc W3TC_DYNAMIC_SECURITY -->
    PHP code
<!- /mfunc W3TC_DYNAMIC_SECURITY >

HTMLやCSSを圧縮するMinifyを利用されている場合は、「mfunc」のコメントが削除されないようにコメント削除設定で「mfunc」を除外する必要があります。

これは他の圧縮プラグインを利用している場合も「mfunc」のコメントが削除されないように設定しておきましょう。

Miscellaneous

Google Page Speedをウィジェットで確認することができます。

不要なので「Enable」をオフにしておきます

Debug

問題が発生した場合にのみ有効にします。有効にするとページフッターにデバッグ情報が表示されます。

通常はスルーしてOKです。

Import Export

設定した内容をファイルとして保存することができます。
他のウェブサイトにも同じ設定をする時などに便利です。

全ての設定が完了したら、設定を保存しておくことをお薦めします。

以上でGeneral Settingsは完了です。続いて詳細設定を行っていきます。

Page Cache

ページキャッシュの詳細設定を行っていきます。

General

「Cache SSL」は、ワードプレスをHTTPSで運営している場合はチェックします。

ALiases

ドメインエイリアスによるキャッシュ設定で、スルーしてOKです。

ドメインエイリアスとは、1つのウェブサイトに異なるドメインでもアクセスさせる機能のことです。リダイレクトみたいなものです。

Cache Preload

ユーザーがページを訪れる前に、自動的にキャッシュを構築させる設定です。便利な機能ですがサーバに負荷が掛かります。

キャッシュプリロードを利用する場合は「Sitemap URL」に、xmlのサイトマップURLを記入します。

共有サーバを利用されている場合は、Cache Preloadをオフにした方が良いです。

Purge policy

 

記事やコメントが投稿されると、キャッシュをパージ(開放する)ページを設定します。

パージするページが多い場合はサーバに負荷が掛かります。
一般的には「Front page」「post page」だけで良いでしょう。

Advanced

Advancedでは、パージの間隔やキャッシュしないページなどを設定することができます。
一般的には下記の3つの設定を検討します。

「Compatibility mode」にチェックを入れると、W3 Total Cacheのパフォーマンスは20%ほど低下しますが、サーバの負荷を抑えて安全に利用することができます。

「Garbage collection interval」は、キャッシュの期限を設定します。デフォルトは「3600秒(1時間)」です。頻繁に更新することがなければ増やしても良いでしょう。

「Comment cookie lifetime」は、コメントのクッキー保有時間です。ブログにコメント機能がなければデフォルトでOKです。

以上で「Page Cache」の設定は完了です。

Minify

HTMLやCSS、JavaScriptなどを圧縮する詳細設定をおこなうことができます。Minifyを利用しない場合は設定は不要です。

General

「Rewire URL structure」にチェックします。

HTML & XML

圧縮するファイルを選択します。画像を参考にチェックしてください。

その他の設定

「JS」「CSS」「Advanced」はデフォルトの設定でOKです。

表示が崩れる場合は「CSS」のMinifyをオフにします。

画像のスライドや一部のプラグインが機能しない場合は「JS」のMinifyをオフにします。

Database Cache

データベース・キャッシュの詳細設定ができます。データベース・キャッシュを利用しない場合は設定は不要です。

General

ログインユーザーのクエリはキャッシュしないほうがよいので、「Don't cache queries for logged in users」はチェックします。

Advanced

デフォルトの設定でOKです。

Object Cache

オブジェクト・キャッシュの詳細設定ができます。オブジェクト・キャッシュを利用しない場合は設定は不要です。

「Enable cacing for wp-admin requests」は管理画面のパフォーマンスを向上させることができますが、不具合も発生しやすいのでチェックオフがお薦めです。

基本的にはデフォルトの設定が安全でお薦めです。

Browder Cache

ブラウザ・キャッシュの詳細設定ができます。ほとんどの設定がデフォルトでOKです。

General

画像の5つの項目にチェックします。

その他の設定

「CSS & JS」「HTML & XML」「Media & Other Files」「Security Geaders」の設定はデフォルトの設定でOKです。

User Agent Groups

スマートフォンやフィーチャーフォンのユーザーに、異なるキャッシュを表示させることができます。

レスポンシブデザインを採用しているブログの場合、設定は不要です。

Referrer Groups

GoogleやBingなど、参照元に基づいてキャッシュを表示させることができます。

設定は不要です。

Cookie Groups

Cookie情報に基づいてキャッシュを表示することができます。

設定は不要です。

Fragment Cache

proバージョンを利用している場合は、設定できます。

設定は不要です。

W3 Total Cacheの設定は以上となります。

利用しているサーバとの相性が良く設定がうまくいけば、WordPressの表示速度がかなり向上します。

W3 Total Cache設定のポイント

「Database Cache」「Object Cache」は一旦オフにして、しばらく様子を見てからDatabase Cacheや、Object Cacheをオンにすると安全に設定ができます。

フッターのコメントを削除する方法

W3 Total Cacheは、HTMLのフッターにパフォーマンスについてのコメントを追記します。

このコメントを削除するにはテーマの「functions.php」にフィルターフックを記述することでコメントを削除することができます。

PHP
add_filter( 'w3tc_can_print_comment', function( $setting ) { return false; }, 10, 1 );

functions.phpの更新後に、キャッシュをパージする必要があります。

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ