WordPressテーマSWELL導入方法を見てみる

LiteSpeed Cacheの不具合のない設定方法【表示速度100点】

LiteSpeedCacheの不具合のない設定方法【表示速度100点】
フェニック

LiteSpeed Cacheでページ速度を爆上げしたいけど設定方法がわからないぞ

今回はこのようなお悩みにお答えします。

当ブログ(ブログフェニックス)はPageSpeed Insightsでパフォーマンススコア100点をたたき出しています。

ブログフェニックスのパソコンのパフォーマンススコア
パソコンのスコア
ブログフェニックスのモバイルのパフォーマンススコア
モバイルのスコア

LiteSpeed Cacheのおかげだといっても過言ではありません。

ただし設定方法が難しく、不具合も起きやすいプラグインです

そこで今回はWordPressテーマCocoonを例に、LiteSpeed Cacheの設定方法を解説します。

SWELLはキャッシュ設定以外は同じ設定でOKです。(詳しくは本編で解説)

分かりやすく解説するのでぜひ参考にしてください。

追記です。

WordPressを立ち上げたばかりの人にはWordPressの初期設定の記事もおすすめです。

この記事の著者

Shota @Shota_Lab_1

歴3年の副業ブロガー。月間32,000PVのブログフェニックスを運営。
X(Twitter)のフォロワーは4,500人以上

サクッと設定方法が知りたい方はインストール前の準備をクリックしてください。

目次

LiteSpeed Cacheとは【WordPressプラグイン】

LiteSpeed Cacheの画像

LiteSpeed Cacheは、ブログのページ表示速度を向上させるWordPressプラグインです。

LiteSpeed Cacheは以下の5つの機能により、ページ表示速度を向上させます。

  1. LiteSpeedサーバーのキャッシュを最適化させる
  2. QUIC.cloudとブログを連携させて画像、HTML、CSS、Javascriptを圧縮する
  3. QUIC.cloudとブログを連携させて画像をWebP化する
  4. ブログとCDNを連携させる
  5. リビジョンなど無駄なデータを一括で削除する

LiteSpeed Cacheは「LiteSpeedサーバー」専用のWordPressプラグインです。

Shota

詳しくは本編にて解説します。

LiteSpeed Cacheに対応するLiteSpeedサーバーとは

LiteSpeedサーバーとは、皆さんが使用しているレンタルサーバーの1種です。

「Apache」「Nginx」「Microsoft」に次ぐ第四のWebサーバーと呼ばれ、以下の特徴があります。

  • Apache使用時と比較し、WordPressの表示速度が84倍になる
  • Apacheの3倍以上の応答速度がある
  • Apacheとの互換性が高い

LiteSpeedサーバーは、最新で高速なレンタルサーバーと覚えておきましょう。

LiteSpeedサーバーを採用しているレンタルサーバー会社と料金プラン

LiteSpeedサーバーを扱っているレンタルサーバー会社と料金プランは以下になります。

サーバー会社とプラン名初期費用初年度月額費用
ロリポップベーシックプラン0円825円
カラフルボックス【Colorful Box】Box20円874円
ミックスホスト 【mixhost】スタンダードプラン0円1,210円
ラッコサーバーRK10円440円
コアサーバー のV2プラン CORE-X1,650円
⇒ドメイン同時取得で0円
528円
ABLENETレンタルサーバー ライトプラン0円830円
※月額料金は1年契約の場合

ページ表示速度を向上させたい人は上記のレンタルサーバーを使用し、LiteSpeed Cacheプラグインを導入することをおすすめします。

なおロリポップ、mixhost、ラッコサーバー、コアサーバー、ABLENETの申し込み方法は、以下の記事で解説しています。

LiteSpeed Cacheのインストール前の準備

LiteSpeedCacheは、以下のプラグインとは機能が被るためインストール前に無効化しておきましょう。

キャッシュ系プラグイン
  • WP Rocket
  • WP Super Cache
  • WP Fastest Cache
  • W3 Total Cache
  • Flying Scripts by WP Speed Matters
画像圧縮プラグイン
  • TinyPNG – JPEG, PNG & WebP image compression
  • EWWW Image Optimizer
  • PNG & WebP image compression
  • WebP Express
CSS・JavaScript・HTMLの圧縮プラグイン
  • Autoptimize
データベース最適化プラグイン
  • WP Revisions Control
  • WP-Optimize
フェニック

LiteSpeed Cacheはこれらのプラグインの機能を網羅しているんだね!

Shota

LiteSpeed Cacheは本当に優秀なプラグインです

