当サイトは、エックスサーバーにテーマCocoonといった環境でWordPressを運営しています。先日来、サイト表示をより高速化するためにエックスサーバーの高速化機能を取り入れたところ、表示速度がかなりよくなりました。
しかし数日すると、WordPress管理画面の崩れや”EWWW Image Optimizer”によるWebP変換ができないなどの不具合が発生したので、これらの症状と原因についてまとめてみました。
また同時に、高速化のために画像最適化（WebP変換）などのプラグインもテストしたのですが、相性の悪い組合せがあったので、その症状と原因についても追記しておきます。
同様の環境でWordPressを運営している方には参考になると思います。
不具合が起きた高速化設定とプラグインは以下のいずれかの組合せです。
- エックスサーバーの高速化設定（Xアクセラレータ、サーバーキャッシュ設定、ブラウザキャッシュ設定）
- 画像最適化プラグイン”EWWW Image Optimizer”
- 画像最適化プラグイン“Converter for Media”
- 画像名変更プラグイン”Phoenix Media Rename“
※ 機能が重複しないようにCocoonの高速化設定をすべてOFF、キャッシュプラグイン“WP Fastest Cache”を無効化にして試しました。
エックスサーバーの高速化設定
エックスサーバーにはサイトを高速表示させるためのキャッシュ設定と最適化設定があり、有効化することでサイトの表示速度は劇的に速くなります。しかしWordPressの管理画面の表示が崩れたり、プラグイン”EWWW Image Optimizer”によるWebP変換ができなくなったりといった不具合が起きます。
サーバーキャッシュとWordPress管理画面の表示崩れ
エックスサーバーにはXアクセラレータとサーバーキャッシュ設定という同様の機能と思えるようなサーバーキャッシュ機能があります。詳細は不明ですがマニュアルに記載されている「キャッシュ対象ファイル（拡張子）」は同じものであるため、双方には何らかの関連があるようです。
そして、XアクセラレータにはPHPもサーバー上にキャッシュを作成するVer.2というものがあります。
また、これらのマニュアルにはセキュリティーの面から重要な、管理者のログイン情報や管理画面はキャッシュしないと記載されているのですが、これらの設定を有効にするとWordPressの管理画面が崩れ、編集ができないという不具合が起きました。
テーマCocoonとの相性もあるのかもしれませんが、サーバーキャッシュを問題なく機能させるには、何らかの技術的な対策がいるように思えます。
このような症状が生じた場合、すべてのサーバーキャッシュ設定を無効にすると不具合は解消します。
プラグイン”EWWW Image Optimizer”によるWebP変換の不具合
エックスサーバーのXアクセラレータを有効にすると、「Apache モジュール mod_headers」がうまく働かなくなるため、画像をWebPに変換できなくなります。
この現象は、サーバーキャッシュによるものだと考えていたのですが、ブラウザキャッシュを有効にしても同様の現象が起きたので、エックスサーバーすべてのキャッシュ機能との相性が良くないと考えられます。
”EWWW Image Optimizer”の代わりに“Converter for Media”を使うと？
”EWWW Image Optimizer”は、エックスサーバーのキャッシュを有効にするとWebP変換できなくなりますが、“Converter for Media”は問題なく動作します。
しかし、画像名変更プラグイン”Phoenix Media Rename“で投稿済みの画像名を変更すると、サイトに表示されていた画像が消える不具合が発生します。
これは、“Converter for Media”が最適化（圧縮やWebP変換）した画像を別のディレクトリーに保管するためだと考えられます。
エックスサーバーの高速化設定による不具合のまとめ
- 「Xアクセラレータ」「サーバーキャッシュ設定」は有効にするとWordPress管理画面が崩れることがある
- 「Xアクセラレータ」「サーバーキャッシュ設定」「ブラウザキャッシュ設定」のいずれかを有効にすると、プラグイン”EWWW Image Optimizer”でのWebP変換ができなくなる
- 「Xアクセラレータ」「サーバーキャッシュ設定」「ブラウザキャッシュ設定」をすべて有効にしても、プラグイン“Converter for Media”でのWebP変換に問題はないが、画像名変更プラグイン”Phoenix Media Rename“で投稿済みの画像名を変更すると画像が消える
結局どうすれば良いのか！
結論からいうと、テーマがCocoonでプラグイン”EWWW Image Optimizer”を使っている方はエックスサーバーの高速化機能を無効にして、Cocoonの高速設定とキャッシュプラグイン“WP Fastest Cache”で高速化設定する方が安定した高速化を図ることができます。
キャッシュプラグイン“WP Fastest Cache”↓↓
以下が、PageSpeed Insightsによる計測結果です。
計測結果（デスクトップ）
計測結果（携帯電話）
Cocoonのサイトでは、テーマとあわせて使用するのにお勧めなプラグインとプラグインをまとめてあるページがあるので、合わせて参考にしてください。
エックスサーバーは「基盤システムへのnginxの追加導入」や「HTTP/2に対応」をはじめ、Gzipより圧縮率の高いBrotliを実装しているため、突発的にアクセスが集中した場合でもより高速かつ安定したWebサイトの運営が可能な素晴らしいレンタルサーバーです。
しかし、オプションで設定できるキャッシュ系の高速化には使用しているテーマやプラグインの相性があるようで、場合によって不具合が生じます。
また、表示データーの最適化を行って高速化をする「XPageSpeed」は、「JavaScript遅延読み込み」以外は有効化しても不具合は生じませんでしたが、設定画面の「設定前には必ずお読みください」には不具合が生じる可能性があると記載されています。
サイトの表示速度は速ければ速いほど良いのですが、計測結果のパフォーマンスや表示速度の数字にこだわり過ぎるときりがありません。実際、有名なサイトであっても「PageSpeed Insights」で計測すると、携帯電話のパフォーマンスは70点前後なので、同等のパフォーマンスであれば問題はないと考えた方が良いと思います。
また、サイトの表示速度はキャッシュや表示データーの最適化だけでなく、サイトを作りこむ際の画像サイズや設定などの影響の方が大きいのではないでしょうか。
まとめ
エックスサーバーの高速化機能は、使っているテーマやプラグインによっては快適な高速化が図れるかもしれませんが、テーマCocoonやプラグイン”EWWW Image Optimizer”とは相性が良くないようです。
今回は、テーマCocoonとサイトスピードに最も影響のある画像プラグインとの相性について、実際に試した結果をまとめていますので、参考にして頂いてより良いサイト作りにお役立てください。
エックスサーバーでは、サーバーキャッシュとブラウザキャッシュがデフォルトで有効になっているため、同様の機能を有するプラグインなどを導入する際には手動で無効にする必要があります。
なお、新サーバーに移行してもデフォルト設定に戻ります。