当 LiteSpeed Cache 页面优化生成 UCSS 时，出现了四次显示干扰。本节分四条介绍如何纠正显示紊乱。第一篇文章是关于修复 WPFront 滚动顶部箭头不显示的问题。

关于 WPFront 滚动顶部插件

WPFront Scroll Top 是一款插件，可在浏览页面顶部显示返回按钮；截至 2025 年 3 月，该插件已被广泛使用，活跃安装量超过 20 万。

您可以用文字、图片和 Font Awesome 创建按钮，还可以详细指定位置等。有很多项目可以调整，您可以根据自己的喜好使用它们。

WPFront 顶部滚动设置

主要项目介绍如下。

• 异步加载 JavaScript -> 关闭（因为 LiteSpeed 缓存对其进行了优化）
• 按钮样式 -> Font Awesome
• 位置 -> 右下方，10 px 水平边距，70 px 垂直边距
• Font Awesome 图标类 -> fa-solid fa-circle-up fa-3x

屏幕显示如下

当光标悬停或移动时，它会显示为深色，通常为半透明；2 秒钟后消失，滚动时重新显示。

LiteSpeed 缓存设置

除非更改 LiteSpeed Cache 插件页面优化中的 JS 设置，否则 WPFront Scroll Top 插件将无法稳定运行。

如果 JS 设置为 “延迟加载”，则不会显示图标；必须将其设置为 “推迟”。

如果延迟，则在生成 UCSS 之前就能可靠运行。

UCSS 生成后的缺陷状况

生成 UCSS 后，图标将不再显示。

在 Chrome 浏览器的 “开发工具 “中查看时，wpfront-scroll-top-container 的不透明度在变化，即使图标没有显示，因此 JavaScript 似乎工作正常。

我假定，如果图标显示出来，它就会正常工作。

对策

经过多次尝试，最终通过更改 Font Awesome 插件中的设置显示了图标。

如果技术项目从 Web 字体更改为 SVG，就会显示出来。

WPFront Scroll Top 似乎是在 JavaScript 中加载 CSS，而在 Chrome 浏览器开发工具中并未加载 CSS。此外，将 Font Awesome CSS 排除在优化之外也不能解决问题。

将 Font Awesome 图标加载为 SVG 时，即使生成并反映 UCSS，图标也能正确显示，滚动到页面顶部的功能也能正常运行。

Musubi

在 LiteSpeed Cache 插件中解决显示混乱问题的标准方法是将 JavaScript 或 CSS 排除在优化之外。

这种修复 WPFront Scroll Top 显示紊乱的方法对我来说是新的，也是一种罕见的情况。

如果 LiteSpeed Cache 页面优化导致 Font Awesome 图标周围出现显示问题，很可能可以使用与本例相同的方法来解决问题。