事前にPageSpeed Insightsでページ表示速度を測定する

モバイルのページ表示速度を事前に測定した画像
モバイルのページ表示速度
パソコンのページ表示速度を事前に測定した画像
パソコンのページ表示速度

PageSpeed Insightsで、事前にページ表示速度を確認しておきましょう。

確認すべき指標は以下のものです。

事前にPageSpeed Insightsで事前に確認する項目の説明画像
測定項目項目の説明
パフォーマンススコアメトリックスコアの加重平均
Largest Contentful Paint (LCP)メインコンテンツの表示にかかる時間
First Input Delay (FID)ページ操作に応答するまでの時間
Cumulative Layout Shift(CLS)読み込み完了までのレイアウト移動量

メタリックスコアとは以下の項目の点数だと覚えておきましょう。

  • ページが表示された直後のデザイン精度
  • ページ表示速度
  • ページが全て表示された時のデザインの精度
  • ページレイアウトの時間ごとのずれの度合い

メトリックスコアの決定方法#

Lighthouseは、パフォーマンスメトリック(ほとんどの場合ミリ秒単位で報告)の収集が完了すると、メトリック値がLighthouseスコア分布のどこにあるかを調べることにより、各生のメトリック値を0から100までのメトリックスコアに変換します。スコアリング分布は、 HTTPアーカイブ上の実際のWebサイトパフォーマンスデータのパフォーマンスメトリックから導出された対数正規分布です。

引用:PageSpeed Insights

特にモバイルのパフォーマンススコアは低い傾向にあるので、必ずチェックしておきましょう。

LiteSpeed Cacheのインストール方法

LiteSpeed Cacheのインストール方法の解説画像

WordPressのダッシュボードから【プラグイン】をクリックします。

検索窓に「LiteSpeed Cache」と入力し、インストール&有効化すれば完了です。

LiteSpeed Cacheの不具合のない設定方法【Cocoon】

モバイルのページ表示速度を事前に測定した画像
モバイルのページ表示速度
パソコンのページ表示速度を事前に測定した画像
パソコンのページ表示速度

LiteSpeed Cacheの設定方法を、私が運営している別サイトを例に解説します。

WordPressテーマはCocoonです。

サイトの環境環境の詳細
初期のパフォーマンススコアパソコン93点
モバイル61点
WordPressテーマCocoon
レンタルサーバーロリポップハイスピードプラン
使用していた高速化プラグインAsync JavaScript
TinyPNG – JPEG, PNG & WebP image compression
WebP Express
WP Fastest Cache

なおCocoonのインストール方法は、以下の記事で解説しています。

LiteSpeed Cacheの一般設定

LiteSpeed Cacheの一般設定では、プラグイン全体に関わる設定を行います。

ダッシュボードから【LiteSpeed Cache】⇒【一般】をクリック

ダッシュボードから【LiteSpeed Cache】⇒【一般】をクリックすると管理画面が表示されます。

一般設定

LiteSpeed Cacheの一般設定の解説画像①
一般設定の項目項目の設定方法と解説
自動アップグレードオフ
⇒WordPressのプラグインの自動更新機能を使用すればOK
ドメインキードメインキーの要求をクリックする
⇒QUIC.cloudとブログを連携させる

まずは【ドメインキーの要求】をクリックしましょう。

ドメインキーを入手することでQUIC.cloudとブログを連携させることができます。

QUIC.cloudは以下のサービスを無料で提供してくれます。

  • 画像の圧縮、画像のWebP化
  • HTMLの圧縮
  • CSSの圧縮、
  • ブログとCDNとの連携

特に画像圧縮・WebP化とCSSの圧縮は、ページ表示速度の向上に大きく貢献します。

必ずドメインキーを入手しましょう。

【ドメインキーの要求】をクリックすると、ドメインキーが入手されるまでの時間が表示される

【ドメインキーの要求】をクリックすると、ドメインキーが入手されるまでの時間が表示されます。

時間が経ったらプラウザの更新ボタンをクリックする

時間が経ったらプラウザの更新ボタンをクリックしましょう。

ドメインキーが自動入力された画像

ドメインキーが自動入力されます。

これでQUIC.cloudとブログを連携は完了です。

【QUIC.cloudへのリンク】をクリックしていない画像
一般設定の項目項目の設定方法と解説
QUIC.cloudへのリンククリックしない

【QUIC.cloudへのリンク】をクリックすると、ブログと「QUIC.cloud が保有するCDN」を連携することができます。

CDN (コンテンツデリバリーネットワーク)とは、ブログコンテンツを高速で配信するネットワークシステムです。

