W3 Total Cache 設定ガイド

Minify|コードの縮小・圧縮

W3 Total Cache(以下 W3TC)のMinify メニューでは、HTML・JavaScript・CSSファイルの縮小と結合に関する処理方法や、対象ファイルの指定・除外などを細かく設定することができます。

一般にMinifyに関する設定は使用しているテーマやプラグインの組み合わせによって最適な設定が異なります。最大限のパフォーマンスを引き出すためには試行錯誤が必要となる場合があるので、時間がない方は簡易なAutoモードを使用するか、Minifyに関しては他のプラグイン(Autoptimize)を検討しても良いでしょう。

ここでの設定は、General Settingsで Page Cache を有効化している場合のみ機能します。

General

General(一般・全般)セクションでは、Minifyに関する管理者向け機能のON/OFFを設定します。基本的には初期値のままで変更する必要はありません。

Rewrite URL structure

HTMLソース上で置き換えられる縮小されたCSSやJSファイルの参照先URL構造を fancy link(パラメーター付きURL)から、絶対パスに書き換えます。通常ONにしておきます。なお、どちらを選んでも縮小後のファイルが保存されるサーバー内のフォルダは同じです。

Rewrite OFF(fancy link)
<link rel="stylesheet" href="http://mydomain.com/?w3tc_minify=12345.css" media="all" />

Rewrite ON
<link rel="stylesheet" href="http://mydomain.com/wp-content/cache/minify/12345.css" media="all" />

W3TCのMinify Autoでレイアウトが崩れた時の対処法
Local by Flywheel などを使った一部の開発環境では、正しく参照できない場合があります。Minify有効時にCSSやJSファイルが正しく読み込まれていないと思われる時 ※は、Rewrite URL structureのオプションをOFFにすると問題が解決する可能性があります。

※ページのHTMLソースコードを表示して、縮小されたcssファイルのリンクをクリックして何も表示されなければ、正しく参照できていないことが確認できます。縮小されたファイルの中身が表示される場合はこのオプションとは別の原因でレイアウトが崩れていることになります。

Disable minify for logged in users

このオプションにチェックを入れるとログイン中のユーザーに対してMinify後のファイルを配信しません。CSSやJSファイルはログインの有無に関わらず基本的に同じなので、通常運用時はOFFのままにしておくことで、ログイン中のユーザーもパフォーマンス向上の恩恵を受けられます。

現在 Minify モード を Autoにして運用していて、今後 Manualに変更して高度な構成を予定している方が、Minify前のソースコードを確認して検討する際などに使用します。

Minify error notification

このオプションは、W3TCがMinify処理で何らかのエラーを検知した時に管理者に通知する方法を選択できます。エラーに対処できる技術レベルの方以外は、初期値のDisabled(無効)のままで良いでしょう。

  • Disabled
    エラーを通知しません。

  • Admin Notification
    管理画面上部でエラーを通知します。

  • Email Notification
    管理者ユーザーのメールアドレスに通知します。

  • Both Admin & Email Notification
    管理画面とEmail両方で通知します。

私の環境ではMinifyによってレイアウトが崩れた時でも、特にエラーは通知されませんでした。実際にどのような場合にどのような内容のエラーが通知されるのかよくわかりません。

HTML & XML

HTML & XMLセクションでは、ページのHTMLソースコードから余分な空白や改行を取り除いてコンパクトにするための設定をおこないます。

今日の通信環境において、HTMLのMinifyはWebページの速度向上にそれほど貢献しないので、頻繁にソースコードをチェックしてメンテナンスする方は、あえてこのオプションを有効にする必要はありません。

