ー記事レベルー
- 初心者
- 重要度
- 難易度
LiteSpeed Technologiesが提供しているプラグインの一つでサイトの読み込み速度を向上させるための強力なツール「LiteSpeed Cache」。
LiteSpeed Cacheは、高速化やSEOの改善に役立つプラグインで、特にLiteSpeedサーバー環境下で最大のパフォーマンスを発揮します。もしWordPressサイトのパフォーマンス向上を考えているなら、LiteSpeed Cacheは最もおすすめのプラグインの一つと言えるでしょう。
今回は、初心者でも簡単にできるLiteSpeed Cache設定方法をWordPressを使って実践的に解説します。
まずは基本的な初期設定から始め、個人サイト向けや複数サイト運営者向けの最適な設定を紹介します。これを実践すれば、あなたのサイトは確実に爆速化すること間違いなしです!
こんにちは!ryoです。
助手だよ!
画像最適化特化型プラグイン「Smush」についての記事もおすすめです。
※LiteSpeed CacheとSmushは同じ機能があるので重複すると逆にサイトが遅くなる可能性あり
LiteSpeed Cacheとは?
LiteSpeed Cacheは、WordPressの表示速度を爆速にするプラグインです。
ページの読み込み速度を向上させることで、SEO効果も期待できます!
- ページキャッシュ画像の最適化
- CSS/JavaScriptの縮小(Minify)
- ブラウザキャッシュの活用
- CDN(Content Delivery Network)サポート
LiteSpeed Cacheのプリセットでの設定
LiteSpeed Cacheの設定方法の前に実はプリセットでの設定(あらかじめ設定された構成)があります。
設定が面倒な方やすぐに効果を試してみたい方はプリセットで設定してみるのもいいでしょう!様々な設定がありますがおすすめは「高度(推奨)」です。
設定が面倒な方でも簡単に設定できるね!
LiteSpeed Cacheの効果を検証してみた
LiteSpeed Cacheが実際にどれほどの効果をもたらすのかを検証してみたところ、サイトのキャッシュを削除したことによってサイトのスピードは格段に早くなりました。
確かにどれほどの変化があるのかは知りたいよね
試しに「全てをパージ(キャッシュ)する」を押して検証しました。
※こちらはプリセット「高度(推奨)」のみの設定です。
上記画像はモバイル(携帯)でサイトを閲覧した時の表示スピードを表しています。
設定も簡単にできてこれだけの効果が出るととても便利だね!
短時間でサイトの読み込み時間を変化させることができるので、正直細かい設定は必要ないのかな?とも思いました。これからも是非使っていきたいプラグインですね!
それでは、次の章からはLiteSpeed Cacheの細かいおすすめの設定方法を解説していきます。
LiteSpeed Cacheのインストール方法
LiteSpeed Cacheのインストールしてまずは使える状態にしましょう。
WordPressダッシュボードに追加されていればOK!
初期設定の流れ:LiteSpeed Cacheの設定を簡単に解説
まずはLiteSpeed Cacheをインストールした後、最初に行うべき基本的な初期設定の流れを押さえておきましょう。
インストールしただけでは効果は半減なので設定を調整しよう!
項目 | 解説 |
キャッシュ設定 | サイト速度改善の基本設定 |
CSS圧縮化 | ページの読み込みを速くする |
JS圧縮化 | 読み込み速度を高速化する |
JS遅延読み込み | 初期表示の速度を向上させる |
オリジナル画像の最適化 | 画像サイズを削減する |
WebP画像変換 | 画像の軽量化を実現する |
ブラウザキャッシュ | ページ再訪問時の速度向上 |
モバイルキャッシュ | モバイルサイトの表示速度を向上させます。 |
LiteSpeed Cache 初期設定の基本
キャッシュを有効にする: 推奨設定 有効
サイトの読み込み速度を大幅に改善するためには、キャッシュ機能をオンにするのが基本です。設定メニューの「キャッシュ」タブで「キャッシュを有効にする」をオンにしましょう。
CSS圧縮化:推奨設定 有効
CSSの圧縮により、不要なスペースやコメントを削除してファイルサイズを小さくできます。これにより、ページが速く読み込まれます。「CSS圧縮化」をオンにしましょう。
JS圧縮化:推奨設定 有効
JavaScriptも圧縮することで、ページ読み込みをスムーズにします。「JS圧縮化」をオンに設定します。
JS を遅延読み込み:推奨設定 遅延
初期設定でページ読み込みを速くしたい場合、「遅延」読み込みが効果的です。
オリジナル画像の最適化: 推奨設定 有効
元画像を圧縮してサイズを小さくし、最適化された画像を生成します。
WebP画像対応: 推奨設定 有効
WebPは軽量な画像形式で、JPEGやPNGに比べてファイルサイズを大幅に削減できます。「WebP画像変換」を有効にして、画像の表示速度を向上させましょう。
ブラウザキャッシュ: 推奨設定 有効
ユーザーが再訪問する際に、ブラウザが以前のキャッシュを利用できるように設定します。「ブラウザキャッシュ」をオンにして、リロード時間を短縮します。
モバイルキャッシュ: 推奨設定 有効
モバイルユーザーに対してキャッシュを適用する設定です。基本的に、モバイルキャッシュを有効にすることで、モバイル端末からのアクセス時のページ読み込み速度が向上します
個人サイト向けのおすすめ設定
個人サイトの場合、サイトの規模が小さく、管理も少人数で行うため、シンプルで効率的な設定が求められます。
項目 | 解説 |
キャッシュの期限設定 | 頻繁に変わらないコンテンツに適用 |
QUIC.cloud CDN | 画像やスタイルシートの読み込み速度向上 |
パフォーマンスと柔軟性のバランスを取ることが重要だよ!
キャッシュと静的ファイルの最適化
個人サイトでは、コンテンツが頻繁に変更されることは少ないため、キャッシュ設定を強化して高速化を図ります。
キャッシュの期限を設定: 推奨設定 86400秒(1日)
例えば、キャッシュの有効期限を1日程度に設定すると、頻繁に変更しないコンテンツを素早く表示できます。これにより、ユーザーが再訪問する際の読み込み速度が向上します。
CDNの活用
QUIC.cloud CDNの使用:推奨設定 有効
個人サイトでも、QUIC.cloudを利用することで、コンテンツの配信が効率化され、より高速にサイトを表示できます。QUIC.cloudを使うことで、特に画像やスタイルシートの読み込み速度が向上します。
QUIC.cloud CDNはLiteSpeed Cache の一般設定からドメインを取得しなければならないので注意が必要です。
「ドメインキーをリクエストする」を押すとすぐにドメインキーが自動で割り当てられ、サービスを利用できるようになります。
複数人運営のサイト向け設定
複数人で運営しているサイトでは、複数の編集者や投稿者が関わっているため、パフォーマンスを保ちながら、効率的な作業環境を提供する設定が求められます。
項目 | 解説 |
キャッシュの設定 | ユーザーごとのキャッシュ |
ロールベースのキャッシュクリア | キャッシュクリアの自動化 |
ユーザーキャッシュの設定 | ログインユーザー専用キャッシュ |
サイトごとに最適化してキャッシュの管理を効率化することが重要だね
キャッシュの設定
ユーザーごとのキャッシュ(ログインしたユーザーをキャッシュ): 推奨設定 有効
複数人が運営する場合、編集者や管理者のキャッシュ設定を個別に管理することが重要です。
これにより、管理者が変更を加えても、他のユーザーのキャッシュに影響を与えません。特に「ログインしたユーザーをキャッシュ」を有効にすると、管理者と一般ユーザーのキャッシュを分けて管理できます。
例えば、複数の管理者がいる場合、管理者Aの変更が管理者Bには反映されないなんてトラブルが発生しがちだよね
- なぜ重要なのか?
・管理者の作業が他のユーザーに影響しなくなる
例えば、管理者が記事を編集した後に、編集前のページが表示されてしまうトラブルを防げます。・ログイン中のユーザーの動作がスムーズになる
それぞれのログインユーザーが独立したキャッシュを使うため、管理者Aの作業が管理者Bの作業に干渉しなくなります。・セキュリティ向上
ログインユーザーに独自のキャッシュが提供されるため、他のユーザーのデータが誤って表示されるリスクが減少します。
ロールベースのキャッシュクリア
キャッシュクリアの自動化: 投稿やページの編集が行われた際に、特定のユーザーが更新したコンテンツに関するキャッシュのみをクリアするよう設定します。これにより、サイト全体のキャッシュを毎回クリアする必要がなくなり、効率的にパフォーマンスを保つことができます。
自動でキャッシュを行う項目は下記画像のように選択できます。
管理者がページを更新したときは全体のキャッシュをクリアするけど、編集者が記事を編集した場合はその記事のキャッシュだけをクリアするというような形だね!
- なぜこれが重要なのか?
・全体のキャッシュクリアを防ぐ
投稿の一部が編集されても、サイト全体のキャッシュがクリアされないため、パフォーマンスが大幅に向上します。・権限ごとの操作をカスタマイズできる
例えば、「編集者は特定の投稿のキャッシュしかクリアできないが、管理者は全体のキャッシュをクリアできる」といった使い分けが可能になります。
ユーザーキャッシュの設定
ログインユーザー専用キャッシュ: 複数人運営のサイトでは、ログインしたユーザー専用にキャッシュを設定することが重要です。これにより、ユーザーが見ている内容に合わせたキャッシュが適用され、パフォーマンスを最適化できます。
以下のオプションをONにする
- 「ログインしたユーザーをキャッシュ」:ログインユーザーごとに専用のキャッシュを作成します。
- 「コメントをキャッシュ」(必要に応じて):コメントを投稿したユーザー専用のキャッシュも作成されます。
これで、編集者・管理者ごとに異なるキャッシュが適用されます。ユーザーごとに異なるダッシュボードやカスタマイズが行われている場合にも対応でき、管理者の変更が一般ユーザーのキャッシュに影響しなくなります。
これにより、パフォーマンスの最適化と安定性の向上が期待できます!
注意点と設定時のトラブルシューティング
LiteSpeed Cacheを設定する際に、いくつか注意すべきポイントがあります。
キャッシュのクリアタイミングや動的コンテンツのキャッシュ除外に注意が必要だよ
キャッシュクリアのタイミング
注意点: コンテンツを頻繁に更新する場合、キャッシュを手動でクリアすることが大切です。特に記事やページを編集した場合、古いキャッシュが表示されるとユーザーに誤った情報が届くことがあります。
1. コンテンツ更新時のキャッシュクリアの漏れ
- 理由: 記事やページの更新後も古いキャッシュが残っていると、ユーザーに古い情報が表示されてしまいます。特に、ニュースやイベント情報などタイムリーな更新が必要なサイトでは致命的です。
- 対策:
- 手動でのキャッシュクリアを徹底(「LiteSpeed Cache」→「キャッシュ」→「キャッシュの管理」から実行)
- 更新時の自動キャッシュクリアの設定(LiteSpeed Cacheでは、投稿の更新時に自動的にキャッシュをクリアする機能があるため、これを有効にする)
2. 定期的なキャッシュクリアの未設定
- 理由: キャッシュは長期間残り続けると、サイトが意図した通りに更新されない問題が発生します。特に動的コンテンツが頻繁に変わるサイトでは、定期的なキャッシュクリアが必須です。
- 対策:
- 定期的なキャッシュクリアを自動化(LiteSpeed Cacheのスケジュール機能を使用し、1日1回、あるいは更新頻度に応じたクリアを設定する)
- 自動クリアの頻度は、「1日1回」や「毎週1回」など運用状況に応じて調整する。
動的コンテンツのキャッシュ
注意点: ユーザーごとに異なる動的なコンテンツ(例えば、ユーザーアカウントページやカートの中身)はキャッシュしないように設定することが重要です。
動的コンテンツがキャッシュされると、ログイン中のユーザーに他のユーザーのデータが表示されることになります。
1. ログインユーザーのキャッシュの誤設定
- 理由: ログインしているユーザーに他のユーザーの情報(アカウント情報や購入履歴など)が表示される可能性があるため、ログインユーザーのページはキャッシュしない必要があります。
- 対策:
- LiteSpeed Cacheの「ログインユーザー専用キャッシュ」を無効化する。
- 「LiteSpeed Cache」→「キャッシュ」→「キャッシュ制御」から、「ログインユーザーのキャッシュを無効化」設定を確認する。
2. 動的コンテンツのキャッシュ制御ミス
- 理由: 動的なページ(カート、検索結果、ユーザー個別のコンテンツなど)が静的なページのようにキャッシュされてしまうと、他のユーザーの情報が誤って表示される可能性があります。
- 対策:
- REST APIのキャッシュを無効化する(動的コンテンツはREST APIで管理されることが多いため)。
- 「LiteSpeed Cache」→「キャッシュ」→「REST APIのキャッシュ設定」を無効にする。
- 個別のページをキャッシュしないようにURLを指定(LiteSpeed Cacheの「キャッシュの除外リスト」を利用)
CSS・JS最適化設定
注意点: CSSやJSの圧縮や結合を行う際、特に一部のテーマやプラグインでエラーが発生することがあります。圧縮・結合設定を有効にすると、予期しないレイアウト崩れや機能不具合が発生する場合があります。
1. レイアウト崩れや機能不具合の発生
- 理由: CSSやJSの圧縮・結合は、サイトの読み込み速度を向上させるための重要な施策ですが、一部のテーマやプラグインが想定外の動作をする可能性があります。これにより、レイアウトの崩れや機能の不具合が発生することがあります。
- 対策:
- 圧縮・結合の設定を無効化する(1つずつ確認する)
- 特定のCSS/JSを除外する(LiteSpeed Cacheでは個別のスクリプトを除外する機能があります)
2. 圧縮の影響での表示遅延やエラー
- 理由: 圧縮の過程で不正なコードや依存関係の欠落が発生することがあります。特に、サードパーティのスクリプトやプラグインが原因となるケースが多いです。
- 対策:
- キャッシュのクリア(ページが最新の状態で表示されているか確認する)
- 問題が発生したJSやCSSの特定(DevToolsの「Console」タブを使用し、エラーが発生しているスクリプトを確認)
画像圧縮設定
注意点: 画像圧縮設定を行う際、圧縮率を高くしすぎると、画像の画質が落ちてしまうことがあります。画質とファイルサイズのバランスを取ることが重要です。
- オリジナル画像の最適化:画像を最適化し、同じフォルダ内にオリジナルのバックアップを保存する設定です。これによって、圧縮後の画像に問題が発生しても、元の画像を維持できるようになります。
- 可逆最適化:画像の圧縮を行い、画質を保持しながらサイズを圧縮する方法です。この設定では、ロッシー圧縮と比べて画像の品質が維持されますが、圧縮後の画像サイズが大きくなる可能性があります。
- WebP画像への置換:元の画像をWebP形式に変換して圧縮します。WebPは通常、JPEGやPNGよりも優れた圧縮率を提供し、サイトの読み込み速度を向上させる効果があります。
これらの設定が画像圧縮や最適化の直接的な管理に関連しています。
1. 画像の画質が低下する場合
理由: 画像の画質が悪化すると、サイトの見た目の印象が大きく低下します。特に、商品画像やポートフォリオのようなビジュアルが重要なサイトでは致命的です。重要な対策:
- 可逆最適化の有効化(画質を保つ)
- オリジナル画像のバックアップの確保(リカバリーができるようにする)
2. ページ更新後も変更が反映されない
理由: ユーザーは「設定を変更したのに何も変わらない」と感じると不信感が生まれやすいです。特にキャッシュの問題は初心者がハマりやすいポイントです。重要な対策:
- キャッシュクリアの手順を明確化(LiteSpeed Cacheのキャッシュとブラウザキャッシュの両方をクリアする)
- 動的コンテンツのキャッシュ管理の見直し(必要に応じてログインユーザーのキャッシュ分離を検討)
LiteSpeed Cacheはサイトのパフォーマンス向上に役立ちますが、設定やトラブルシューティングには注意が必要です。
キャッシュクリア、動的コンテンツ、CSS/JSの最適化、画像圧縮を適切に管理することで、快適なユーザー体験を提供できます。
最後に!パフォーマンスチェックとテスト
設定が完了したら、実際にサイトのパフォーマンスをテストしましょう。以下のツールを使用して、サイトの表示速度をチェックします。
GTmetrix: サイトの読み込み速度や改善点を分析します。
Pingdom: サイトの応答速度やパフォーマンスを測定します。
Google PageSpeed Insights: Core Web Vitalsに基づくパフォーマンススコアを確認します。
テスト結果をもとに、必要に応じて設定を微調整し、さらにパフォーマンスを向上させましょう。
まとめ:LiteSpeed Cacheを使ってサイトを爆速化しよう!
LiteSpeed Cacheプラグインは、WordPressサイトのパフォーマンスを大幅に向上させる強力なキャッシュ管理ツールです。
主な特徴として、ページキャッシュ、ブラウザキャッシュ、画像最適化、CSS/JSの圧縮・結合などの機能を提供し、サイトの読み込み速度を最適化します。
個人サイトと複数人サイトでは、それぞれの特性に応じた設定を行うことが重要です。
しかし、プリセットでの設定だけで十分な最適化を行なってくれるので、拘りたい方は基本的なキャッシュ設定やCSS/JSの圧縮、CDNの利用などを駆使して、ウェブサイトを爆速化しましょう!