WordPressの表示高速化のためにキャッシュを導入しました。mixhostが採用しているLiteSpeed Webサーバー専用の「LiteSpeed Cache」です。
大問題ではないですが、いくつか表示トラブルが発生したのでまとめておきます。mixhostとSimplicity2をご利用の方に少しでも参考になればと思います。
シロウトは手を出すな
WordPressのキャッシュって怖いイメージがあるんですよね。サイトが表示されなくなったとか、キャッシュを削除できないとか．．．トラブルが起きたときに元に戻せるかどうか不安です。
ネットで調べれば調べるほど、怖くて導入できなくなっていました。
そんな状況で今回キャッシュの導入に踏み切ったのは、mixhostが採用しているLiteSpeed Webサーバーに関係があります。
LiteSpeed Webサーバーは独自のキャッシュ機能を持っていて、WordPressから簡単に利用することができるのです。WordPressの内部にキャッシュを持つわけではなさそうなので、安全性が高いのではないかと判断しました。
mixhostの機能説明にも次のように書いてあります。
サブサイトでテストしているときに、何度もキャッシュのオン,オフを繰り返しましたがトラブルは起きませんでした。これならシロウトでも大丈夫そうです。
LiteSpeed Cacheプラグイン
「LiteSpeed Cache」で検索してインストールします。そしてプラグインを有効化するとLiteSpeed Cacheが機能し始めます。
LiteSpeed純正のプラグインというのも安心感につながります。
キャッシュページの確認方法
キャッシュがきちんと機能しているか確認します。
ブラウザはchromeを使います。
WordPressに管理者ログインしているブラウザではキャッシュが使われません。テスト前にログアウトするか、新しいユーザーでchromeを起動してから実施してください。
デベロッパーツールの起動
右上の：を押して、「その他のツール」から「デベロッパーツール」を選択します。デベロッパーツールが起動したら、動作確認をしたいページを開きます。
レスポンスヘッダを表示して確認
デベロッパーツールで次の画像の①②③の順で選択していきます。
①Network
②All
③表示しているページのポスト名
ポスト名はおそらく一番上に表示されていると思います。もし、ツール内になにも表示されていない場合はキーボードのF5キーを押して画面を再表示してみてください。
画像の赤枠のように、
X-LiteSpeed-Cache:hit
となっていればキャッシュが有効で正常に動作しています。
もし
X-Litespeed-Cache:miss
や
となっていたときはプラグインの設定などを見直しましょう。
ただし、初めて開かれたページはその限りではありません。キャッシュページは初めて開かれたときに作成されます。エラーであっても、そのページを開きなおすと正常動作になっている場合もあります。
問題と対策
プラグインが動かないといった大きなトラブルはありませんでしたが、表示がおかしくなるなどの不具合が発生しました。
このサイトにはSimplicity2、SSL（https化）、SiteGuardプラグインなどが導入されています。
パソコンでモバイルページが表示される
パソコンで開いているのにモバイルページが表示されてしまいました。Simplicityの標準設定では完全なレスポンシブデザインではないのが原因のようです。
解決方法はふたつあります。
ひとつは、Simplicityの設定で「完全レスポンシブ表示を有効」にすること。ただ、これをやるとPCとモバイルのそれぞれに最適化したページ構成ができなくなってしまいます。
そこで、LiteSpeed Cacheプラグインの設定の「Enable Separate Mobile View」を有効（チェックを入れること）にします。これはPCとモバイルで別々にキャッシュページを作成してくれるというものです。
PCとモバイルで別にキャッシュを持つことで、デバイスに合わせて正しくページが表示されるようになります。
コメントの画像認証が表示されない
コメント欄に画像認証を設置していましたが画像が表示されなくなりました。SiteGuardプラグインを使っています。
上は正しく表示されている時のものです。画像が表示されなくなってしまっては認証できないので停止しました。
キャッシュを再作成すると画像は表示されるようになるのですが、画像もキャッシュされたものが表示し続けることになります。結果、認証が通らずコメントが書き込めなくなることが予想されます。
「保護された通信」にならない
https導入後chromeで当サイトを表示すると、URLの前に「保護された通信」と表示されていました。これが表示されなくなりました。
楽天ウィジェットをサイドバーに表示していましたが、サムネイルがhttpになってしまっていました。キャッシュ導入前はhttpsになっていたのですが。
ウィジェットの設定は替えていないので、なぜそうなったのかは分からず解決できなかったので削除しました。
削除することで「保護された通信」が返ってきました。
キャッシュの再作成
外観の編集やプラグインの設定などの変更をした場合はキャッシュページを作り直す必要があります。
WordPressのダッシュボード上部の「LiteSpeed Cache Purge All」をクリックするとすべてのキャッシュが再作成されます。（現在は「LiteSpeed すべてのキャッシュをパージ」と表示されています）
いったんすべてのキャッシュが削除されて、開かれたページから順に再作成されると思われます。
キャッシュの効果
2017年5月16日追記
LiteSpeed Cacheを導入したのは2017年4月21日です。
導入後目に見えて効果が表れたのでご報告します。Google アナリティクスのグラフは掲載できないので残念ながら数値のみになります。
Google アナリティクス「平均セッション時間」
平均セッション時間が21日を境に急激に伸びました。
| 18日 | 19日 | 20日 | 21日 | 22日 | 23日 |
| 42秒 | 41秒 | 40秒 | 1分19秒 | 1分42秒 | 1分47秒 |
3月21日～4月20日までの平均セッション時間は39秒でした。4月21日～5月15日までの平均セッション時間は1分24秒となっています。同条件でのページ/セッションも1.18から1.25と若干改善しています。直帰率は3ポイントほど下がり、新規セッションは12ポイントと大きく下がっています。
ページがスムーズに表示されることで、再訪問する気持ちになっていただけたのでしょうか。
Google サーチコンソール「ページのダウンロード時間」
サーチコンソール「クロールの統計情報」にて、「ページのダウンロード時間 (ミリ秒)」に変化が見られました。
900ミリ秒前後で推移していたものが、600ミリ秒程度まで下がりました。
ユーザービリティには直結しませんが、レスポンスが上がったことが表れているのではないでしょうか。
ページの表示が早くなったことは体感していたのですが、少しでもこうやって数値に表れてくれるとうれしいですね。結果的に平均セッション時間が伸びたことも大変ありがたいです。
キャッシュ導入による弊害
コメントの画像認証をやめたことはこの記事の上の方で書きましたが、スパムが非常に増えました。
スパムコメントの大半は英語を含む外国語です。そのためか日本語での画像認証はスパム対策に効果が高かったようです。
画像認証を止めた途端スパムコメントが来るようになりました。ただし、Akismetでスパムコメントは防いでいるので、ブログ上に表示されることはありません。
画像認証を止める場合は、何らかのアンチスパムプラグインを導入することをオススメします。
参考 MixHost
コメント