HTML minify settings
  • Enable
    チェックを入れると HTML の縮小機能が有効になります。最も安全に使うならEnableだけチェックして、他の項目はOFFにしておきましょう。

  • Inline CSS minification
    テーマやプラグインがHTML内に直接出力しているCSSコードを縮小します。一般に、テーマやプラグインが出力するインラインCSSは既に縮小済みなので、特別な事情がなければONにする必要はありません。

  • Inline JS minification
    テーマやプラグインがHTML内に直接出力しているJavaScriptコードを縮小します。こちらも基本的には不要です。

  • Don’t minify feeds
    初期設定でW3TCは、HTMLと合わせてフィード(XML)も縮小します。フィードの表示に不具合が出るなど問題がある時はこの項目をONにして、フィードの縮小を無効にします。

  • Line break removal
    HTML内の改行を削除して更にコードを縮小します。上の Inline JSやInline CSS と併用してこの項目をONにすると、ページの表示が崩れたり、JavaScriptの動作に不具合を生じることがあるので、必ず動作確認をしてください。問題がある場合は、いずれか又は全部をOFFにして不具合が出ないように調整してください。

Ignored comment stems

通常MinifyはHTML内のコメントを削除しますが、この欄に入力した文字列を含むHTML内のコメントは残すことができます。初期値ではGoogle AdWordsとスクリーンリーダーに関連付けられたコメントタグを除外するように設定されています。

例えば、Googleタグマネージャーのコードには、<!-- Google Tag Manager --><!-- End Google Tag Manager -->といったコメントがありますが、このコメントを残すには、

google_ad_
RSPEAK_
Google Tag Manager

といった具合に、コメント内の文字列に一行追加します。

W3TCでは、Autoptimizeのように全てのコメントを残したり、コメント内のコードを含めて縮小から除外するといったことができないので、あまり使いやすいとは言えないかもしれません。

JS

JSセクションでは、JavaScriptファイルの縮小と連結に関する動作の設定をおこないます。JSのMinifyを有効にすると、ページのソースコード内から参照している外部のJavaScriptファイル(.js)の中身の縮小と、各jsファイルの連結がおこなわれます。これにより、ファイル参照によるサーバへのリクエスト数とデータの転送量が減少し、Webサイトのパフォーマンスが向上します。

JSのMinify設定は上級者向けの機能です。十分に動作確認をおこなってください。うまくいかない場合はこの機能の利用にこだわらずに、ページキャッシュやブラウザキャッシュの設定に専念しましょう。

このセクションで利用できる項目は、General SettingsのMinify ModeでAutoを選択した場合とManualを選択した場合とで異なります。

JS Autoモード時の設定

Autoモードは、テーマやプラグインによってページのソースコード内に挿入されたJSファイルの位置を維持したまま、隣接するJSファイルだけを連結して縮小するため、初心者でも比較的安全に使用することができるモードです。

Autoモードでは安全性と簡易性が重視されているため、テーマやプラグインの使用状況によっては期待したほどの効果が出ない場合もあります。

JS minify settings
  • Enable
    チェックを入れると JSファイルの縮小機能を有効にします。

  • Operations in areas
    MinifyされたJSファイルの読み込み方法を Embed type の欄で指定します。Minify前に</head>より前にあるJSファイルと<body>以降に配置されているJSファイルに分けて指定することができます。

    Embed typeの欄でどれを選択するかは、テーマやプラグインの構成によって適・不適が異なるので一概には言えませんが、Google Page Speed Insights (PSI) の改善項目で「スクロールせずに見えるコンテンツのレンダリングをブロックしている javascript/css を排除する」が提案される場合は、</head>側のEmbed typeで Non-blocking using 〇〇 のいずれかを指定してみてください。

強いて言うなら、Non-blocking using defer がおすすめです。なお、Default (blocking) は、Minifyによって不具合が起きる可能性が最も低いですが、その名が示す通り、PSIの提案内容をクリアすることは出来ません。

また、どれを選択するかにあたっては、以下の記事(Qiita)も参考になるかもしれません。

  • Minify または Combine only
    Minify:
    JSファイル内のコードをコンパクトにしたうえで HTML内で隣接するJSファイルどうしを結合します。

    Combine only:
    JSファイル内のコードには手を加えず、HTML内で隣接するJSファイルどうしを結合します。

