LiteSpeed Cache プラグインの UCSS をブログトップのみ生成するように設定しました。想定通り UCSS が生成されたのですが、エラーが発生して適用されませんでした。今回はこの現象について考察します。
UCSS は生成されるも適用されず
LiteSpeed Cache プラグインのページの最適化の使用量は、14:00 になると当日分が増加します。そのタイミングでブログトップのみ UCSS が生成されました。
このまでは想定通りでした。
しかし、Chrome デベロッパーツールで見ると、UCSS の読み込みでエラーが発生し、適用されませんでした。次の対処をしてみましたがエラーは解消できませんでした。
- UCSS を消去して再生成
- キャッシュを削除 (LiteSpeed Cache、Cloudflare CDN)
- Cloudflare CDN の開発者モード ON
UCSS が生成されるのに反映されないのは、過去にも経験しています。
この時は WPCode Lite で CSS や PHP、JavaScript を管理しようとして生じていました。現在は WPCode Lite は使用していません。
それでも UCSS が反映されないのには理由があるはずです。
とりあえずの対処 : CCSSを生成するように変更
UCSS ではなく CCSS を生成するように変更しました。こちらでは問題なく読み込めました。
CSS の設定は以下のようにしました。これで CCSS が生成されます。
| 項目 | 設定 |
|---|---|
| CSS 圧縮化 | ON |
| CSS 結合 | ON |
| UCSS を生成する | OFF |
| UCSS インライン | OFF |
| CSS の外部とインラインを組み合わせる | ON |
| CSSを非同期読み込み | ON |
| URL ごとの CCSS | ON |
| インライン CSS 非同期ライブラリ | ON |
しかし CCSS では PageSpeed Insights の結果は 90 前後で頭打ちになる事が分かっています。
できれば UCSS で使いたいので、適用されない原因を推測します。
UCSS が適用されない原因の推測
今回、LiteSpeed Cache プラグインの設定を大きく変えたのは2カ所です。
- ゲストモードを OFF
- ゲストに最適化を OFF
Cloudflare CDN を使用しますので、LiteSpeed Cache プラグインの設定を少し緩くしても大丈夫かと考えて、この二つを OFF にしました。
この二つを有効にしないと、UCSS が正常に生成・読み込みされないのではないかと推測します。
この二つの項目は副作用が大きいので、OFF で使った方が安心なのですが、最適化を進めるには必須なのでしょう。
明日からに備えて
とりあえず、ゲストモードとゲストに最適化を ON にして、JavaScript 周りの動作を確認します。その上で、CCSS ではなく UCSS を生成する条件にして、不具合を確認しながら微調整します。
一時的に表示が乱れるかもしれませんのでご容赦下さい。
結び
LiteSpeed Cache プラグインの UCSS が生成されるも読み込まれない状態でした。一時的に CCSS を作る設定に変更しましたが、やはり UCSS を使える状態にしたいと考えています。
原因はゲストモードとゲストに最適化を OFF にした為と推測します。今日のうちに、両者を ON にして JavaScript 周りの調整を済ませて、明日から UCSS が使えるように備えたいと思います。
コメントを残す