CocoonにLiteSpeed Cacheを入れてみた

CocoonにLiteSpeed Cacheを入れてみた

Luxeritasテーマ時代にはうまく動作しなかったLiteSpeed CacheをCocoonに入れてみました。このページではLiteSpeed Cache導入時の注意点などを解説しています。

WordPressを高速化させるプラグインLiteSpeed Cache


LiteSpeed Cacheとは

LiteSpeed Cacheとは、LiteSpeedサーバーと連携してWordPressサイトを高速化する無料のプラグインです。

最大の特徴は、キャッシュされたページをPHP(WordPressを動かすためのプログラム)を介さずに、Webサーバーが直接配信できる点にあります。

多くのキャッシュプラグインでは、ページ表示の際にPHPの処理が発生するため、わずかですが速度低下が起こりますが、LiteSpeed Cacheはこの処理をスキップできるため、より高速なページ表示が可能です。

キャッシュとプリロード

キャッシュ系プラグインでややこしいのが「キャッシュとプリロード、パージ」の関係です。

ページキャッシュとは
通常 WordPress は、「PHPを動かす → データベースから記事を読む → HTMLを作る」という重い処理を毎回行います。

ページキャッシュは、あるユーザーがページにアクセスするタイミングで、その完成済みファイルをコピーしてキャッシュサーバーに保存しておきます(キャッシュ期間”TTL”は自由に設定できます)。

→ 2回目以降のアクセスでは、保存済みHTMLをそのまま返すので誰に対しても激速になります。

TTLとは
TTL(Time To Live)とは、キャッシュを保持する期限をどのくらいにするかということです。

キャッシュをスーパーに例えると、TTLを24時間とした場合、24時間経過すると、スーパーは消費期限切れのマークを商品に貼ります。

消費期限切れの商品をお客様が買いに来ると、スーパーの店員さんはその商品をバックヤードにしまい、新しい商品と取り替えて提供し、同じものをまた棚に並べます。

これにより再度、誰に対しても激速になります。

プリロード(クロール)とは
プリロードは、お客様の来店を待たずに、店員が棚を巡回(クロール)し、新しい商品を補充して回るしくみです。

例えばプリロードの間隔を6時間に設定した場合、6時間ごと棚を巡回し、期限切れのページを確認し、お客様が来る前に新しい商品に入れ替える作業をします。

これにより、スーパーには 期限切れの商品が放置されることなく、常に新鮮な商品だけが棚に並ぶ状態が保たれます。

言い換えると、ユーザーがページにアクセスしたときに「古いキャッシュのページに当たる確率」を減らし、快適に閲覧できる環境を維持できる、ということです。

パージとは
パージ(Purge)とは、TTLの期限を待たずに、キャッシュを強制的に削除(無効化)することです。

記事の新規投稿や修正時にはその記事および記事周辺は自動でパージされますが、それ以外の箇所を変えた場合や、キャッシュが原因と思われる不具合の解消に手動でパージすることができます。

スーパーの例で言うと、商品にまだ消費期限が残っていても、原材料に変更があった、パッケージ表記を修正した、といった理由で、棚から商品を一斉に回収する行為です。

パージされた商品(記事)は一度棚から消え、次にお客様が来たタイミング、またはクロール時に、最新の内容で作り直された商品が再び棚に並びます。


LiteSpeed Cacheは、キャッシュ機能の他にも、ブラウザキャッシュや、画像の最適化、HTML、CSS、JavaScriptの圧縮など、サイトを高速表示させるための機能が入った多機能なツールです。

LiteSpeed Cacheの導入方法

LiteSpeed Cacheの導入は、プラグインをインストールし、有効化するだけで手軽に利用を開始できますが、有効化の前にFTPで「wp-config.php」の属性(パーミッション)を一時的に400から600に変更する必要があります。

参考:
LiteSpeed Cacheの利用方法 – ロリポップ!レンタルサーバー

LiteSpeed Cacheの初期トラブル:
LiteSpeedCacheのキャッシュが無効になる理由と解決方法

競合を避けるためにやったこと

LiteSpeed Cacheの唯一の欠点は多機能すぎること。多機能ゆえに、Cocoonなどの高速化を謳ったテーマと機能が重複し、ページが逆に重くなったり、サイトレイアウトが崩れたりします。