通常、HTML内で読み込まれるテーマやプラグインのJSファイルは、既にコンパクトな状態 (.min.js) になっているので、更にコードを縮小する意味はありません。よくわからない場合は、Combine only を選択すると良いでしょう。

  • Preserved comment removal (not applied when combine only is active)
    上記でMinifyを選択した場合に、JSファイル内のコメント部分を削除します。

  • Line break removal (not safe, not applied when combine only is active)
    上記でMinifyを選択した場合に、JSファイル内の改行部分を削除します。改行を削除するとJavaScriptコードが正しく機能しないことがあるので、問題がないことがわかっている場合を除き、OFFのままにしておきます。

HTTP/2 push

チェックを入れると W3TCでMinifyされたJSファイルのHTTP2/Pushが有効になります。

HTTP2/Pushは、1回の接続で同時並行的に複数の通信のやり取りを処理できるHTTP2という規格を活用して、ブラウザがHTMLを見て必要なリソース(例えばJSやCSSファイル)をサーバーに要求する前にブラウザに対して強制的に配信(Push)して通信のやり取りを省略する仕組みで、これによりページを表示する際のパフォーマンスが向上します。

この機能はお使いのWebサーバーがNginxを導入している場合で、かつW3TCのページキャッシュ方式を Disk:Enhanced にしている場合は利用できません(チェックしても無視されます)。

Autoモードではページ内で読み込まれる全てのJSファイルがHTTP2/Pushされてしまうので、パフォーマンスがかえって低下する場合があります。したがって、Autoモード利用時にはOFFにしておくことをお勧めします。

JS Manualモード時の設定

Manualモードでは、ページのソースコード内に挿入されたJSファイルの中から配信を最適化したいものだけを選んで、</head>前、<body>直後、</body>直前の任意の場所に任意の順序で再配置できます。Autoモードよりも柔軟な調整が可能ですが、一定の知識と試行錯誤のストレスに耐えるメンタルが必要です。

設定のための項目と操作はAutoモードとほぼ同じですが、ここでは Manualモード特有の項目となる JS file management について触れておきます。

Theme

JS Minifyを適用するテーマファイルを選択します。テーマファイルごとに最適化の内容を切り替えることができます。

Add a script ボタン

このボタンをクリックして最適化するファイルの指定と埋め込み位置などを必要なだけ設定することができます。

  • File URI
    最適化するJSファイルの場所を wp-contentから始まるパスで指定します。

  • Template
    最適化を適用するテンプレートファイルを指定します。通常は All Templates を選択します。例えば目次系プラグインやテーブル系プラグインなどのJSファイルであれば「Single」を選択しても良いでしょう。

  • Embed Location
    最適化したファイルを配置する場所を、 </head>前、<body>直後、</body>直前 の3つの中から選びます。必ずしも最適化前の場所に配置する必要はありませんが、実際の表示動作を確認しながら調整します。

  • Delete
    最適化が不要なファイルの行を削除します。

  • Verify URI
    指定したJSファイルが正しく参照できるかをテストします。クリックすると別ウィンドウが開いて中身が表示されます。なお、このボタンは、Minifyの設定を一旦保存した後でないと動作しません。

  • 最適化ファイルの並び替え
    最適化するためのJSファイルを複数追加した場合は、各行をドラッグアンドドロップすることで順番を並べ替えることができます。

    基本的には各埋め込みエリアごとに、最適化前の配置と同じ順序を保つように並べ替えます。

CSS

CSSセクションでは、CSSファイルの縮小と連結に関する動作の設定をおこないます。CSSのMinifyを有効にすると、ページのソースコード内から参照している外部のCSSファイル(.css)の中身の縮小と、各CSSファイルの連結がおこなわれます。これにより、ファイル参照によるサーバへのリクエスト数とデータの転送量が減少し、Webサイトのパフォーマンスが向上します。

