『LiteSpeed Cache』でサイトを高速化する ~ mixhostの使用例

JSの設定
記事について

キャッシュ系プラグイン『LiteSpeed Cache』を使ってサイトを高速化する方法を紹介しています。ソースコードをいじらなくても、機能を有効化するだけで、サイト表示スピードを改善することができます。LiteSpeed Cacheに対応したサーバー『mixhost』での使用例です。

目次 🏃

LiteSpeed Cache について

プラグインの概要

『LiteSpeed Cache』は、世界的に注目されている、サイト高速化プラグインです。

従来のキャッシュ系プラグインに比べ、非常に高度な機能を備えている上、操作も簡単で、有効化するだけで表示速度を大幅に改善することができます。

詳しくは、WordPress公式サイトの『LiteSpeed Cache』の説明をご参照下さい。
https://ja.wordpress.org/plugins/litespeed-cache/

ただし、『LiteSpeed Cache』に対応したサーバーが必要な為、ネット民が大好きな『エックスサーバー』では使えません。

当方は、LiteSpeed Cache を使いたいが為に、エックスサーバーから『mixhost』に移行しました。

スコアも上がって、使い勝手には満足しています。

LiteSpeed Cacheとは、LiteSpeed Webサーバーで利用できるキャッシュ機能です。
非常に高速かつ高性能で、キャッシュを有効にする事により、導入前と比較して数十倍〜数百倍程度、圧倒的に高速化する事が可能です。
また、サーバーの負荷が低くなる為、アクセス集中時にも安定してご利用いただけるようになります。
LiteSpeed Cacheは、WordPressのプラグインを導入するだけで簡単にご利用いただけます。

mixhostの解説ページより



こんな方におすすめ
  • 画像を圧縮したり、ヘッダーをカスタマイズしたり、あれこれ試したが、まったく効果がない
  • そろそろエックスサーバにも飽きてきた
  • あちこち、いじるより、サーバーを変えた方が楽な気がする

まずはテストサイトでの動作確認をおすすめします。プラグイン設定はワンクリックでインポート&エクスポートできます。

プラグインの有効化

LiteSpeed CacheのサーバーでWordPressの開設(移行)が完了したら、下記の作業を行います。

競合を避ける為に、『高速化』に関する機能は全てオフにします。(プラグイン、テーマ、全て)

  1. LiteSpeed Cache 以外の、キャッシュ系プラグインを無効化する
  2. テーマ・テンプレートが提供しているキャッシュ機能を全てオフにする
  3. 画像の遅延読込み、ヘッドクリーナーなど、高速化に関する機能を全てオフにする

WordPressの『プラグインの新規追加』、もしくは、公式サイトからプラグイン・ファイルをダウンロードしたら、プラグイン管理画面で有効化します。

デフォルトの状態で、サイトが正常に表示されているか、確認した上で、各種設定に進みます。

キャッシュ系プラグインは、個々のWordPress環境に大きく左右されますので、面倒でも、一つ一つ、動作を確認して、オン / オフ を確定して下さい。

画像は、当サイトの設定であって、お手本ではありません。あくまで参考に御覧下さい。

基本の設定

ダッシュボード

ダッシュボードでは、「画像の最適化」、クリティカルCSSの使用料、ページの読み込み時間、PageSpeedスコアなど、様々な情報を一覧することができます。

LiteSpeed Cacheのダッシュボード

一般設定とドメインキー

画像のCDNを利用する場合は、ドメインキーを取得します。

下図は既にドメインキーを取得した状態ですが、すべて日本語でメニュー表示されるので、メッセージに従って、QUIC cloud に登録すれば完了です。

サービスの登録は、メルアドと名前だけでOK。

ドメインキーの登録

CDNの使い方が分からない場合は、QUIC.cloud との接続は避けた方が無難です。

CDNを利用しない場合は、空欄(無効化)しておくことをおすすめします。