当サイトでもいくつかのページでレイアウト崩れが発生したので、Cocoonの高速化設定や既存のプラグインはそのまま活かし、LiteSpeed Cache側の機能をOFFにすることで、今のところ安定して動作しています(使うのはキャッシュ機能だけ)。

目次をクリックしても正常な位置に飛ばない問題が発生しましたが、CocoonのLazyLoad OFFで正常化しました。

キャッシュ除外

メールフォーム(例:/contact)やログインページなど、キャッシュされると問題が起きるページは確実に除外しましょう。

LiteSpeed CacheのURL&クエリ除外設定

※クエリ文字とは、とは、URL の ?(クエスチョン)以降につく部分のことで、「s」と入力しておくことで、検索結果「例:URL /?s=* 」がキャッシュされないようになります。

 

TTLより大切なのはクローラー間隔

LiteSpeed Cacheは、テーマやプラグインのアップデートや、サイトの設定変更等で全ページをパージ(キャッシュの削除)すると、スケジュールに従いクロール(先読み)するのみで、パージ後、即自動クロールはしてくれないようです。

WP-Optimizeはキャッシュパージ後は、自動でプリロード(先読み)してくれます。
WP-Optimizeはキャッシュパージ後は、自動でプリロード(先読み)してくれます

これを防ぐためには、手動パージ後は、手動でクロールを実行するか、クロールのスケジュール間隔を短くするしかありません。

Litespeed Cacheの手動クロールボタン

LiteSpeed Cacheのクローラー間隔はデフォルトでは、302400秒(3.5日)で、さすがに長すぎるので、ここは設定変更したほうが良いと思います。

LiteSpeed Cacheのクローラー間隔設定

ここを例えば21600秒(6時間)に設定しておけば、テーマやプラグインの自動アップデート時や、手動でパージしたとしても、長くても6時間以内にはほぼすべてのページを自動でクロールしてくれますので、キャッシュのHITミスの発生時間を最小限に抑えることができます。

クローラーの実行間隔を短くしすぎるとサーバー負荷が増える可能性もありますが、LiteSpeed Cacheには、「サーバー負荷制限」というものがあるので、よほど極端な設定にしない限りは問題は発生しないと思います。

LiteSpeed Cacheの「サーバー負荷制限」

クロール間隔の目安

Litespeed Cache公式ドキュメントより~

クロール間隔
302400

クロールプロセスをどのくらいの頻度で再開しますか?これは、サイトのクロールにかかる時間によって異なります。最適な方法は、クローラーを数回実行し、経過時間を記録することです。経過時間がわかったら、クロール間隔をそれより少し長い値に設定します。例えば、クローラーの実行に通常4時間かかる場合は、間隔を5時間(または18000秒)に設定します。

Crawler _ Screen-by-Screen _ LSCache for WordPress _ LiteSpeed Documentationより~機械翻訳済み

Crawler _ Screen-by-Screen _ LSCache for WordPress _ LiteSpeed Documentationより~

キャッシュHITの確認方法

ページが実際にキャッシュされているかどうかはシークレットモードで確認ができますので覚えておきましょう。

※シークレットモード(プライベートブラウジング)とは、ウェブブラウザで閲覧履歴、Cookie、サイトデータ、フォーム入力情報などを保存せずにウェブサイトを閲覧できる機能です。キャッシュはWordPressにログインした状態ではチェックできませんので、このモードを使用します。

シークレットモードを起動する
シークレットモード(プライベートブラウジング)は、ブラウザを開いた状態でキーボードのCtrl + Shift + Nを押します。

シークレットモード(プライベートブラウジング)を開いたら、調べたいブログを開き、キーボードの [F12](または右クリックして「検証」)を押します。

▼右側に以下のようなパネルが現れます。

シークレットモードの使用方法(起動の仕方)

「Network」タブを選択して再読み込み
画面に出てきたパネルの [Network] タブをクリックし、その状態でページをリロード(F5)します。

「x-litespeed-cache: hit」を探す
一番上にある自分のサイトのURLをクリックして、右側に出てくる [Headers](ヘッダー)の中を確認してください。

