LiteSpeed Cache のページの最適化で UCSS を生成した際に表示の乱れが4カ所発生しました。4つの記事に分けて表示の乱れを修正する方法について記載します。1回目は WPFront Scroll Top の矢印が表示されない事を修正した内容について記事にします。

WPFront Scroll Top プラグインについて

WPFront Scroll Top は、表示中のページの先頭に戻るボタンを表示するプラグインです。2025年3月現在で有効インストール数20万以上と幅広く使用されています。

テキストや画像、Font Awesome でボタンを作る事ができ、位置も細かく指定できる等、調整できる項目も多く、好みに合わせた使い方が出来ます。

WPFront Scroll Top の設定

主要な項目について記載します。

• JavaScript の非同期読み込み -> OFF (LiteSpeed Cache で最適化される為)
• ボタンのスタイル -> Font Awesome
• 場所 -> 右下、横方向のマージン10px、縦方向のマージン 70px
• Font Awesome アイコンクラス -> fa-solid fa-circle-up fa-3x

画面上では次の様に表示されます。

カーソルを合わせた時や動作中には濃い色で、通常は半透明で表示されます。2秒後には消えて、スクロールすると再び表示されます。

LiteSpeed Cache の設定

WPFront Scroll Top プラグインは、LiteSpeed Cache プラグインのページの最適化の中の JS 設定を変更しないと、安定動作しません。

JS を遅延読み込みを遅延にすると、アイコンが表示されません。Deferred にする必要があります。

Deferred であれば、UCSS 生成前であれば、安定して動作します。

UCSS 生成後の不具合の状況

UCSS が生成されると、アイコンが表示されなくなりました。

Chrome デベロッパーツールで見ると、アイコンが表示されていなくても wpfront-scroll-top-container の opacity が変化しているので、JavaScript は正常に動作しているようでした。

アイコンが表示されれば正常に動作するだろうと推測しました。

対策方法

色々と試しましたが、最終的には Font Awesome プラグインの設定を変更する事でアイコンが表示されるようになりました。

Technology の項目を、Web Font から SVG に変更すれば表示されます。

WPFront Scroll Top は CSS を JavaScript 内部で読み込んでいるようで、Chrome デベロッパーツール上は CSS は読み込まれません。また Font Awesome の CSS を最適化から除外しても直りません。

Font Awesome のアイコンを SVG で読み込むようにすると、UCSS が生成・反映されても、正常にアイコンが表示されて、ページトップへのスクロールも正常に機能しました。

結び

LiteSpeed Cache プラグインの表示の乱れを修正する定番の方法は、JavaScript か CSS を最適化から除外する事です。

今回の WPFront Scroll Top の表示乱れの修正方法は、私にとっては初めての方法で、レアなケースだと思います。

LiteSpeed Cache のページの最適化で表示が乱れる場合の Font Awesome のアイコン周りの不具合は、今回と同じ方法で修正できる可能性が高いと思います。