CSSのMinify設定は上級者向けの機能です。十分に動作確認をおこなってください。うまくいかない場合はこの機能の利用にこだわらずに、ページキャッシュやブラウザキャッシュの設定に専念しましょう。

こちらもJSセクション同様、General SettingsのMinify ModeでAutoを選択した場合とManualを選択した場合とで異なります。

CSS Autoモード時の設定

Autoモードは、テーマやプラグインによってページのソースコード内に挿入されたCSSファイルの位置を維持したまま、隣接するCSSファイルだけを連結して縮小するため、初心者でも比較的安全に使用することができるモードです。

Autoモードでは安全性と簡易性が重視されているため、テーマやプラグインの使用状況によっては期待したほどの効果が出ない場合もあります。また、MinifyされたCSSを移動することは出来ないので、W3TCの無料版でレンダリングブロックCSSを排除するには、HTTP/2 Pushを使用する必要があります。

CSS minify settings
  • Enable
    チェックを入れると CSSファイルの縮小機能を有効にします。

  • Combine only
    CSSファイル内のコードには手を加えず、HTML内で隣接するCSSファイルどうしを結合します。

    通常、HTML内で読み込まれるテーマやプラグインのCSSファイルは、既にコンパクトな状態 (.min.css) になっているので、更にコードを縮小する意味はありません。よくわからない場合は、Combine only を選択すると良いでしょう。

  • Preserved comment removal (not applied when combine only is active)
    上記でMinifyを選択した場合に、CSSファイル内のコメント部分を削除します。

  • Line break removal (not applied when combine only is active)
    上記でMinifyを選択した場合に、CSSファイル内の改行部分を削除します。

  • Eliminate render-blocking CSS by moving it to HTTP body
    <head>内のMinifyされたCSSファイルを<body>内部に移動してレンダリングブロックCSSを排除することで、ページの表示パフォーマンスを向上します。W3TC Pro版で利用できるオプションです。

@import handling

CSSファイル内で別のCSSファイルを参照する@importが使用されている場合の取り扱いを選択します。@importを使った方法は、ページの読み込みを遅くする傾向があるので、現在はあまり使用されていませんが、W3TCではそのようなCSSファイルの効率を改善するための機能としてこのオプションが用意されています。

  • None
    @importで参照しているCSSファイルを無視します。通常はこちらを選択します。

  • Bubble
    正規表現を使ってCSSファイルを参照・抽出します。プラグイン作者によれば現在は信頼性の低い方法で非推奨のようです。

  • Process
    @importの参照先を処理して1つのCSSファイルを生成します。@importの処理方法としてはこちらが推奨されています。

HTTP/2 push

チェックを入れると W3TCでMinifyされたCSSファイルのHTTP2/Pushが有効になります。この機能はお使いのWebサーバーがNginxを導入している場合で、かつW3TCのページキャッシュ方式を Disk:Enhanced にしている場合は利用できません(チェックしても無視されます)。

HTTP/2 Push の仕組みと、注意点は前述のとおりです。

CSS Manualモード時の設定

Manualモードでは、ページのソースコード内に挿入されたCSSファイルの中から配信を最適化したいものだけを選んで、任意の順序で結合してから再配置(デフォルトでは<head>内の最上部)します。

設定のための項目と操作はAutoモードとほぼ同じですが、ここでは Manualモード特有の項目となる CSS file management について触れておきます。

Theme

CSS Minifyを適用するテーマファイルを選択します。テーマファイルごとに最適化の内容を切り替えることができます。

Add a style sheet ボタン

このボタンをクリックして最適化するファイルの指定と適用するテンプレートの種類を必要なだけ設定することができます。

  • File URI
    最適化するCSSファイルの場所を wp-contentから始まるパスで指定します。

  • Template
    最適化を適用するテンプレートファイルを指定します。通常は All Templates を選択します。例えば目次系プラグインやテーブル系プラグインなどのCSSファイルであれば「Single」を選択しても良いでしょう。

  • Delete
    最適化が不要なファイルの行を削除します。

  • Verify URI
    指定したCSSファイルが正しく参照できるかをテストします。クリックすると別ウィンドウが開いて中身が表示されます。なお、このボタンは、Minifyの設定を一旦保存した後でないと動作しません。

  • 最適化ファイルの並び替え
    最適化するためのCSSファイルを複数追加した場合は、各行をドラッグアンドドロップすることで結合する際の順番を並べ替えることができます。