ブログとCDNを連携することができればページ表示速度は向上します。

ただし、QUIC.cloudの無料サービスでは利用制限が多すぎるため連携させなくてOKです。

LiteSpeed Cacheの一般設定の解説画像②
一般設定の項目項目の設定方法と解説
ゲストモードオン
⇒キャッシュしたページを表示させる
ゲストの最適化オン
⇒PageSpeed InsightsやGoogleクローラーに最適なページを表示させる
サーバーIP空欄のまま
⇒CDNを利用しないため空欄でOK
通知オン
⇒プラグインに関する最新ニュースがWordPressに表示される
ゲストモードの解説
キャッシュの説明画像

キャッシュとは読み込んだ情報を一時的に保存する機能です。

キャッシュにより、読者が2回目以降ブログを閲覧する際に素早くページが表示されます。

キャッシュには以下のものがあります。

  • ブラウザキャッシュ:ブラウザで一度取得したデータを保存したもの
  • サーバーキャッシュ:過去に作成したファイルをサーバーに保存したもの

【ゲストモード】をONにすることで、「プラウザ」と「レンタルサーバー」は読者が本来のページを見る前に、キャッシュしたページを表示させます。

つまりページの表示速度が大幅に向上します。

必ず【ゲストモード】はONにしましょう。

ちなみに「キャッシュしたページ」は見えない速さで本来のページに切り替わるため安心してください。

ゲストの最適化の解説

【ゲストの最適化】をONにすると「PageSpeed Insights」や「Googleクローラー」がブログページの表示を要求した際に、キャッシュしたページを表示します。

つまりページ表示速度の向上をGoogleに知らせることができます。

【ゲストの最適化】も必ずONにしておきましょう。

【一般設定】が完了したら【変更を保存】をクリックしてください。

チューニングの設定

LiteSpeed Cacheの一般設定のチューニングの設定方法
チューニング設定の項目項目の設定方法と解説
ゲストモードのユーザーエージェントデフォルトのままでOK
⇒LiteSpeed Cacheが既知のクローラーを入力してくれている
ゲストモード IPデフォルトのままでOK
⇒LiteSpeed Cacheが既知のクローラーのIPアドレスを入力してくれている

【チューニング】では「キャッシュしたページ」を誰に表示させるのか設定します。

既にLiteSpeed CacheがGoogleなど表示相手情報を入力しているので、デフォルトのままでOKです。

LiteSpeed Cacheのキャッシュ設定

LiteSpeed Cacheのキャッシュ設定では、キャッシュするページやデバイスを選択します。

ダッシュボードから【LiteSpeed Cache】⇒【キャッシュ】をクリック

ダッシュボードから【LiteSpeed Cache】⇒【キャッシュ】をクリックすると管理画面が表示されます。

キャッシュ制御の設定

LiteSpeed Cacheのキャッシュ制御設定の解説画像①
キャッシュ制御の設定項目項目の設定方法と解説
キャッシュを有効にする(重要)Cocoonはオン
⇒オンにしないと全てのキャッシュ設定が無効になる
SWELLはオフ
⇒SWELLのキャッシュと機能が被り不具合が発生
ログインしたユーザーをキャッシュオフ
⇒自分に対してキャッシュする必要がないためオフ
コメントをキャッシュオン
⇒オフにすると自分がコメントを承認するまで、読者が送信したコメントを確認できない
REST IPをキャッシュオン
⇒ブログを更新すると自動的に記事をキャッシュできる
ログインページをキャッシュオフ
⇒ログインページも自分しか利用しないためオフ

Cocoonの方は【キャッシュを有効にする】は必ずオンになっていることを確認してください。

オンになっていないと、LiteSpeed Cacheのキャッシュ機能が全て無効になります。

一方、SWELLの方は【キャッシュを有効にする】は必ずオフになっていることを確認してください。

オフになっていないとSWELLのキャッシュと機能が被り、ブログを開いたら「404エラー」が表示されます。

Shota

当サイト(SWELL)はキャッシュをオンにすると404エラーが表示されました

  • Cocoonの方は、このままキャッシュ設定を継続してください
  • SWELLの方は、次のCDN設定までジャンプしてください
LiteSpeed Cacheのキャッシュ制御設定の解説画像②
キャッシュ制御の設定項目項目の設定方法と解説
favicon.ico をキャッシュオン
⇒ブログのファビコンをキャッシュできる
PHPリソースをキャッシュオン
⇒WordPressテーマが用意したCSSとJavaScriptをキャッシュできる
モバイルをキャッシュオン
⇒モバイルとパソコンで異なるレイアウトデザインを表示

