【WordPress】LiteSpeed Cacheによるサイト高速化設定

先日サーバをLiteSpeedに移行した一番の理由は、「LiteSpeed Cache」プラグインを使ってより高速なサイトを作りたかったから。

このプラグインを使うことでキャッシュ周りの動作が大幅に改善するだけでなく、画像ファイルの圧縮・最適化やWebPへの変換もオールインワンで行ってくれるという。

というわけで、今回はこのサイトで実際に行っているLiteSpeed Cacheの設定を紹介しようと思う。

前提

先に自分の環境について記載する。

  • LiteSpeed Cacheのバージョンはv2.9.8.7
  • WordPressのバージョンはv5.2.3-ja
  • テーマはCocoonを使用

なお、GCPのMarketplaceからWordPress+LiteSpeedサーバをインストールした場合、デフォルトでLiteSpeed Cacheがインストールされている。

LiteSpeed Cacheの設定

少し長くなるけど、LiteSpeed Cacheの各設定タブを全て掲載する。なお、予め右側の緑色タブで「高度なオプションを表示」をONにしておくこと。

[1] 全般

意識して設定しているのは以下くらい。TTLはとりあえずデフォルトのまま。

  • LiteSpeed Cacheを有効にする:有効
  • 自動アップグレード:オン

[2] キャッシュ

基本的にキャッシュするポリシーなので、「ログインページをキャッシュ」と「モバイルをキャッシュ」以外はオンに設定。

[3] パージ

「アップグレード時にすべてをパージする」をオン。自動パージルールはデフォルトのまま。

[4] 除外

デフォルトから変更なし。

[5] 最適化

最も悩ましい設定。サイトによって全然違ってもおかしくない。うちの場合、一旦全てオンにして、表示や動作があやしい以下の項目をオフにした。

  • CSS結合:オフ
  • JS結合:オフ
  • クリティカルCSSを生成:オンオフ ※一部無駄なCSSが生成されてる疑惑
  • バックグラウンドでクリティカルCSSを生成する:オンオフ ※同上
  • JS Deferredをロード:オフ ※一部JavaScriptが動作せず
【2019/10/25追記】CSSを更新するなどして不要となったクリティカルCSSは、LiteSpeed Cacheの「管理>[2] DBオプティマイザ」から「CSS/JS オプティマイザ消去」を実行することで削除できる模様。そのため、現在はクリティカルCSSを有効化しています。

また、「DNSプリフェッチ」にはAdSenseといったGoogle関連サービスのドメインを登録する。(DNSプリフェッチ:指定したドメインを事前に名前解決する)

//pagead2.googlesyndication.com
//googleads.g.doubleclick.net
//tpc.googlesyndication.com
//www.gstatic.com

[6] チューニング

CSSやJSの結合設定は影響範囲を見極めきれず、一旦オフにした。表示崩れや動作に支障がなさそうな以下の項目だけオンにしている。

  • クエリ文字列を削除:オン
  • Googleフォントを非同期に読み込む:オン
  • WordPress文字を削除:オン

また、「JS遅延を除外」にはAdSenseとGoogleタグマネージャ対応で以下の設定をした。

/pagead/js/adsbygoogle.js
/gtm.js

[7] メディア

画像ファイル最適化はLiteSpeed導入目的の1つなので、設定は一部を除き基本的にオンにする。特にWebP関連の項目(下記青字)はオン必須。

  • iframes遅延読み込み:オフ ※AdSense対策
  • 自動的に最適化する:オン
  • 最適化Cron:オン
  • オリジナルバックアップを削除する:オフ ※最適化失敗時に備えて、削除は手動で行う
  • WebPのバージョンを最適化する:オン
  • 可逆最適化:オフ ※ファイルサイズ抑止
  • EXIF/XMPデータを保存する:オフ ※ファイルサイズ抑止
  • WebP画像への置換:オン

なお、設定にあわせて.htaccessも自動編集されるので、WebPをサポートしていないブラウザでアクセスした場合は、元の画像フォーマットで表示されるように調整してくれる

[8] CDN

このサイトはCloudflareを使用しているが、ここでAPIキーを登録するとLiteSpeed Cacheの管理画面からCloudflareのキャッシュを削除したり一時的に開発者モードに変更できる。テーマをカスタマイズした際に簡単に操作できて便利。

「Cloudflare API」以外の項目はデフォルトのまま。

なお、APIキーはCloudflareのProfileページから「API Tokens>API Keys>Global API Key」で確認できる。

[9] ESI

LiteSpeed Enterprise限定の設定(OpenLiteSpeedは対象外)のため変更なし。

[A] 高度

意識して設定している項目は以下のみ。

  • オブジェクトキャッシュ:オン
  • HTTP/HTTPSの互換性を向上させる:オフ
  • インスタントクリック:オフ

なお、「インスタントクリック」をオンにすると、管理バーから管理画面に遷移したり記事を編集したりする際に100%表示が崩れたので推奨しない。

[D] デバッグ

デフォルトから変更なし。

[C] クローラー

デフォルトから変更なし。

その他(Cocoon設定)

Cocoonの「サイト高速化」はLiteSpeed Cacheの設定といくつか重複している。LiteSpeedのほうが細かい設定ができるため、基本的にはLiteSpeed側で管理して、Cocoonの設定をオフにしたほうがいい。

ただ、「スクリプトの読み込み設定(JavaScriptをフッターで読み込む)」だけはLiteSpeedにないため、例外としてこの設定だけオンにしている。

まとめ

今回はLiteSpeed Cacheの設定方法について紹介した。

実際にこのサイトで行っている設定値を掲載したけど、同じ設定をしても、使用しているテーマやプラグインによっては正常に動作しない場合がある。導入する際は動作確認とチューニングを忘れずに行うようにしてほしい。

ただ、適切な設定をして使いこなせれば非常に強力なプラグインであることは間違いない。今回は設定方法のみを紹介したけど、次回の記事では使い方についてまとめようと思う。

参考リンク

あわせてどうぞ

【GCP】WordPressをNginxからLiteSpeedに乗り換えた
先日サイトの高速化について色々調べていたところ、LiteSpeedというWEBサーバの存在を知った。 巷ではApache、IIS、Nginxに続く「第4のWEBサーバ」と呼ばれているようで、Apacheの設定と互換性があり、その上速度...
【WordPress】LiteSpeed Cacheを使ったキャッシュ管理や画像最適化、GCS連携方法など
前回の記事で「LiteSpeed Cache」プラグインの設定方法について説明した。今回は、サイト高速化に向けたキャッシュ管理や画像ファイル最適化などの操作について、このサイトで実際に行っている方法を紹介する。 また、WebPフォーマ...
【WordPress】LiteSpeedで実際どれくらい高速化されたのか検証してみた
先日、WEBサーバをNginxからLiteSpeedに乗り換えた。また、WordPressプラグイン「LiteSpeed Cache」によってキャッシュやWebP変換といった設定をしてきた。 今回の記事では、複数のパフォーマンス計測サ...
タイトルとURLをコピーしました