x-litespeed-cache: hit と書いてあればキャッシュ済み! (サーバーが事前に用意したキャッシュを瞬時に返している証拠です)

x-litespeed-cache: miss の場合は、まだキャッシュが作られていません。

※もし「miss」と出ても、もう一度リロードして「hit」に変わればOKです。クローラーがまだ巡回していないページでも、一度誰かがアクセスすれば次からは「hit」になります!

※複数のページで「miss」が出る場合は、キャッシュが生成されていないので、手動クロールを実行すると「hit」がでるようになります。

check.lscache.io を使った確認方法(補足)
それ以外の方法としては、LiteSpeed公式が提供しているキャッシュ確認ツール

LSCache Check を使う方法もあります。

URLを打ち込み「✓LiteSpeed cache is a hit」と出ればキャッシュ済みです。

※LiteSpeed Cache専用の公式チェックツールですので、LiteSpeed Cache以外のキャッシュの測定はできません。

さらなる高速化が必要ならゲストモードはON!

LiteSpeed Cacheには、通常のサーバーキャッシュ機能のほか「ゲストモード」というものがあります。このゲストモードをONにすることで、サイトはさらに高速表示が可能になります!!

LiteSpeed Cacheのゲストモードでさらに高速表示が可能に!

ゲストモードとは、Cookieを持たない初回訪問ユーザー向けに専用のキャッシュを用意し、通常ユーザー用キャッシュとは別に配信する仕組みです。

これにより、初回アクセス時でもキャッシュが利用されやすくなり、表示速度の安定化が期待できます。

注意点
ゲストモードをONにすると、アクセス解析ツール(Google Analytics など)で、リファラー情報が正しく取得できない場合があります。参考:WordPress Theme Bug Fix for LiteSpeed Cache Analytics Referrer – Brian Prom Blog

※最新の LiteSpeed Cache では、ゲストモード有効時に発生していた不具合の多くは改善されていますが、環境やテーマによって挙動が異なる場合もあるため、有効化後はアクセス解析などの計測データに変化がないかを確認した上で運用することをおすすめします

コメント欄を設置している場合のTTL設定

当サイトではスパム対策でコメント欄に、SiteGuard WP Pluginの「画像認証(CAPTCHA)」を表示させていたのですが、LiteSpeed Cacheのキャッシュを有効にすると、その画像認証が表示されないというトラブルが発生しました。

「画像認証(CAPTCHA)」が表示されないトラブルはESIの設定を「オン」にすることで解消されました。

その場合は、ESI(Edge Side Includes)の設定を「オン」にすることで解消されます。

LiteSpeed CacheのESI設定

※ただし、ESIをONにすると、画像認証問題は解消しますが、キャッシュHIT状態でも、コメント欄のあるページのレスポンスタイムが悪化する場合があるので注意して下さい。

ESI ON時のレスポンスタイム

ESI ON

ESI OFF時のレスポンスタイム

ESI OFF

コメント欄とキャッシュプラグインの相性

画像認証に限らず、投稿ページ内にコメント欄など ユーザーが入力・送信を行う機能 を設置している場合、キャッシュプラグインとの相性には注意が必要です。

コメントフォームやメールフォームでは、WordPress の ノンス(送信の正当性を確認する一時的なセキュリティコード) が使用されており、キャッシュされた古いページが配信されると、フォーム送信が失敗する原因になることがあります。

メールフォームなど特定のページであれば、そのページだけキャッシュ除外することで対応できますが、コメント欄は、ほぼすべての投稿ページに共通して設置されている ため、個別にキャッシュ除外する運用は現実的ではありません。

LiteSpeed Cache では ESIを有効にすることでコメント欄のみを動的表示にすることも可能ですが、ページを分割して処理する仕組みのため、レスポンスタイムが悪化する可能性があります。

それ以外の現実的な対処方法としては、キャッシュの有効期間(TTL)を短めに設定する ことが挙げられます。

WP-Optimize には LiteSpeed Cache のような ESI 機能がないため、キャッシュの有効期間はデフォルトで10時間に設定されています。10時間以内に設定しておけば、ノンスの有効期限切れによるフォーム送信失敗のリスクを抑えることができます。