QUIC.cloud と接続しなくても、CSS/JS圧縮や結合など、一通りのキャッシュ機能は利用可能です。

キャッシュ機能の設定

ログイン、コメント、REST API、ファビコン、PHPリソース、モバイルキャッシュなど、細かな設定が可能です。

面倒でも、一つ一つ、「オン」→「パージ」を繰り返して、動作確認します。

キャッシュ機能の有効化

TTLの設定

TTLの意味が分からない人は、デフォルトのままでOK。当サイトもデフォルトのままです。

TTLの設定

パージの設定

更新の度に、キャッシュが削除されるよう、パージ(キャッシュクリア)の間隔を調整します。

パージの設定

パージの設定

キャッシュから除外する

キャッシュから除外する項目は、『URL』『クエリ文字列』『カテゴリ』『タグ』『クッキー』『ユーザーエージェント』『ロール』が設定可能。

キャッシュから除外する

キャッシュから除外する

ESIの設定

ESI (Edge Side Includes) では、ログイン中ユーザーのためにキャッシュからページを提供することができます。

『ESIでは、動的ページの一部を別々のフラグメントとして指定し、それらをまとめてページ全体を作成することができます。言い換えれば、ESIはページ内に「穴を開ける」ことができ、その穴に、個人的にキャッシュされたり、独自のTTLで公開されたり、キャッシュされたりしないコンテンツを埋め込むことができます』とのこと。

意味が分かる方だけ、どうぞ。

ESIの設定

オブジェクトキャッシュの設定

オブジェクトとは、画像や動画のことではなく、たとえば、wp-optionsに格納された、プラグインの設定データなどのことです。

ビジターが閲覧する度に、コンタクトフォームの設定や、amazonプロダクトキーなどが、いちいちデータベースから呼び出されて、無駄に負荷をかけますね。

それをキャッシュして、いちいちデータベースから読み込む無駄を省く機能です。

意味の分かる人だけ、どうぞ。

オブジェクトキャッシュの設定

ブラウザキャッシュを有効にする

ブラウザキャッシュの間隔は数値で調整することができます。

デフォルトでは「52週」の設定ですが、頻繁にリライトする方や、それほどトラフィックが集中しない小規模サイトは、もう少し短くてもいいと思います。

どのみち、投稿を更新する度に自動でパージされますし、CSSやウィジェットの変更後、手動でキャッシュクリアすることもあるので、そこまで神経質にならなくていいかも。

ブラウザキャッシュを有効化する

詳細設定(ログインクッキー、HTTP/HTTPSの互換性、インスタントクリック)

上級ユーザー向けの詳細設定です。

『ログインクッキー』『HTTP/HTTPSの互換性を向上させる』『インスタントクリック』を有効にすることができます。

詳細設定 ログインクッキー インスタントクリックなど

CDNの設定

画像表示に、CDNを使いたい方は、QUIC.cloudを利用することができます。

CDNマッピングをはじめ、置換するHTML属性、Queryのリモート読み込み、除外パスなど、細かな設定が可能です。

CDNがいまいち分からない人は、下手に手を出さない方が無難です。

画像を多用したギャラリー系のサイトでなければ、それほど神経質になる必要はないです。

個人サイトなら、ShortPixel や Imagify のような、画像圧縮プラグインで十分です。

CDNの設定

CDNの設定

CDNの設定

よく分からないまま、CDNを有効化すると、画像の最適化が完了した後、サイト内で画像が正常に表示されない現象が生じることがあります。
(公式フォーラムでも同様の相談がある)
wp-content/uploadsフォルダに画像ファイルは残っているけども、サイト上で表示されないのです。
CDNを無効にしてても、不具合が起きます。
サポート側でも、有効な回答はなく、私がチェックした時点では、個別対応になっていました。
画像最適化を利用するなら、テストサイトで十分に動作を確認してから、本番サイトに導入して下さい。
ちなみに、画像が正常に表示されない現象は、最適化が終って、数時間が経過してから発生します。(メディアライブラリからさーっとサムネイル画像が消えていく感じ)