【モバイルをキャッシュ】は、テーマがレスポンシブルデザインの場合はオフでもOKです。

オフにする場合は、必ずモバイルとパソコンでデザインを確認しましょう。

【すべてをパージ】をクリック
【Cocoon設定】⇒【キャッシュ削除】⇒【全てのキャッシュを削除】をクリック

  1. キャッシュ制御設定の【変更を保存】をクリック
  2. 【すべてをパージ】をクリック
  3. 【Cocoon設定】⇒【キャッシュ削除】⇒【全てのキャッシュを削除】をクリック
  4. パソコンとモバイルでブログのデザインを確認する(Microsoft Edge、Google Chrome)
Shota

パージとはキャッシュをクリアにすることです。詳しくは後述します。

Microsoft Edgeで確認した画像
Google Chromeで確認した画像

パソコンでブログを確認し、モバイル表示になっていなければOKです。

LiteSpeed Cacheのキャッシュ制御設定の解説画像③
LiteSpeed Cacheのキャッシュ制御設定の解説画像④

以降は全てデフォルトでOKです。

以降の項目をざっくり説明すると、読者のカード情報など「機密情報に関するキャッシュ」の設定です。

全ての設定が終わったら【変更を保存】をクリックしてください。

TTL設定

LiteSpeed Cacheのキャッシュ設定のTTL設定の解説画像

TTL設定では、キャッシュの保存期間を設定します。

この項目はデフォルトのままでOKです。

パージ設定

パージとはキャッシュをクリアにすることです。

キャッシュはページ表示速度の向上に貢献しますが、たまりすぎると表示速度が遅くなります。

たまりすぎたキャッシュが、プラウザやサーバーの容量を圧迫するためです。

ページの表示速度を上げるためにも、定期的にキャッシュをクリアすることが重要です。

LiteSpeed Cacheのパージ設定の解説画像①
パージ設定の項目項目の設定方法と解説
アップグレード時にすべてをパージするオン
⇒WordPress、テーマ、プラグインが更新されると自動的にキャッシュをクリアにする
公開 / 更新の自動パージルール全ての項目にチェックを入れる
⇒WordPress、テーマ、プラグインの更新時に全ての項目のキャッシュをクリアにする
古いものを出すオン
⇒キャッシュが作成できていない時に、過去のページを表示する
LiteSpeed Cacheのパージ設定の解説画像②
LiteSpeed Cacheのパージ設定の解説画像③

以降はデフォルトのままでOKです。

設定が完了したら【変更を保存】をクリックしてください。

設定を除外する

LiteSpeed Cacheの「設定を除外する」の解説画像

【設定を除外する】は空欄のままでOKです。

この項目ではキャッシュしないページを指定できます。

ブログ運営において「キャッシュしないページ」はないので空欄にしましょう。

ESI設定

LiteSpeed CacheのESI設定の解説画像
ESI設定の項目項目の設定方法と解説
ESIを有効にするオフ
⇒ログインページをキャッシュするメリットがない

ESI設定ではログインページに関するキャッシュを設定します。

自分にキャッシュしても仕方ないのでオフのままでOKです。

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

LiteSpeed Cacheのオブジェクトキャッシュ設定の解説画像
オブジェクトキャッシュ設定項目項目の設定方法と解説
オブジェクトキャッシュオン
⇒レンタルサーバーのデータベースをキャッシュする
方法Memcached

オブジェクトキャッシュ設定をオンにすると、レンタルサーバーのデータベースをキャッシュできます。

ただしレンタルサーバー側で対応していない場合が多いので、気休め程度にオンにしてください。

ブラウザのキャッシュ設定  

LiteSpeed Cacheのプラウザのキャッシュ設定の解説画像
プラウザキャッシュ設定の項目項目の設定方法と解説
プラウザのキャッシュ オン
⇒読者にプラウザのキャッシュを表示させる

【プラウザのキャッシュ】をオンにすると、ブログ読者が2回目に訪問してくれた際にプラウザからキャッシュを表示させます。

レンタルサーバーからのキャッシュ表示よりも、スピードが上がるため必ずオンに設定しましょう。

設定が完了したら【変更を保存】をクリックしてください。

【プラウザのキャッシュ】をオンにすると、プラウザの更新ボタンをクリックしても変更は反映されない

なお【プラウザのキャッシュ】をオンにすると、プラウザの更新ボタンをクリックしても変更を確認できません。

ブラウザをスーパーリロードすれば、変更を確認できます。

