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

  • URLをコピーしました!
記事について

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

目次 🏃

LiteSpeed Cache について

プラグインの概要

『LiteSpeed Cache』は、世界的に人気の高い『サイト高速化プラグイン』です。

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

筆者は、『エックスサーバー』から、LiteSpeed Cacheの使えるレンタルサーバー『mixhost』に変えて、スコアも改善しました。



エックスサーバーも良質なサービスと思いますが、『LiteSpeed Cache』は全てに上回ります。

いろいろ試して、効果がないなら、レンタルサーバーを変えた方がラクなので、興味のある方はご一読下さい。

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

mixhostの解説ページより

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

『LiteSpeed Cache』の概要は、WordPress公式サイトもご参照下さい。
https://ja.wordpress.org/plugins/litespeed-cache/

さらに興味のある方は、PageSpeed Insightsで、当サイトのスコアを計測してもらっていいですよ。デスクトップは大半が『緑』、モバイルも、80前後です。赤は滅多にないです。
テーマ・テンプレートは『SWELL』を使っていますが、SWELLの高速化機能は使用せず、LiteSpeed Cache一択です。その方がスコアがいい。

LiteSpeed Cacheを試す

mixhostで、会員登録をしたら、自分のアカウントのコントロールパネルから、『ソフトウェア』→『WordPress Manage by Softaculous』に進み、WordPressをインストールします。

WordPressの立ち上げが完了したら、通常の手順で、プラグイン『LiteSpeed Cache』を有効化します。

コンテンツを全て移行して、mixhostにテストサイトを複製する場合は、以下に留意して下さい。

● LiteSpeed Cache 以外の、キャッシュ系プラグインを無効化する
● テーマ・テンプレートが提供しているキャッシュ機能を全てオフにする

mixhost WordPress Manage by Softaculous

2022年現在、mixhostは『料金前払い+30日間返金保証』となっています。
クレジットカード必須で、気軽に無料お試しすることはできませんが、サポートはしっかりしているので、お金を欺し取られることはないです。
その代わり、キャンセルする時は、期限内に解約手続きするのを忘れないようにしましょう。

基本の設定

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

ダッシュボード

ダッシュボードでは、「画像の最適化」、クリティカル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』など、いろんな高速化プラグインを試しましたが、素直にレンタルサーバーを変えて、『LiteSpeed Cache』を導入した方が、素人には分かりやすいです。

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

mixhostも規約が変わって、お試しにもクレジットカードと前払いが必須になりましたが、私が契約した頃より、動作も安定し、サービスも向上したので、そろそろエックスサーバーにも飽きてきたという方は、乗り換えを検討してはいかがでしょうか。

ちなみに、mixhostが採用している、『cPanel』の『ファイルマネージャー』を経験したら、もう二度とエックスサーバーには戻れないですよ。

WEB上でFTPレベル以上のファイル操作ができるので、言葉にできないくらい便利です。



誰かにこっそり教えたい 👂
  • URLをコピーしました!
  • URLをコピーしました!

管理人にメッセージを送る

コメントする

目次 🏃