CCSとJSの圧縮とサイトの最適化

CSS設定

CSS設定では、『CSS圧縮化』『CSS結合』『固有のCSSファイル』『CSS HTTP/2』『CSSを非同期ロード』『クリティカルCSSを生成』『バックグラウンドでクリティカルCSSを生成する』『別々のCCSSキャッシュホストタイプ』『個別のCCSSキャッシュURI』を設定することができます。

CSSの設定は、個々のWP環境に大きく左右されます。

サイト表示を見ながら、一つずつ『オン』にしていきましょう。

全ての機能をオンにしなくても、十分、早くなります。

CSSの設定

CSSの設定

JSの設定

『JSの圧縮化』『JS結合』『JS HTTP/2 プッシュ』『JS Deferredをロード』『インラインJSの読み込み』『JQueryを除外する』を設定できます。

JSも、個々のWP環境に大きく左右されます。

サイトの挙動を見ながら、一つずつ、『オン』にしまて下さい。

JSの設定

最適化の設定(HTML圧縮、インラインCSS圧縮など)

『HTML圧縮化』『インラインCSSの圧縮化』『インラインJSの圧縮化』『DNSプリフェッチ』『DNSプリフェッチ制御』『コメントを削除します』『クエリ文字列を削除』『Googleフォントを非同期に読み込む』『Googleフォントを削除』『WordPress文字を削除』『Noscriptタグを削除』を設定します。

テーマ・テンプレートが提供している最適化機能とかぶることがあるので、サイトの動きを見ながら、オン / オフ を調整して下さい。

HTMLの設定

除外するメディア

画像遅延読み込みを除外するファイルの種類を設定します。

多種多様な画像や動画ファイルを利用しているのでない限り、ここは空欄でよいかと。

当サイトも、jpgしか使っていません。

『画像 遅延読み込みを除外』『画像遅延読み込みクラス名を除きます』『遅延読み込みの Image 親クラス名を除外する』『遅延読み込みの iframe クラス名を除外する』『遅延読み込みの Iframe 親クラス名を除外する』『遅延読み込み URI の除外』を設定します。

除外するメディア

ローカリゼーション設定

ローカリゼーション設定では、Gravatorのキャッシュ。

高速化の敵(?) pagead2.googlesyndication.com などをローカライズすることができます。

ローカリゼーションの設定

データベースの最適化

データベースの最適化では、データベースにたまった投稿のリビジョン、自動下書き、ゴミ箱、スパムコメント、Transientsなど、一括削除することができます。

画像にはないですが、『データベースの概要』という項目もあり、LiteSpeed Cacheに関連するデータベースの容量が一目で確認できます。

データベースの最適化

クローラーの設定

要約(クローラーCron)

LiteSpeed独自のクローラーを誘導する項目もありますが、私も今ひとつ詳細が分からないのでスキップしています。

※ 画像は設定画面の一部です。

クローラーの設定

bot用のXMLサイトマップも登録できます。

LiteSpeed Cacheがサイトマップを作るのではなく、他プラグインで生成したXMLのURLを登録する形になります。

bot用のXMLサイトマップの設定

ツールボックス

キャッシュのパージ

万一、不具合が生じた場合は、ワンクリックでキャッシュをパージすることができます。

また、WordPressの管理ツールバーにもショートカットのアイコンが表示される為、いちいち管理画面を開かなくても、ツールバーのメニューからパージすることができます。

ツールボックス

設定のインポート / エクスポート

設定はワンクリックでインポート / エクスポートすることができます。

テストサイトで設定したものを、そのまま本番サイトにも適用できるので、便利です。(ドメインキーとは無関係)

また全ての設定をリセットする機能もあります。

設定のインポートとエクスポート