対象デバイス、対象OSスーパーリロードの方法
Windows Internet Explorer(IE)Ctrl + F5
Google ChromeCtrl + F5
Microsoft EdgeCtrl + F5
SafariCtrl + R
Apple MacCommand + R(Google Chrome、Safari)

高度な設定

LiteSpeed Cacheの高度な設定の解説画像

高度な設定は使用しないので、全てオフのままにしましょう。

これでLiteSpeed Cacheのキャッシュ設定は完了です。

LiteSpeed CacheのCDN設定

ダッシュボードの【LiteSpeed Cache】⇒【CDN】をクリック

今回は「ブログとQUIC.cloud が保有するCDN」を連携させないので、CDNを設定しなくてOKです。

LiteSpeed Cacheの画像の最適化設定

ダッシュボードの【LiteSpeed Cache】⇒【画像の最適化】をクリック
LiteSpeed Cacheの画像最適化設定の解説画像①

この項目ではQUIC.cloudのサーバーを利用して、画像を圧縮&WebP化するための設定を行います。

対象となる画像はブログ内の全ての画像です。

  • インストールしているブログ内の画像
  • ブログに既に掲載している画像
  • 今後、ブログにアップロードする画像

画像を圧縮&WebP化することで、ページ表示速度は劇的にアップします。

画像最適化設定

LiteSpeed Cacheの画像最適化設定の解説画像②
画像最適化設定の項目項目の設定方法と解説
自動要求 Cronオン
⇒アップロードした画像を自動的に圧縮&WebP化する
自動戻し Cronオン
⇒QUIC.cloud のサーバーから圧縮&WebP化された画像を自動取得する
オリジナル画像の最適化オン
⇒ブログ内の画像を圧縮する
オリジナルバックアップを削除するオフ
⇒圧縮される前の画像を削除しない
可逆最適化オフ
⇒非可逆圧縮画像の方が容量が小さいのでオフ
EXIF / XMPデータを保存するオフ
⇒画像情報を削除することで画像容量が更に計量化
WebPバージョンの作成オン
⇒ブログ内の画像をWebP化する
WebP 画像への置換オン
⇒既にブログに掲載している画像をWebP化する

WebP 画像はGoogleが開発した画像フォーマットで、画像容量が軽いことが特徴です。

ブログ内のJPEG画像やPNG画像を、WebP 画像に変換することでページ表示速度が向上します。

LiteSpeed Cacheの画像最適化設定の解説画像③
画像最適化設定の項目項目の設定方法と解説
WebP 属性を置換するデフォルトのままでOK
⇒WebP化する画像の種類を、LiteSpeed Cacheが既に指定してくれている
WebPの特別なsrcsetオフ
⇒オンにすると画像のWebP化が制御される
WordPress 画像品質管理82のままでOK
⇒値が小さくなるほど画像は計量化されるが、画質が粗くなる

LiteSpeed Cacheの画像の最適化設定が終わったら【変更を保存】をクリックしてください。

画像最適化の概要

LiteSpeed Cacheの画像最適化の概要の解説画像③

この項目では【画像最適化設定】で設定した画像圧縮の進捗を確認できます。

基本的にデフォルトのままでOKです。

【画像最適化設定】で「自動要求 Cron」をオフにした人は【最適化要求を送信】をクリックして、手動で画像を最適化してください。

Shota

ブログ内の全ての画像の最適化には時間がかかります。他の作業をして待ちましょう

LiteSpeed Cacheのページの最適化設定

ダッシュボードの【LiteSpeed Cache】⇒【ページの最適化】をクリック

この項目ではQUIC.cloudのサーバーを利用して「HTMLとCSS、JavaScript」を圧縮するための設定を行います。

ページレイアウトが崩れることがあります。

パソコンとモバイルのデザインを確認しながら丁寧に設定しましょう。

CSS設定

LiteSpeed CacheのCSS設定の解説画像①
LiteSpeed CacheのCSS設定の解説画像②
CSS設定の項目項目の設定方法と解説
CSS圧縮化オフ
⇒ページレイアウトの崩れが激しいためオフ
CSS結合オフ
⇒ページレイアウトの崩れが激しいためオフ
UCSSを生成するオフ
⇒ページレイアウトの崩れが激しいためオフ
UCSSインラインオフ
⇒ページレイアウトの崩れが激しいためオフ
CSSの外部とインラインを組み合わせるオフ
⇒ページレイアウトの崩れが激しいためオフ
CSSを非同期読み込みオフ
⇒ページレイアウトの崩れが激しいためオフ
URLごとのCCSSオフ
⇒ページレイアウトの崩れが激しいためオフ
インラインCSS非同期ライブラリオフ
⇒ページレイアウトの崩れが激しいためオフ
フォント表示の最適化Swap
⇒本来の文字を表示する前に、Swap形式の文字を表示させる