Advanced

Advanced(アドバンスド)セクションでは、最適化されたJSファイルやCSSファイルの生成動作の高度な設定や、各Minifyの例外処理などを設定します。個人のWebサイトなど一般的な利用においては、デフォルトのままでも問題ありませんが、Autoモード使用時に特定のファイルをMinifyから除外するなど、運営しているサイトの状況に応じて変更するのも良いでしょう。

  • Update external files every
    JSおよびCSSのMinifyされたキャッシュファイルを更新する間隔を秒単位で指定します。初期値は86400秒(24時間)おきに新しくキャッシュファイルを生成しなおします。通常はこのままでOKです。

    なお、テーマやプラグインの更新、カスタムCSSの変更などを実施した際は、W3TCのツールバーやダッシュボードに用意されているボタンからMinifyキャッシュを強制的にクリアして最新版を再生成させることができます。

  • Garbage collection interval
    期限切れのMinifyキャッシュを削除する間隔を指定します。デフォルトで問題ありませんが、上の「Update external files every」を変更した場合は同じ値で設定すると良いでしょう。

  • Never minify the following pages
    特定のページにおける全種類のMinifyを無効化します。使いどころが良くわかりませんが、特定のページだけMinifyによってページが壊れるといったレアなケースで使用するのかもしれません。

    記述方法は、https://mydomain.com/dis-minify/ なら dis-minify/ といった具合に、ドメイン名と先頭のスラッシュ以降の相対パスで指定します。またURLパラメーターも付けません。

  • Never minify the following JS files
    JS MinifyのAutoモードによって結合・再配置されるとページの表示に不具合が出る場合は、この欄で最適化の対象から除外することができます。記述ルールは上記と同じです。

  • Never minify the following CSS files
    CSS MinifyのAutoモードによって結合・再配置されるとページの表示に不具合が出る場合は、この欄で最適化の対象から除外することができます。記述ルールは上記と同じです。

  • Rejected user agents
    指定したユーザーエージェントを持つブラウザでWebサイトにアクセスがあった場合、MinifyされたHTML・JS・CSSを配信しないようにできます。複数のユーザーエージェントを指定する場合は1行ずつ記述します。

    実際、MinifyされたHTML・JS・CSSを正しく処理できないブラウザがあるのかはわかりません。

  • Include external files/libraries
    Autoモード利用時にこの欄で指定した外部(サードパーティー含む)のJS・CSSファイルを含めてMinifyキャッシュを作成できるようです(後記参考リンク参照)。私の環境では動作しませんでした。

  • Use Regular Expressions for file name matching
    チェックを入れると上の外部ファイル指定方法を正規表現で使えるようにします。

Manualモード使用時のMinifyファイルの挿入位置を調整する

Manualモード使用時は、JSファイルの場合はオプションで指定した </head>前、<body>直後、</body>直前 に、また、CSSファイルの場合は<head>内最上部に最適化後のファイルが挿入されますが、この挿入位置を微調整したい場合があります。

やや上級者向けの方法とはなりますが、以下のコメントタグを コードを挿入したい位置に配置することで、デフォルトの挿入位置からコードを移動させることができます。テンプレートファイルを編集するかfunctions.phpでテーマのフックを使用してください。

コメントタグは、Manualモードで任意のスクリプトを追加した際に指定した Embed Location に対応しています。なお、CSS用のコメントタグは1種類だけです(もともとの挿入場所が1か所なので)。

<!-- W3TC-include-js-head -->
<!-- W3TC-include-js-body-start -->
<!-- W3TC-include-js-body-end -->
<!-- W3TC-include-css -->