.htaccessの編集

LiteSpeed Cacheの管理画面から、.htaccessを直接編集することができます。

ダイレクトに反映されるので、分からない人は、従来通り、FTP経由で編集することをおすすめします。

htaceessの設定

ハートビート制御

サーバーの負荷を軽減するために、WordPressインターバルハートビートを調整します。

大規模サイト向けです。

ハートビートの設定

セキュリティやシステムのレポート作成

Dologin Security』という専用のセキュリティプログラムを取り入れます。

これはログインページをブルートフォース攻撃から守るもので、有効化すると、不正アクセスを自動的にキックアウトしてくれます。

また、Google reCAPTCHAや、ロケーションの分析、ホワイトリスト&ブラックリスト管理といった機能もあります。

一般レンタルサーバーやセキュリティ系プラグインにも同様のサービスが備わっているので、改めて取り入れる必要はないかもしれません。

セキュリティ

デバッグ設定

調子が悪い時は、デバッグ機能を使って、修正することができます。

『デバッグログの保存』『デバッグレベル』『ログファイルのサイズ制限』『クッキーをログに記録』『クエリ文字列を折り畳む』『包含するデバッグURL』『除外するデバッグURL』などを設定することができます。

デバッグの設定

ベータテスト

開発者向けのベータテストも可能です。

GitHub経由で、ベータ版を試せるようです。

デバッグの利用

【結び】 LiteSpeed Cacheは快適です

私も『エックスサーバー』を利用中は、『WP Fastest Cache』や『WP ROCKET』や『WP Super Cache』など、いろんな高速化プラグインを試しましたが、結論から言えば、

WP Super Cache >>>> エックスサーバー + キャッシュ系プラグイン

エックスサーバーで、あれこれ組み合わせて、高速化を図るより、最初から LiteSpeed Cache を使った方が、管理も楽だし、スコアも良いです。

「エックスサーバーがどう」というより、それだけ LiteSpeed Cache が優秀なのだと思います。

プラグイン一つで全てが完結する理由も大きいでしょう。

私もエックスサーバーは好きだし、運営者も信頼できますが、LiteSpeed Cache の魅力には負けます。

LiteSpeed Cacheもプロ向けの機能なので、素人には分からない設定も多いですが、CSS、JS、ブラウザキャッシュ、画像の遅延読み込みなど、基本設定さえしっかりやれば、かなりの効果が期待できます。

興味のある方は、レンタルサーバーの試用期間を利用して、テストしてはいかがでしょうか。

ぺこり <(_ _)>


WordPressのタグ :

書籍の案内

当サイトで紹介しているライティングツールで執筆した小説です。参考にどうぞ。

ジャンルはSFですが古典的なスタイルの長編小説です。海外翻訳文学が好きな方に向いています。
サイトで気軽に試し読みできるので、興味のある方はどうぞ。

JSの設定

この記事が気に入ったら
フォローしてね!

Notes of Life

最初から日の当たる場所で歩き始める人はいない。 皆に理解されながら物事を始める人も。 始める時は、いつも一人。 考えるのも、一人。 行うのも、一人。 だからこそ達成の悦びもひとしおなのです。

この記事を書いた人

MOKOのアバター MOKO 著者

作家・文芸愛好家。80年代サブカルチャーの大ファン。アニメから古典文学まで幅広く親しむ雑色系。科学と文芸が融合した新感覚のSF小説を手がけています。看護師として医療機関に勤務後、東欧に移住。石田朋子。
amazon著者ページ https://amzn.to/3btlNeX

Notes of Life

『汝自身を知れ』 ウサギがライオンに憧れて、ライオンの真似をしても、決して上手くいきません。 ウサギはウサギの群れと仲良くするから、友だちもできるし、身の丈にあった暮らしを楽しむことができます。 自分がウサギかライオンか、どちらかを知ることは、幸福の基本です。
目次 🏃
閉じる