mixhostなどのLiteSpeed WebサーバーでWordPressの高速化機能を最大限に活かすには、LiteSpeed Cacheプラグインを導入する必要があります。
そこで今回はLiteSpeed Cacheプラグインのインストール方法と、初心者にはわかりにくい設定画面の解説をお伝えします。
LiteSpeed Cacheとは
LiteSpeed Cacheは、LiteSpeed Webサーバーで使用できるキャッシュシステムです。
Webサーバーとは、サーバーの中の一つの機能で、パソコンのブラウザからホームページの表示要求を受け、パソコンに必要なデータを渡す処理をおこないます。
そのためWebサーバーの機能次第で、表示速度が大きく変わります。
WebサーバーのほとんどがApache（ロリポップ等）とNginx（エックスサーバー等）のどちらかが採用されています。
mixhostのように、LiteSpeed Webサーバーを導入しているレンタルサーバーは非常に少ないのです。
mixhostのサポートページによると、LiteSpeed Cacheは非常に高速かつ高性能で、キャッシュを有効にすることで数十倍から数百倍の高速化が可能だそうです。
LiteSpeed Webサーバーを利用しているなら、有効にしておかないともったいないですね。
WordPressは、パソコンからページの表示要求を受けてから、データベースを検索してページを作成しています。
しかし同じページの表示要求を受け、毎回同じページを作成するのは非効率です。
表示直前のページを保存しておき、要求があったら、そのままパソコンに送り出した方が効率的です。
この仕組みをキャッシュと呼びます。
実際にはページだけでなく、ファイルやデータベースの呼び出しの一部を保存しておくなどの機能についても、キャッシュとして扱われます。
LiteSpeed Cacheプラグインのインストール
ではLiteSpeed Cacheのキャッシュ機能をWordPressで有効にするために、プラグインをインストールしましょう。
プラグイン ＞ 新規追加 をクリック
↓
キーワードに「LiteSpeed Cache」と入力
↓
「今すぐインストール」をクリック
↓
「有効化」をクリック
↓
LiteSpeed Cacheプラグインのインストール完了！
他にキャッシュプラグインを導入しているとLiteSpeed Cacheが正常に動作しません。
導入済みのプラグインを削除するか、LiteSpeed Cacheを使用しないで、そのまま利用してください。
LiteSpeed Cacheプラグインの設定
LiteSpeed Cache ＞ 設定 をクリックして設定画面を開きます。
表示直後は、変更できるオプション設定が少ない状態です。
「高度なオプションを表示」をクリックすることで、全てのオプションが表示されます。
パージ：保存してあるキャッシュを破棄
TTL(Time to live):作成したキャッシュを破棄するまでの時間
各オプション値の説明
オプションは全部で12のタブに分かれていて、それぞれに詳細説明のページリンクが貼られています。
しかし専門的な説明でわかりにくいので、独自視点で解説してみます。
[1]全般
LiteSpeed Cacheのオン・オフ、キャッシュの有効期間を設定します。
ここで設定するのは、基本的にオン・オフの切り替えのみです。
LiteSpeed Cacheのオン・オフを切り替えます。
オフにすると、それまで保存してあるキャッシュが破棄（パージ）されます。
画面表示がおかしいと感じたら、一度無効にして、改善されるか確認をしてみてください。
公開したページのキャッシュが作成されて、一定の時間が経過するとキャッシュが破棄されます。
その時間を秒で指定します。
デフォルト604800秒＝10080分＝168時間=7日
非公開ページのTTLを秒で指定します。
デフォルト1800秒＝30分
TOPページのTTLを秒で指定します。
デフォルト604800秒＝10080分＝168時間=7日
フィードのTTLを秒で指定します。30秒未満はキャッシュしません。
デフォルト1秒＝キャッシュしない
404・403・500ページのTTLを秒で指定します。30秒未満はキャッシュしません。
デフォルト3600秒＝60分＝1時間
LiteSpeed Cacheプラグインを自動でアップグレードするか指定します。
[2]キャッシュ制御の設定
ここでは主に、キャッシュ対象を設定します。
ログインユーザーごとにキャッシュを作成します。
会員登録しているユーザーのみに閲覧を許可しているサイトで意味がある機能です。
登録ユーザーが増えるほど効果が上がりますが、その分サーバーのディスクサイズを圧迫するので、状況を注意深く監視する必要があります。
このオプション、よくわかりません（汗
説明文の日本語訳をそのまま掲載します。
このオプションは、ゲストのコメントをモデレートする必要があるWordPressオプションに役立ちます。 そのオプションが設定されている場合、このオプションはページのキャッシュバージョンを提供します。つまり、コメント投稿者にはモデレーションコメントが表示されません。 オフの場合、コメント投稿者はキャッシュから提供されません。
どうやら、詳細待ちというメッセージが表示されなくなるようだ。
WordPress REST APIの要求をキャッシュします。
WordPress REST APIは、外部からWordPressへの投稿や記事参照を行える機能です。
ログイン画面をキャッシュします。
ログインページで画像認証など毎回表示が変わる場合、オフにした方がよさそうです。
favicon.icoが存在しない場合、余分な呼び出しがブラウザからおこなわれます。
意外と負担が多い処理なので、キャッシュをしておくべきです。
とりあえずONで！！
実行した結果同じ内容になるPHPのリソースをキャッシュします。
とりあえずONで！！
モバイル端末の種類ごとにキャッシュするかどうか指定します。
種類ごとに内容を変えたいとき、効果があります。
ただし、その分サーバーのディスクサイズを圧迫します。
モバイルかどうか判断するための、ユーザーエージェント文字列を指定します。
ここで指定した文字列とURLが一致した場合、プライベートキャッシュとして保存されます。
基本的に同じページでもクエリ文字列が異なれば別のキャッシュとして保存されます。
クエリ文字列を落とす（削除）することで、同じページとして扱います。
ただし、分析目的などで一般的に使用されるクエリ文字列は、自動で無視されます。
[3]パージ設定
ここではキャッシュを強制的に削除するタイミングを設定します。
WordPressやテーマがアップグレードされたときに、保存されているキャッシュをすべて削除するかどうか指定します。
推奨はオンです。
記事が公開されたり変更されたとき、連動して再生成するページを指定します。
影響を受けそうなものを指定するといいです。
よくわからないときは全てでも大丈夫。
特定の時刻でキャッシュを削除するページを指定します。
例えば外部ページの情報を決まった時間に取り込んでいるときなどに、使用します。
上で指定したURLをパージする時刻を指定します。
[4]設定を除外する
これまでの設定を、除外するパターンの設定をおこないます。
他の設定にかかわらず、強制的にキャッシュするURLに一致する文字列を指定します。
正規表現での指定が可能です。
上記とは逆に、他の設定にかかわらずキャッシュさせたくないURLに一致する文字列を指定します。
毎回内容が変わるページを指定するといいでしょう。
正規表現での指定が可能です。
クエリ文字列単位でキャッシュさせたくないURLに一致する文字列を指定します。
例えばデバッグ中のページなどはキャッシュされると、テストに支障がでます。
クエリ文字でdebug=onなどを渡し、この欄で「debug」と指定することでキャッシュを無効化できます。
正規表現での指定が可能です。
キャッシュさせたくないカテゴリのスラッグを指定します。
設定保存時にカテゴリスラッグが存在していない場合、この欄から削除されます。
間違えて入力していないか、保存後に確認しましょう。
キャッシュさせたくないタグのスラッグを指定します。
こちらも設定保存時にスラッグが存在していない場合、この欄から削除されます。
保存後に確認しましょう。
ページにこの欄で指定したクッキーが含まれている場合、そのページをキャッシュしません。
安易に設定すると、サイト全体がキャッシュ対象から除外されることもあるので、注意しましょう。
ユーザーエージェントの内容が、この欄で指定した文字列と一致した場合、キャッシュが存在していても、ページ生成されます。
検索クローラーに常に新しいページを提供するのに有効…かもしれません。
WordPress上での管理者などのロールごとに、キャッシュされたページを表示するかどうかを指定できます。
[5]最適化の設定
CSSファイルとJavascriptファイルを最適化する設定をおこないます。
CSSファイルから余分な空白や改行を削除します。
これにより、転送量を削減できます。
複数のCSSファイルを一つのファイルにまとめます。
これにより、ブラウザからの呼び出しが一回で済みます。
ただし複数のファイルに同じ内容のスタイル設定がある場合、後の内容が優先されます。
そのため、結合によりブラウザ上での表示が変わってしまうことがあります。
ブラウザ（クライアント）から要求される前に、CSSファイルを送り付けます。
クライアントは、要求してファイルが送られてくるまでの時間が不要になるので、速く表示することができます。
Javascriptファイルから余分な空白や改行を削除します。
これにより、転送量を削減できます。
複数のJavascriptファイルを一つのファイルにまとめます。
これにより、ブラウザからの呼び出しが一回で済みます。
こちらもCSSと同じように、誤動作などの副作用がおこる可能性があります。
ブラウザ（クライアント）から要求される前に、Javascriptファイルを送り付けます。
クライアントは、要求してファイルが送られてくるまでの時間が不要になるので、速く表示することができます。
キャッシュされたCSSとJavascriptが破棄されて再生成されるまでの時間を指定します。
デフォルトは604800秒＝10080分＝168時間=7日です。
CSSやJavascriptを変更した場合の挙動がわかりません。
念のため、管理メニューでパージしたほうがいいかもしれません。
HTML内から画面表示と関連しない空白や改行、コメントが削除されます。
※インライン CSS・インライン JSは、HTML内に記述されたCSSとJavascriptです。
オフの場合、ブラウザはCSSを読み込んでから画面を表示します。
オンの場合は、CSSの読み込みと画像表示が同時におこなわれます。
そのため、一時的に画面表示が乱れます。
CSS非同期ロードでの初期画面の乱れを緩和するために、必要なスタイルを抽出したクリティカルCSSを作成します。
生成はLiteSpeedのリモートCCSSサーバーにておこなわれたあと、レンタルサーバーにキャッシュされます。
そのため、ccss.api.litespeedtech.comからのアクセスをブロックしてはいけません。
またクリティカルCSSは最初にページを表示するときに作成されるので、そのときの閲覧者は乱れた画像が表示される可能性があります。
オフにした場合、クリティカルCSSが作成されてから、ブラウザにコンテンツが送信されます。
つまり表示までの時間が非常に遅くなります。
オン推奨です。
基本的に一つの投稿タイプにつき、ひとつのクリティカルCSSが生成されます。
この欄に投稿タイプを入力すると、ページごとにクリティカルCSSが生成されます。
この欄にURLの一部を入力すると、一致するページに対してクリティカルCSSが生成されます。
上の投稿タイプを使用するよりも、こちらを使用したほうが安全だと思います。
非同期のCSSライブラリをhtmlデータ内に挿入します。
とはいえ、全てのCSSがインライン展開されるわけではないようです。
scriptタグにDeferred属性を付加します。
これにより、外部スクリプトが非同期で読み込まれます。
非同期での読み込みは、読み込む順番を制御できません。
依存関係があるスクリプトファイルにおいてこれは致命的で、ほとんどのケースでエラーとなります。
そのため、このオプションは非推奨です。
オフにしておきましょう。
JSについての設定から、JQueryを除外します。
オン推奨です。
画面遷移する可能性が高いドメインのDNS（IPアドレス）を、先に検索しておくことで、ページ移動を素早くおこなえるようにします。
サイドバーなどに設置した、重要な外部サイトのドメインを指定しておくといいかもしれません。
余分なコメントを削除して、転送時間を削減します。
[6]チューニングの設定
[5]の最適化設定をさらに詳しく設定します。
外部のCSSファイルと、[5]の最適化で結合したCSSファイルの読み込む順番を指定します。
オン：結合したCSSファイルを先に読み込む
オフ：外部のCSSファイルを先に読み込む
[5]のCSSに関する設定から除外するCSSファイルを指定します。
外部のJSファイルと、[5]の最適化で結合したJSファイルの読み込む順番を指定します。
オン：結合したJSファイルを先に読み込む
オフ：外部のJSファイルを先に読み込む
[5]のJSに関する設定から除外するJSファイルを指定します。
結合後の最大ファイルサイズを指定します。
最大ファイルサイズを超える場合、複数のファイルに分割されます。
基本的にはファイル数が少ない方がページスコアがよくなりますが、ファイルサイズが大きくなるにつれて必要なメモリサイズが増えます。
LiteSpeed Cacheの技術者は1.2MBが最適だと考えているそうです。
JSやCSSファイルのURLから、クエリ文字列を削除します。
通常、JSやCSSファイルはブラウザでキャッシュされます。
しかし一部のブラウザでは、クエリ文字列があるとキャッシュされないことがあるためです。
Googleフォントはとても重いです。
他のCSSは非同期にしていなくても、Googleフォントだけは非同期にしておいたほうがいいです。
よってオン推奨です。
Googleフォントを使っているかどうかわからないなら、オンにしておきましょう。
Googleフォントの読み込みを禁止します。
そもそも重いならいらない、という人はオンにします。
ただし、表示されない文字が出てくる可能性があるので注意。
自動生成されるクリティカルCSSに、追加するスタイルを記述します。
[5]で「JS Deferredをロード」をオンにしたとき、対象外とするJSファイルのURLを指定します。
オンにすると、WordPressの絵文字表示機能に必要なJavascriptを削除します。
最近のブラウザは、この機能がなくても問題ないようです。
[5]の最適化から除外したいURLを指定します。
[5]の最適化を行わないロールを指定します。
[7]メディア設定
主にイメージ画像(jpeg,png,webp)のブラウザ表示と、最適化について設定を行います。
画面上に表示されている画像のみ読み込みます。
これにより、サイトの表示速度を向上できます。
次のCSSを使用することで、画像をフェードイン（ふわっと表示）させることができます。
img[data-lazyloaded]{
opacity: 0;
}
img.litespeed-loaded{
-webkit-transition: opacity .5s linear 0.2s;
-moz-transition: opacity .5s linear 0.2s;
transition: opacity .5s linear 0.2s;
opacity: 1;
}
遅延表示対象外とする、画像のURLを指定します。
URLの一部だけでもOKです。
遅延表示対象外とする、クラス名を指定します。
クラス名の一部だけでもOKです。
画像読み込み前に表示する画像を指定します。
デフォルトは灰色画像です。
data:image/png;base64,iVBORw・・・という形式（base64）で指定します。
例えば、次のような画像の場合、
base64では、次のような表記になります。
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHIAAAA1CAYAAACdgL+pAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEP0lEQVR4nO2cL1QjMRDG572KiooKBAKBQCARJxAnKhCIEwgEoqICgUBUnECcRCAQJxAIBAKBQCAqEIgKBAJRgUAgEIgKREVFRcV3YmZflmx22fDKpVlGzOPLZHYT8ts/yb5MCQCpxW/BO6BWdZBGTUFY/SCuH7y/CvJDkADhRkHGD7Inf38pyLhBroAwAeEZhJqCjBUk6yMpH5QGSdgH4QH8jp2K3nfEPYPw4vCvidp11A1AeA4+RhGCbIAwBGEEwuKHIAmXon7LsQ0Q9gTopRX7V9Rqjv/W8i+KOg4+RtGB5HJH1HkhSMKOqBPHORM4Oynfhqj9lK8GwqvYFOmLh9AW1Qo+RlGCZN+9qPUCkP1MjKn74YivgzBGemZs4G4KyG6q7gL8ZMi+rxVkaZDrou4LQI5ENRznrIsaWf5rgVmX8hkIA9G3INylYoewH89zYME74AWS/eeiOjkg3ccVXyC7olowd2jXqluCmQC1g49PBUAugu+6IQhNB8ixKNcd2RA1tvxLoo5A2AY/ThekbgG8/OmCcPCubo4seAe8QXLdQWrgbZB9Ua535Hom3tQ9gpcV1yD0rLprEO5gP2bnyIJ34JMga+D138QBsiPKNWs9EdVx1B2KmoCwbdW1U3XZtewcWPAOfAok12+mSn2r7kpUeh35W3xXOef7KWqEZNJj6howF03+B3wF+QmQHHOTA7KGvC87ecsGPmYEwmlO/QXm7GtOHCDVFOR3tOAdUFOQagqyeha8A2oKUk1BVs+Cd0BNQaopyOpZ8A6oKUg1BVk9C96B4Jao0P2YW5CxDJCrn7H0XUEqyO8BMkLTAYqln9GALJs9xbFX4O2L45T3VfwbOcfspM4P8L7YO2c/i3y8SetC2kvO495Zx7vvHlKepM2p19hEA9Ine4rjB+Ad4CtSrssADySibcUn+1/PQFgS3wrMzjofkEPwlss6ePNykoi7b8UfizpFkgRU1Gb0IH2zp4rPlWzpf0r5WqLc6ev+IO20viQx6NHRZq90mxUA2RdVLnvKt13eJQ7kP3L9QGaPrxe02fpOID+TPVUDYQt8x96Ad50P3x1tYt9ENb8EpPvi8W+zAiCL47KDtALCk5R64HflOgjLOfF+558NSP82KwDSL3uKE2mA/JmiPajJVv96qfjZgPRvswIg+6LKZU+Z5UO5QTJZzmv/EeTAu80KgOyIKpc9Zd6F2RxFXg7Yg5qk4B064huZ+NmA/OPdZvQgObZ89pQBcw3zXlyW+LdMuzxhegTfyXtSboATWl++CGQT/B6fgD8K1MW3k9vm3IMsMhPrlz3FQJIJz1T0Gcz6zYawIPXJDHkIvni2vgQk+xZhfjgi3ea2lCdxgFRzG1+0AOFBQcZs5qdfurM8b/h/rKrGs+U2zLfdJvixmnw4n+nv9IT/h6tq/LHiGWa5NBa43VlDVJAVsuAdUJuN/QMTH9ES8jrdSgAAAABJRU5ErkJggg==
一見便利そうな機能ですが、全ての画像タグにこの文字列が付加されるので、データサイズを極端に増やすことになります。
あまりおススメできない機能です。
元画像と同じサイズで、プレースフォルダの画像を作成します。
imgタグに、高さ(height)と幅(width)が指定されているときのみ有効です。
応答プレースホルダの背景色を指定します。
応答プレースホルダは、ページに最初にアクセスされたときに生成されます。
このオプションがオフの場合、応答プレースホルダの生成が完了してから、ページデータがクライアントに配信されます。
そのため、最初のアクセスでの画面表示は、通常より多くの時間がかかります。
Iframeが画面外の場合、読み込みを行いません。
画像の遅延読み込みに必要なJavascriptファイルを、HTML内にインライン展開します。
同じファイル内に組み込まれるため、動作しない確率が減ります。
画像の最適化を行います。
1200クレジットのアカウントでのみ機能するという制限があります。
1200クレジットとは何なのかは不明です。
EWWW Image Optimizerプラグインなどを入れてしまった方が、手っ取り早そうです。
なお、画像データ圧縮なら、こちらのツールを使ってみてください！（宣伝）
アフィリエイター向け画像軽量化ツール
この機能をオフにした場合、サーバーで最適化された画像を手動で取得する必要があります。
最適化前の画像を、別名で保存します。
最適化終了後に、バックアップを削除します。
最適化と同時に、WebP形式の画像ファイルを作成します。
品質の劣化がない方式で画像を圧縮します。
ただし、ファイルサイズはあまり小さくなりません。
画像内の画像表示に必要がないデータ（撮影場所など）を維持します。
WebP形式の画像を表示できるブラウザから呼び出された場合、他の形式の代わりにWebP形式を送信します。
ここでオンにした場合、実際に表示するには、画像ごとにメディアライブラリで、WebPの有効化を行う必要があります。
めんどくさい！
指定されたタグ属性と一致するものを、WebPに変換します。
WordPressの標準的な処理外でsrcset要素を作成して、その要素に対してWebP置換をしたい場合、オンにします。
[8]CDN設定
CDN（Content Delivery Network）とは、コンテンツの全てまたは一部を、サーバーとは別の場所に保存しておき、状況に応じてコンテンツの取得先を変えることができるネットワークのことです。
ブラウザからのアクセスを分散することで負荷軽減となり、サーバーダウンの確率を減らすことができます。
CDNを使用する場合、オンにします。
ただしCloudflareを使用する場合はオフにして、CloudflareのAPIを使用します。
CDNサーバーの、配信設定を行います。
画像・CSS・js毎に配信元を変更する場合、「＋」ボタンを押して、入力欄を増やしてください。
CDN URL：CDNとして使用するサーバーへのパスを入力します。
画像を含める：全ての画像をCDNから配信します。
CSS を含める：全てのCSSファイルをCDNから配信します。
JS 含める：全てのjsファイルをCDNから配信します。
ファイルの種類を含める：CDNから配信するファイルのタイプを指定します。phpなどの動的に作成されるファイルは指定できません。画像などの静的ファイルである必要があります。
CDN経由でサイトURLが必要な場合、この値が使用されます。
基本的に、変更する必要はありません。
指定されたディレクトリ内のファイルが、CDNの対象となります。
CDNの対象外としたいファイルのパスを指定します。
JQueryをサイト内からでなく、他のCDNから読み込むように変更します。
選択できるのは、GoogleとCdnjsです。
Quic Cloudを使用する場合オンにし、メールアドレスとユーザーAPIキーを入力します。
[9]ESI設定
ESIとは、一つのコンテンツをキャッシュする部分とキャッシュしない部分を明示的に分けることで、ページ作成を効率化できます。
ただし、プログラム的な作りこみが必要なため、一般的には使用できません。
ログインユーザーに対して、 管理バー・コメント・コメントフォーム・最近の投稿ウィジェット・ 最近のコメントウィジェットがESIとして作成されます。
管理バーをキャッシュします。
コメントフォームをキャッシュをキャッシュします。
0以外を設定すると、番号ごとに個別のキャッシュが作成されます。
ESIタブに入っていますが、通常のキャッシュとしての動作で、ESIの機能ではないそうです。
まとめ
他に、[A]高度、[B]デバッグ、[C]クローラーがありますが、あまり変更するものではないので、ここまでとします。
ここで紹介したオプションを変更してみて、速度が向上するかどうか試してみてください。
■Googleで他サイト検索
■僕がおススメするアフィリエイト教材
■マーケティング施策ツール
こんにちは。