Cocoonでは「CSS圧縮化」や「CSS結合」をオンにすると、モバイルでページレイアウトの崩れが発生しました。

ページを表示させると、アイコンやヘッダーが表示されない不具合です。

このため全てオフにしています。

設定が完了したら【変更を保存】をクリックします。

JS設定

LiteSpeed CacheのJS設定の解説画像
JS設定の項目項目の設定方法と解説
JS圧縮オン
⇒余分な空白、改行をJavaScriptから削除する
JS結合オフ
⇒ページレイアウトの崩れが激しいためオフ
JSは外部とインラインを組み合わせるオフ
⇒ページレイアウトの崩れが激しいためオフ
JSを遅延読み込みオフ
⇒ページレイアウトの崩れが激しいためオフ

Cocoonでは「JS結合」をオンにすると、モバイルでページレイアウトの崩れが発生しました。

CSSと同様にページを表示させると、アイコンやヘッダーが表示されない不具合です。

このためJS圧縮化以外はオフにしています。

またJavaScriptの遅延読み込み機能は、Cocoonに標準装備されているので設定は不要です。

HTMLの設定

LiteSpeed CacheのHTML設定の解説画像①
HTML設定の項目項目の設定方法と解説
HTML圧縮化オン
⇒余分な空白、改行をHTMLから削除する
DNSプリフェッチ空欄のまま
⇒Cocoonに標準装備されているため
DNSプリフェッチ制御オフ
⇒Cocoonに標準装備されているためオフ
HTML Lazy Loadセレクタオフ
⇒Cocoonに標準装備されているためオフ
クエリ文字列を削除オフ
⇒解析ツールに異常が出たら困るためオフ

クエリ文字列とは、サーバーに情報を送るためURLの末尾につけ足す文字列のことです。

クエリ文字列の具体例

https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=?????

Googleアナリティクスなどのアクセス解析にも使用します。

Googleアナリティクスのデータに異常が出たら困るため、無難にオフにしましょう。

LiteSpeed CacheのHTML設定の解説画像②
HTML設定の項目項目の設定方法と解説
Googleフォントを非同期に読み込むオフ
⇒Google フォントを使用している場合はオンも可能
Googleフォントを削除オン
⇒Googleフォントを使用していないので削除
WordPress 絵文字を削除オン
⇒絵文字を使用しないので削除
Noscript タグの削除オフ
⇒JavaScriptをサポートしていない古いブラウザで異常が出たら困るためオフ

設定が完了したら【変更を保存】をクリックしましょう。

メディア設定

LiteSpeed Cacheのメディア設定の解説画像
メディア設定の項目項目の設定方法と解説
画像遅延読み込みオフ

画像の遅延読み込み機能はCocoonに標準装備されています。

機能がかぶらないようにオフにしましょう。

以降の項目は画像の遅延読み込みに関する設定なので、デフォルトのままでOKです。

除外するメディア

LiteSpeed Cacheの除外するメディアの解説画像

この項目では画像の遅延読み込みの除外ページを指定します。

LiteSpeed Cacheの画像の遅延読み込み機能は活用しないので、デフォルトのままでOKです。

ローカリゼーション設定

LiteSpeed Cache ページの最適化-ローカリゼーション設定の管理画面の画像
ローカリゼーション設定の項目項目の設定方法と解説
Gravatorキャッシュオン
⇒コメント欄のキャッシュを保存し高速化
GravatorキャッシュCronオン
⇒コメント欄のキャッシュを自動化
GravatorキャッシュTTL デフォルトのまま
⇒コメント欄のキャッシュを保管する期間の指定
リソースのローカライズオン
⇒読者は自分の国のJavaScriptで表示されたページを閲覧できる(外国人向け)
ローカライズファイルデフォルトのままでOK
⇒LiteSpeed Cacheが自動指定してくれている

設定が完了したら【変更を保存】をクリックしてください。

GravatarとはWordPressのコメント欄に表示させるアバター画像を作成するサービスです。

Gravatorのキャッシュをオンにすることで、コメント欄のページ表示速度を向上させます。

コメント欄を設置している方はオンにしましょう。

チューニング

LiteSpeed Cacheのチューニングの解説画像

この項目ではページの最適化の除外ページを指定できます。

