Four display distortions occurred when UCSS was generated by LiteSpeed Cache’s page optimization. In the next four articles, we will describe how to correct the display disorder. The first article is about fixing the WPFront Scroll Top arrow not displaying.

About WPFront Scroll Top Plugin

WPFront Scroll Top is a plugin that displays a button to go back to the top of the currently displayed page, and is widely used with over 200,000 active installations as of March 2025.

You can create buttons with text, images, and Font Awesome, and you can also specify the position of the button in detail, etc. There are many items that can be adjusted to suit your preferences.

WPFront Scroll Top settings

Major items are described below.

• Asynchronous loading of JavaScript -> OFF (because it is optimized by LiteSpeed Cache)
• Button Style -> Font Awesome
• Location -> bottom right, 10px horizontal margin, 70px vertical margin
• Font Awesome icon class -> fa-solid fa-circle-up fa-3x

On the screen, it will appear as follows

It appears in a dark color when the cursor is hovered over or in motion, usually translucent; it disappears after 2 seconds and reappears when scrolling.

LiteSpeed Cache Settings

The WPFront Scroll Top plugin will not work reliably unless the JS settings in the LiteSpeed Cache plugin’s page optimization are changed.

If JS is set to Delayed loading, the icon will not appear; it must be Deferred.

If Deferred, it will work stably before UCSS generation.

Status of defects after UCSS generation

When UCSS is generated, the icon is no longer displayed.

When I looked in the Chrome Developer Tools, the JavaScript seemed to be working correctly because the wpfront-scroll-top-container’s opacity was changing even though the icon was not displayed.

I assumed that if the icon was displayed, it would work correctly.

Countermeasures

We tried many things, but finally got the icon to appear by changing the settings in the Font Awesome plugin.

If you change the Technology item from Web Font to SVG, it will be displayed.

WPFront Scroll Top seems to load CSS inside JavaScript, and CSS is not loaded on Chrome Developer Tools.Also, excluding Font Awesome CSS from the optimization does not fix the problem.

When the Font Awesome icons were loaded in SVG, the icons were displayed correctly and scrolling to the top of the page functioned correctly, even when UCSS was generated and reflected.

Musubi

The standard way to fix display distortions in the LiteSpeed Cache plugin is to exclude JavaScript or CSS from the optimization.

This method of fixing the WPFront Scroll Top display disorder is new to me and a rare case.

I think there is a good chance that the problem around the Font Awesome icon can be fixed in the same way as in this case, when the LiteSpeed Cache page optimization causes a display disturbance.