このサイトでは、ページの読み込みを高速化する為に LiteSpeed Cache プラグインを使用しています。その全ての設定について公開します。

はじめに

このサイトは、ABLENET レンタルサーバーの LiteSpeed サーバーで動作しています。WordPress に LiteSpeed Cache プラグインをインストールし、ページの読み込みに関して、表示が乱れない範囲の最大限の最適化を行っています。

Sponsored Link

サイトの構成も安定し、これ以降は大幅な変更はしないと思いますので、これまで行ってきた LiteSpeed Cache プラグインの最適化の全ての設定を公開します。

LiteSpeed Cache プラグインの設定を行う際の参考になればと思います。

LiteSpeed Cache プラグインの全設定

LiteSpeed Cache プラグインの設定画面を、Chrome デベロッパーツールで全画面のキャプチャを記録しました。

LiteSpeed Cache プラグインは Ver.6.5.4、2025年3月22日時点の設定です。

画像ファイルへリンクしていますので、クリックで拡大表示します。

[0] ダッシュボード

ダッシュボードには設定項目はありません。

画像やページの最適化の使用量の残量の確認や、ユニーク CSS (UCSS) やビューポートイメージ (VPI) のキューがどの位残っているかを確認します。

[1] プリセット

LiteSpeed Cache プラグインは設定項目が多数あります。設定の標準プリセットとして5種類から選ぶ事が出来ます。

私は標準プリセットは使用せず、個々の項目を自身で調整しています。

[2] 一般

一般設定の中で重要な項目は3つです。

• ドメインキー
• ゲストモード
• ゲストの最適化

画像やページの最適化を QUIC.cloud で実施する為には、ドメインキーの取得が必須です。ユーザー登録等は必要なく、ドメインキーを取得するのみでOKです。ドメインキーを取得する事によって、次の3項目が有効となります。

• 画像の WebP 化とサムネイルイメージの自動生成
• CSS の最適化
• ランディングページ内の画像の遅延読み込み防止 (ビューポートイメージ)
• 事前に読み込む低品質の画像プレースホルダーの生成

ゲストモードとゲストの最適化は、ページの読み込み速度を向上させるのに有効ですが、副作用として表示が乱れる事があります。この「表示の乱れ」を如何にして抑えるかが、LiteSpeed Cache プラグインを使いこなす際の肝となります。

[2] チューニングは初期値のまま変更しません。

[3] キャッシュ

キャッシュの項目では「キャッシュを有効にする」をオンにする他、「モバイルをキャッシュ」を有効にしています。

レスポンシブ対応のテーマではモバイル専用のキャッシュは不要との考え方もあります。しかし、このブログではモバイル用にメニューを配置しています。それもあり、モバイル専用のキャッシュを使用しています。

オブジェクトキャッシュ (Memcached か Redis) は使ってみたいのですが、使えるレンタルサーバーは契約した事がありません。

[4] CDN

CDN (Centent Delivery Network) は Cloudflare CDN を使用しています。

LiteSpeed Cache プラグインでは次の二種類の CDN を使用する事が出来ます。

• QUIC.cloud
• Cloudflare

何方も Name Server の設定を変更する必要があります。

以前は QUIC.cloud CDN を使用していました。QUIC.cloud CDN の通信量は欧米で 10 GB/月、日本を含むアジアは 2.5 GB/月 が上限です。アクセス数が多いと一瞬でなくなります。

その点、Cloudflare CDN は通信量の上限がありませんので、現在はこちらを使用しています。一時的な Bypass や Cache の消去は LiteSpeed Cache プラグインから操作できます。

[5] 画像の最適化

[2] のドメインキーを取得していれば、画像の最適化が可能になります。

画像の最適化の設定は以下のように設定しています。

• 要求 Cron、自動戻し Cron を有効
• WebP 画像への置換を有効

WebP 画像への変換は、高速キューの上限が10,000件/月ですので、画像多めのブログでも上限に達する事はないでしょう。私の使い方では1,000件/月でも多い方です。

[6] ページの最適化

ページの最適化の設定が LiteSpeed Cache プラグインの設定の肝です。このパートの設定により、安定して高速な読み込みが実現できます。

• CSS の設定は [1] CSS 設定と [9] チューニング – CSS
• JavaScript (JS) の設定は [2] JS 設定と [8] チューニング
• HTML の設定は [3] HTML の設定
• 画像の設定は [4] メディア設定

それぞれ、上記の場所に設定する項目があります。

CSS の設定は、私は全て ON にして、表示の乱れが生じた項目のみ最適化から除外します。

JavaScript の設定は、最後の「JS を遅延読み込み」の項目のみ、Deferred か 遅延にします。このサイトでは、Top へ戻るボタンが機能しなかったので Deferred にしています。

HTML は圧縮化します。DNS プリフェッチと DNS プリコネクトには、広告用の A8.net を指定しています。

画像は基本的に遅延読み込みさせて、VPI (View Port Image) で最初の画面内に画像がある場合のみ遅延させずに表示します。また、低品質・低画質の仮の画像 LQIP を生成させて、先に読み込ませてから本来の画像を読み込ませる事により、ページの初期の読み込みを改善します。

強制的に遅延させている JavaScript が gtag で一つのみです。

CSS の最適化から除外しているのは、子テーマの style.css と Mobile Menu プラグインの CSS です。

[7] データベース

データベースの最適化では、不要なデータの削除が行えます。

リビジョンは使用していません。

[8] クローラー

クローラーは、キャッシュや UCSS を生成する為にサイトマップの全てのページを読み込むものです。

• ゲストモード
• ゲストの最適化
• モバイルのキャッシュ
• WebP 画像への置換

上記の4つの項目を有効にすると、合計8項目のクローラー Cron が動作します。

通常は10分間隔で各Cronが動作します。私は5分間隔に変更しています。

[9] ツールボックス

CSS や JavaScript の設定を変更した後にはオレンジ色の「すべてをパージする」を押すと、次の2項目が全てのページで消去されます。

• LSCache
• CSS/JS キャッシュ

表示が乱れる UCSS を消去する場合には「すべてをパージする – ユニークな CSS」を押します。

結び

このサイトで使用している LiteSpeed Cache プラグインの全設定について公開しました。

LiteSpeed Cache プラグインは、ページの最適化で如何にして表示の乱れを防止するかが肝になります。

設定は少し手間はかかりますが、それに対するリターンは大きいと個人的には考えています。

Web サーバーに LiteSpeed を使用できるレンタルサーバーでは、使わない手はありません。上手く設定して、ページの読み込み速度を向上させる一助となれば幸いです。