除外する理由はないのでデフォルトのままでOKです。

LiteSpeed Cacheのデータベース設定

この項目では、リビジョンやスパムコメントなどブログのゴミとなるデータの削除方法を設定します。

リビジョンの解説画像

リビジョンとは、更新した投稿内容を保存するバックアップ機能です。

リビジョンは記事を更新する度に増えるため、データベースのサイズも増えていきます。

データベースのサイズが増えるとページの表示速度が低下するため、リビジョンは定期的に削除する必要があります。

ダッシュボードから【LiteSpeed Cache】⇒【データベース】をクリック

ダッシュボードから【LiteSpeed Cache】⇒【データベース】をクリックすると管理画面が表示されます。

管理

LiteSpeed Cacheの管理の解説画像①

まず下書き保存している記事を消去していいか確認しましょう。

問題なければ【すべてを消去】をクリックしてください。

LiteSpeed Cacheの管理の解説画像②

リビジョンやスパムコメントなどのゴミを削除することができます。

下書き保存している記事を残したい場合は、個別に設定項目をクリックしてください。

【すべてのトランジェント】は全て消去できないですが気にしなくてOKです。

他のWordPressプラグインが敢えて残しているデータだからです。

ちなみにスパムコメントはプラグインで対策しましょう。

プラグイン無料使用相性が悪いテーマスパムコメントの除去方法
Throws SPAM Away可能なし自動
Akismet Anti-Spam不可能なし手動
Invisible reCaptcha for WordPress可能あり(Swell)自動

スパムコメント対策プラグインではThrows SPAM Awayがおすすめです。

使い方はThrows SPAM Awayの設定方法【Akismetの代替プラグイン】で解説しています。

DB最適化設定

LiteSpeed CacheのDB最適化設定の解説画像
DB最適化設定の項目項目の設定方法と解説
リビジョンの最大数0
⇒リビジョンを残したいなら10以内
リビジョンの最大エイジ0
⇒リビジョンを保管する日数。残す場合は10日以内

設定を変更する場合は【変更を保存】をクリックしましょう。

LiteSpeed Cacheのクローラー設定

この項目ではクローラーがキャッシュを更新する期間を設定します。

クローラーはブログ内を移動し、古くなったキャッシュを更新してくれます。

Googleクローラーとは別物なので安心してください。

ダッシュボードから【LiteSpeed Cache】⇒【クローラー】をクリック

ダッシュボードから【LiteSpeed Cache】⇒【クローラー】をクリックすると管理画面が表示されます。

クローラーの一般設定

LiteSpeed Cacheのクローラー設定の解説画像
クローラー一般設定の項目項目の設定方法と解説
クローラーオン
⇒クローラーにブログ内を巡回させる

以降の項目はLiteSpeed Cacheが設定してくれているので、デフォルトのままでOKです。

設定が完了したら【変更を保存】をクリックしてください。

LiteSpeed Cacheのツールボックス設定

この項目ではパージする項目を設定します。

ただし設定する意味はないため手動でパージしたい時に【すべてをパージする】をクリックしましょう。

パージのおさらい

パージとはキャッシュをクリアにすることです。

キャッシュはページ表示速度の向上に貢献しますが、たまりすぎると速度が遅くなってしまいます。

たまりすぎたキャッシュがプラウザやサーバーの容量を圧迫するためです。

ページの表示速度を上げるためには、定期的にキャッシュをクリアすることが重要です。

ブログのカスタマイズが反映されない時などは【LiteSpeed Cacheツールボックス】から手動でパージしましょう。

カスタマイズ前のキャッシュをクリアにするためです。

LiteSpeed Cacheの設定後はページ速度を確認する

中休み

LiteSpeed Cacheの設定が完了したらPageSpeed Insightsで、ページ表示速度を確認しましょう。

PageSpeed Insightsで確認する項目の説明画像
測定項目項目の説明
パフォーマンススコアメトリックスコアの加重平均
Largest Contentful Paint (LCP)最初のコンテンツ表示にかかるまでの時間
First Input Delay (FID)Webページの応答性
First Contentful Paint(FCP)最初のコンテンツ表示にかかるまでの時間

今回のLiteSpeed Cacheの設定で、スムージーピュアライフ(Cocoon)のパフォーマンススコアは以下のように向上しました。

モバイルのパフォーマンススコア
モバイルのパフォーマンススコア
パソコンのパフォーマンススコア
パソコンのパフォーマンススコア
デバイスLiteSpeed Cache導入前の
パフォーマンススコア
LiteSpeed Cache導入後の
パフォーマンススコア
モバイル61点100点
パソコン93点100点

