LiteSpeed Cache プラグインの当日分の使用量が、日本時間14:00に復活しました。その多くは VPI の生成に使用されましたが、少し残りましたので、UCSS が生成されない原因について調査しました。原因は最適化の際に CSS でエラーが発生していました。
LiteSpeed Cache の UCSS の読み込みエラー
3月2日の記事で、UCSS が読み込まれないエラーが発生している事を書きました。
本日3月3日の UCSS の生成でも、やはり読み込まれていませんでした。
UCSS が生成されても読み込み時にエラーが発生している状況は、Chrome デベロッパーツールで確認する事が出来ます。
UCSS を生成するのに失敗しています。この原因について調査します。
エラーメッセージの記載場所
UCSS の生成に失敗した場合には、UCSS ファイル内にエラーメッセージが記載されています。
LiteSpeed Cache プラグインの UCSS ファイルは、/wp-content/litespeed/ucss にあります。今回生成された UCSS ファイルの中身は次の内容でした。
/* [ERROR] Unknown word (.125rem}.google-auto-placed:before{ d): Please fix this css error and then try again. The problem may be around this string, normally right after it. If nothing else, you can find out which css file contains this css string and exclude it from css combine. */“.google-auto-placed:before” の部分でエラーが生じた為に、UCSS が生成されませんでした。
これで思い出したのですが、Twenty Twenty Five 子テーマの中に “.google-auto-placed:before” の設定を追加していました。
.google-auto-placed:before {
display: block;
font-size: var(--wp--preset--font-size--small) !important;
content: "Sponsored Link";
text-decoration: none;
margin-bottom: 0.3em;
}この部分によって、Google AdSense の広告の上に “Sponsored Link” の表示を付けていました。ちゃんと機能していたのですが、最適化の際にエラーが生じたようです。
修正して UCSS が生成される事を確認
この CSS をコメントアウトして UCSS を再生成すると、ちゃんと UCSS が生成されて読み込まれるようになりました。
ページの最適化の残量が少ないので、今日は読み込みの確認までとします。
UCSS により表示が乱れている箇所
UCSS の調整が未実施の状態で、次の場所の表示が乱れています。
- WPFront Scroll Top の矢印が表示されない
- WPB Accordion Menu or Category のカテゴリを展開するプラス記号が行末ではなく先頭に表示 (wpb-submenu-indicator クラスが反映されていない)
- WP Mobile Menu で設置したトップメニュー (ハンバーガーメニュー) が開かない
- WP Mobile Bottom Menu の選択時の背景が変わらない
表示が乱れなかった部分は次の場所です。
- Blogcard for WP のブログカード
- X (旧Twitter) ブロック
- Rinker の商品紹介ブロック
これから一つずつ確認して調整します。
結び
LiteSpeed Cache プラグインの UCSS の生成に失敗した場合には、UCSS ファイル自体にエラーメッセージが記録されます。これを元に調査すれば原因に辿り着く事が出来ます。
今回は Twenty Twenty Five 子テーマで設定していた “.google-auto-placed:before” が最適化に失敗して、UCSS が生成できませんでした。
この CSS は Google AdSense の広告の上に表示を付けたいと考えて設置していました。この部分をコメントアウトする事で、正常に UCSS が生成されて読み込まれました。
表示の乱れはどうしても発生します。個別に対応するしかありませんので、一つずつ対処していきます。
コメントを残す