投稿ページにコメント欄を設置している場合は、不具合を避けるために TTL を短めに設定する、もしくは、どうしてもキャッシュプラグインを最大限活用したい場合には、コメント欄の閉鎖を検討する という判断も一つの選択肢だとおもいます。

当サイトは面倒なのでコメント欄は閉じることにしました。代替はこれ。
【備忘録】メールフォームにリファラー(遷移元URL)情報を添付する方法!
ブログのコメント欄は、キャッシュプラグインとの相性が悪く、結局、閉じることにしました。しかし、それだけでは寂しいので、メールフォーム(Contact Form 7)を活用して、どのページからメールが送られたのかを把握できるようにしてみました...

公開 / 更新の自動パージルールの設定に気をつけて!

自動パージは「影響があるページだけ」に限定するのが基本です

Litespeed Cacheの設定を解説している多くのサイトでは、更新時のパージルールで「すべてのページ」にチェックを入れることを推奨しています。しかし、ここは「記事を公開や更新したときに自動で」消去する範囲を決める設定であり、手動パージのルールではありません。

公開 / 更新の自動パージルール

ここにチェックを入れてしまうと、記事を1つ新規投稿したり、誤字を1箇所修正して更新しただけで、クローラーが時間をかけてコツコツ作り上げた「全ページのキャッシュデータ」がすべてリセットされてしまいます。

特に、LiteSpeed Cache はパージ後すぐにキャッシュを作り直してくれる仕組みではないため、クローラーが回るまでの間はキャッシュヒット率が下がり、表示速度やサーバー負荷の面で不利な時間帯が発生します。

おすすめ設定:
記事の更新時などの自動パージ設定は「フロントページ(トップ)」や、カテゴリやタグなど影響がある範囲だけに絞って自動パージさせるようにしましょう。

全部消したい時は:
管理画面上部のツールバーから、いつでも「手動」で全パージできます。

▼プラグインやテーマのアップデート時は「全てをパージ」する設定もあるので、キャッシュが残り、ページに不具合が起こる心配はありません。

まとめ

LiteSpeed Cacheは、LiteSpeedサーバー向けに最適化された高性能なキャッシュプラグインです。

LiteSpeed Cacheを入れるとPageSpeed Insightsのフィールドデータがここまで改善します(フィールドデータは28日間の集計結果になります)。

特に、キャッシュプラグインを入れることで最も効果が出ると言われる「Time to First Byte (TTFB)」が大きく改善していますね。

Litespeed Cache導入前のPageSpeed Insightsのフィールドデータ

LSCe導入前のPageSpeed Insightsのフィールドデータ

Litespeed Cache導入後のPageSpeed Insightsのフィールドデータ

LSC導入後のPageSpeed Insightsのフィールドデータ

LiteSpeed Cacheは、多機能であるがゆえに、Cocoonなどの高速化を謳ったテーマと機能が重複し、設定次第ではページ表示が重くなったり、サイトレイアウトが崩れたりする場合があります。

一方で、各設定を正しく理解し、細かく調整できれば、他のキャッシュプラグインにはない高いパフォーマンスを発揮できるのも事実で、そのため、ある程度WordPressに慣れている方にはおすすめできますが、WordPress初心者の方にはやや敷居が高いため、「まずは手軽にキャッシュプラグインを使ってみたい」という方には、WP-Optimizeをおすすめします。

安心・安全・簡単なキャッシュプラグインならWP-Optimize
WP-Optimizeプラグインは以前からデータベースのゴミ対策で使っていたのですが、「WP-Optimize」が最も簡単に導入できるキャッシュプラグインと判断し、導入してみました。キャッシュと未キャッシュでどれだけ体感(表示速度)が違うの...

日々勉強です。

この記事を読んでいるあなたにおすすめ

LiteSpeed CacheとWP-Optimize キャッシュプラグインの速度比較|PageSpeed Insightsのフィールドデータを1ヶ月間検証
ここ数ヶ月、当サイトでは複数のキャッシュプラグインをテストしてきました。その中でも特に注目したのが「Litespeed Cache」と「WP-Optimize」の2つ。実際に1ヶ月間、PageSpeed Insightsのフィールドデータを...
タイトルとURLをコピーしました