LiteSpeed Cache の設定を最適化したい
LOLIPOP! レンタルサーバーのハイスピードプラン以上では、ウェブサーバーとして LiteSpeed、PHP として LiteSpeed 版を使用する事が出来ます。そのような環境で WordPress を使用する場合には、LiteSpeed Cache プラグインをインストールする事により、サイトへのアクセス速度を向上させる事ができ、PageSpeed Insight のスコアを高いレベルで維持できるようになります。
QUIC.cloud へのユーザー登録とドメインキーの取得、画像の最適化まででも十分効果を発揮できますが、QUIC.cloud CDN へ接続し、CSS と JavaScript を最適化する事により、更に効果を上げる事が出来ます。
今回は、QUIC.cloud CDN に接続した後に行った最適化のうち「ページの最適化」の内容について説明します。なお、LiteSpeed Cache プラグインのバージョンは 5.3.3 で検証しています。
20230304 追記 : LiteSpeed Cache プラグインの設定を調整する記事を作成しました。
「ページの最適化」は本当に必要？
私自身が試したいと思いましたのでやってみましたが、LiteSpeed Cache のプリセット「高度 (推奨)」の状態でも効果が大きいので、「ページの最適化」に取り組む労力は効果と見合わないと思います。ドメインキーの取得と画像の最適化まで行えば、PageSpeed Insight で (トップページで) 90 以上は達成できます。
何方かといえばレンタルサーバーの選択の方が重要です。LiteSpeed 対応のレンタルサーバー & WordPress & LiteSpeed Cache を使用すれば 90 以上は維持できます。
それでも、どうしても PageSpeed Insight のモバイル版でパフォーマンス 99～100 を狙いたい方のみ、以下の記事をご覧ください。
前提条件
LOLIPOP! レンタルサーバーに限りませんが、
- Web サーバーに LiteSpeed を採用している
- PHP が LiteSpeed に対応していて、WordPress のインストールが済んでいる
- LiteSpeed Cache プラグインをインストールしている
- LiteSpeed Cache プラグインの初期設定とドメインキーの取得が完了している
- LiteSpeed Cache プラグインの標準プリセットを 「高度 (推奨)」にして、表示に乱れ等ない
- QUIC.cloud へのユーザー登録が済んで CDN を有効にしている
ここまで済んでいる事を前提として説明します。
1 と 2 はレンタルサーバーの選択になります。LOLIPOP! ならハイスピードプラン以上で対応しています。
3 から 5 については以下の記事を参照ください。
6 については以下の記事を参照ください。
注意事項と免責
私も設定している際に遭遇しましたが、設定途中には画面の乱れ、特定の機能が動作しない、アクセス速度が極端に落ちるなど、不具合が多々発生します。
選択しているテーマとプラグインによって、不具合が発生する可能性があります。私の使用しているテーマとプラグインについては以下のページに記載しました。
これらのプラグインを有効にした状態で動作する事は確認できましたが、不具合が全く発生していないかは正直分かりません。確認できていない不具合がある可能性はあります。また、これ以外のプラグインの使用の可否の情報は持ち合わせていませんのでご承知下さい。
LiteSpeed Cache のメニュー構成
LiteSpeed Cache プラグインのメニューには以下の項目があります。
「ダッシュボード」は現在の状態の表示、「プリセット」は LiteSpeed Cache プラグインが設定した条件をまとめてセットする項目です。初期の状態では「高度 (推奨)」で暫く様子をみる事をお勧めします。
それ以降の「一般」から「ツールボックス」の中で、ググってもあまり設定方法が出てこない「ページの最適化」について試してみました。
「ページの最適化」で異常が発生した場合の対処方法
始めに「ページの最適化」で異常が発生した場合の対処方法について説明します。以下のページは、LiteSpeed Cache プラグインの CSS/JavaScript に関するトラブルシューティングです。(英語ですが日本語に翻訳すると分かりやすい文章で書かれています)
「ページの最適化」の部分は、適切に設定しないと副作用が大きく、画面の乱れや設定の未反映が多発します。異常が発生した場合には、一度条件を元に戻し、キャッシュをクリアする事により正常な状態に戻すことができます。
LiteSpeed Cache プラグインのメニューの「ツールボックス」の「パージ」タブの以下の項目のパージを実行すると、キャッシュをクリアする事が出来ます。
- CSS/JS キャッシュ
- クリティカル CSS
- ユニークな CSS
- LSCache エントリ
の順にキャッシュをクリアして、正常な状態に戻る事を確認します。上記のページには「全てをパージする」を選択するように書かれていますが、殆どの場合は 1. CSS/JS キャッシュのパージだけで正常に戻ります。
ページの最適化の設定
異常が発生しないかどうか、異常が発生した場合には回避する条件を探しながら設定を進めます。設定内容については LiteSpeed Cache プラグインのページに説明があります。
まずは影響の少ない所から順番に有効にします。手順については、以下のページを参考に進めました。
CSS 圧縮化、JS 圧縮化をオン
Cocoon テーマにも同様の項目がありますが、Cocoon 側を OFF にして、LiteSpeed Cache 側で ON にしました。圧縮化 (Minify) はコメントや改行、インデントの削除なので、異常は発生しにくいと思います。
JS 設定の最適化項目を全てオン
先に JavaScript の最適化項目を全てオンにします。CSS は圧縮化のみオンで、他はオフにします。
CSS よりも JS の方が副作用が小さいように感じました。元々、[8] チューニングの JS 除外項目に jquery.min.js 等が予め記載されていますので、そのままにしておきます。
| JS 圧縮化 | オン |
| JS 結合 | オン |
| JS は外部とインラインを組み合わせる | オン |
| JS を遅延読み込み | 遅延 |
私の環境では、Cocoon Child の javascript.js に追加していたカテゴリーの折り畳み機能が正常に動作しなくなりましたが、一度キャッシュをパージすると直りました。プラグイン含め、これ以外は異常は発生しませんでした。
20230619 追記 :
「JS を遅延読み込み」の項目を「遅延」にすると、広告等で使用される JavaScript が正常に動作しない事があるようです。「遅延 (Delayed)」から「Deferred (延期)」または「オフ」にする事で解消されます。LiteSpeed Cache のページ (こちら) によれば、JavaScript の実行タイミングが、
- オフ ... 即実行
- Deferred (延期) ... html を読み込んだ直後に実行
- 遅延 (Delayed) ... html を読み込んで、ユーザーのアクションが実施されてから実行
と変わります。
遅延 (Delayed) の方が PageSpeed Insights のスコアには好影響ですが、不具合が発生した場合には、Deferred (延期) やオフにして、最適化のレベルを下げてみてください。また、不具合が発生する JavaScript が特定できた場合には、[8] チューニングの JS 除外の項目に追加する事により、他の JavaScript は遅延読み込みさせて PageSpeed Insights のスコアへの影響を最小限に抑える事が出来ます。
20230619 追記 ここまで :
CSS 設定の最適化項目を全てオン
JavaScript の最適化項目をオンにして異常がみられなければ、次にCSS 設定の最適化項目を全てオンにします。
| CSS 圧縮化 | オン |
| CSS 結合 | オン |
| UCSS を生成する | オン |
| UCSS インライン | オン |
| CSS の外部とインラインを組み合わせる | オン |
| CSSを非同期読み込み | オン |
| URL ごとの CCSS | オン |
| インライン CSS 非同期ライブラリ | オン |
| フォント表示の最適化 | SWAP |
CSS の最適化、特に CSS 結合は副作用が発生しやすいと思います。CSS 除外の項目を設定せずに全ての項目をオンにすると、
- Cocoon Child の設定が反映されず、タイトル部分の色が元のスキンの色に戻る。
- reCAPTCHA バッジの非表示が効かずに常に表示される
- モバイルの PageSpeed Insight の結果が極端に落ちる。Total Blocking Time が 4,000 ms でスコアが 40 程度。
といった異常が私の環境では発生しました。なんとなくですが、Cocoon Child の CSS の認識がうまく出来ていないように感じました。
CSS 除外項目の調査
CSS の最適化項目をオンのままで、こちらの手順に従って解決します。
- トップページを表示して、Chrome であればデベロッパーツールを表示する
- デベロッパーツールの Network -> CSS を選択する
- URLの末尾に /?LSCWP_CTRL=before_optm を追加して再読み込みする (最適化を除外する)
- 表示された CSS を一つずつコピーしてエディタに転記する
- [9] チューニング CSS の「CSS 除外」に全ての CSS を入力し変更を保存する
- キャッシュをパージする
- URL末尾に追加した/?LSCWP_CTRL=before_optm を消してトップページを再表示する
- 異常が解消されていれば、CSS の何れかの最適化に問題あり
- 一行を消して変更を保存、キャッシュをパージ、再読み込みを繰り返して、異常が発生する CSS を特定する
最終的に、私の環境で「CSS 除外」に追加した内容は以下の通りです。
/cocoon-child-master/style.css
/cocoon-child-master/keyframes.css当初の予想通り、Cocoon Child の CSS を除外すれば正常に表示できるようになりました。
他の不具合 はてなブログのブログカードが表示されない
トップページで異常が発生しないようになったら、他のページを確認します。私の環境では、はてなブログへのブログカードが表示されない現象が発生しました。
これまで、はてなブログのブログカードは、該当 URL をコピーして WordPress の編集画面にペーストし、自動で作成されるものを使用していました。このタイプのブログカードが全て表示されなくなりました。
対策として、はてなブログのブログカードではなく、Cocoon のブログカードを使用するように変更しました。ショートコードに '[]' 内に URL を入れて、最後に '/' を付ける事によって、Cocoon のブログカードが作成できます。
数が少なかったので全て修正しました。
PageSpeed Insight への影響
「ページの最適化」以外に画像の最適化等も含めて行い、QUIC.cloud での最適化が進めばモバイル / PC 共にパフォーマンスは 99 ～ 100 になります。指標は全てグリーンです。
合格した監査の内容を見ると、使用していない CSS や JavaScript の削減や次世代フォーマットでの画像の配信も含まれていますので、効果は大きいと思います。
QUIC.cloud の無料利用枠について
LOLIPOP! レンタルサーバーで LiteSpeed Cache を使用する場合、QUIC.cloud の無料利用枠は LiteSpeed Enterprise になり、100クレジットが CDN の通信に使用できます。適用エリアによりクレジット当たりの通信量が変わりますので、QUIC.cloud にログインして確認してください。Asia は40クレジット/GB ですので、2.5 GB の通信で使い切る計算になります。といっても、使い切ったら Node 数は減りますが継続して使用できるようです。
月当たりの最適化の上限値は以下の表の通りです。これ以外に一日当たりの使用量も決まっていますので、使用量を使い切った場合には翌日に持ち越す事になります。
| 画像の最適化 | 高速キューは 10,000 / 標準キューは無制限 |
| ページの最適化 | 2,000 (CCSS, UCSS, VPI 含む) |
| 低品質の画像プレースホルダー | 1,000 (LQIP) |
当日/当月の使用量と残量はダッシュボードで確認できます。
まとめ
WordPress の LiteSpeed Cache プラグインの「ページの最適化」を使えるように調整してみました。
LiteSpeed Cache プラグインについてググって説明のページを見ても「ページの最適化」については触れられていない事が多く、手探りでの作業となりました。
キャッシュのパージの使い方や「CSS 除外」の欄への記載方法等、時間をかけて色々と試した結果、安定して運用できる条件を見つける事が出来ました。Cocoon テーマであれば、Cocoon Child の CSS を「CSS 除外」の欄に記載すれば安定するかと思います。
とはいえ、最初に書きましたが、LiteSpeed Cache プラグインの効果は大きく、「ページの最適化」まで踏み込まなくても満足できる結果が得られると思います。PageSpeed Insight の結果を突き詰めたい方は参考にして頂けたらと思います。
今回のアイキャッチ画像
猫の次は犬です。ネズミはリアルすぎて止めました。
コメント