LiteSpeed Cacheの不具合のない設定方法の解説は以上です。

締めに入る前にお知らせです。

SWELLユーザーの方にはSWELLプラグインの記事もおすすめです。

LiteSpeed Cacheの設定が終わったら

ブログ収益化ツールを導入しましょう。

ブログツールを導入すると、より確実に稼げます。

以下の記事では、開設14ヶ月で「月間28,000PV、月間収益5万円」を実現させた神ツールを紹介しています。

ぜひチェックしてみてください。

>>ブログアフィリエイト収益化を加速させるおすすめツール20選

LiteSpeed Cacheの設定方法のまとめ

今回はLiteSpeed Cacheの不具合の設定方法について解説しました。

特に重要な点をまとめます。

LiteSpeed Cacheの設定方法
  • ドメインキーの要求してQUIC.cloudとブログを連携させる
  • キャッシュを有効にする
  • アップグレード時にすべてをパージできるように設定する
  • 画像を最適化させる
  • HTML、CSS、JavaScriptの圧縮をする際は、レイアウトが崩れてないか確認する
  • LiteSpeed Cache以外の「ページ表示速度高速化プラグイン」は削除する

今回の内容は以上です。

参考サイト

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (8件)

  • 本当にわかりやすくためになりました。
    感謝の一言です。

    私自身、事業でワードプレスを使用したWEBサイトを公開しておりますが、pagespeed insights(ページスピードインサイト)でスマホとパソコンいずれも速度が遅く解決方法を探していました。

    WEBに関しては全くの素人で、1から10まで書かれた通りに対応すれば改善できるようなページを探しており、やっとのことで、このページ(記事)に出会うことができました。

    記事に書かれている通りに実行したところ、pagespeed insights(ページスピードインサイト)でスマホでは、赤表示(悪い)ものがオレンジ(改善必要)となり、パソコンでは、オレンジが緑(良好)となりました。

    ちなみに、ロリポップのレンタルサーバーのプランをライトプランからハイスピードプランに変更し、LiteSpeed Cacheプラグインをインストール・有効化しましたが、その後をどうすればわからなかった状況でした。

    しかしながら、この記事にはその解決方法が1から10まで素人でもわかるようになっており、本当に感謝しています。

    私自身、人生で初めて記事に対してコメントしました。

    そのくらいありがたく感じ、同じ悩みを抱えている人に届けばといった想いもありますし、本記事を作成・公開してくれたShotaさんに対するリスペクトにもつながると思います。

    改めて、本当にありがとうございました。

    ちなみに、画像最適化が完了するまで半日もかかりました。
    (素人からしますと、フリーズして動かなくなったのか心配になりました)

    • 佐藤様

      最大限の賛辞ありがとうございます。
      お役に立てて大変うれしく思います。

      LiteSpeed Cacheはこれからはやりそうですね!

      • WEBの表示が遅くて困っている人にとってみますと、とても効果が期待できるものなのではないか?と思っています。

        実際、私は素人ですが、目で見てわかるほど効果が実感できます。

        そのため、スマホやパソコンで表示速度が遅くて困っている人は、この記事で紹介されている対策をやってみるべきなのではないかと思います。

        改めて、ありがとうございました。

        • そこまで言っていただき感激です。
          LiteSpeed Cacheを多くの人に知ってもらえるよう努力します。
          コメントありがとうございました。

  • わかりやすい記事で大変参考になります。
    質問なのですが、AFFINGERの場合はSWELL同様の設定の仕方で進めばいいんでしょうか?

    • みんぽさん
      コメントありがとうございます。
      SWELLの設定で問題ないと思います。
      宜しくお願い致します。

  • 携帯のサイト速度が悪くて本当に悩んでおりました。
    cocoonを使用していましたが、サーバーがLiteSpeedを採用しているのもも関わらず、
    ずっとWP Fastest Cacheを選択してしまっていました。
    よく確認したら、LiteSpeed Cacheを使わないことが分かり、
    設定方法を確認したら、こちらに辿り着きました。
    初心者の私でも本当に簡単に設定できて、無事に終わることができました。
    サイト速度も45から89まで上がりました。
    本当に助かりました。
    お礼を言いたくて、コメントさせて頂きます。
    本当にありがとうございました💗

    • ayaさん
      コメントありがとうございます。
      お役にたてて光栄です。
      サイトスピード向上おめでとうございます。

コメントする

コメントに日本語が含まれない場合は表示できません(スパム対策)

目次