LiteSpeed UCSS Removing WoodMart CSS / Recommended Optimization Settings

Hi,

I’m using WoodMart with LiteSpeed Cache + QUIC.cloud on WooCommerce.

I’ve confirmed that LiteSpeed UCSS is removing a very large amount of WoodMart CSS, including styles for elements that are actually present in the DOM and visible on the page.

Examples include CSS from files such as:

el-button.css

opt-header-banner.css

el-banner.css

lib-swiper.css

lib-swiper-arrows.css

lib-swiper-arrows-critical.css

header-el-cart.css

After excluding these files from UCSS, those specific elements render correctly, but many other WoodMart components still lose their styling. In our test, roughly 50 of 65 original CSS files had 0% of their selectors retained by the generated UCSS.

CSS Combine by itself works correctly, so the issue appears specifically related to UCSS.

Do you have an official recommended LiteSpeed/QUIC.cloud configuration for WoodMart, particularly for:

UCSS

UCSS Inline Excluded Files

CSS Excludes

Load CSS Asynchronously / CCSS

CSS Combine

Do you generally recommend disabling UCSS for WoodMart, or is there a known exclusion list or compatibility fix for dynamic WoodMart components such as product loops, mini-cart, header banners, sliders, mobile menus and product badges?

Hello,

Thank you for the detailed information.

There is no universal list of WoodMart CSS files that should be excluded from LiteSpeed/QUIC.cloud optimization. WoodMart loads different styles and scripts depending on the enabled theme features and page content, so exclusions should generally be added only when a specific optimization causes an issue.

Regarding CSS Combine, we generally recommend keeping it disabled unless there is a specific reason to use it. Modern HTTP/2 and HTTP/3 servers can handle multiple CSS requests efficiently, so if your website works correctly with CSS Minify and the other required optimization options enabled, CSS Combine can remain disabled.

In your case, since you have already confirmed that disabling/excluding UCSS restores the styling of the affected WoodMart elements, the issue appears to be related to the UCSS generation/removal of required selectors. Rather than excluding a large number of WoodMart CSS files globally, we recommend identifying and excluding only the specific files/styles that are actually causing the issue.

Also, please make sure that optimization features provided by both WoodMart and LiteSpeed are not enabled simultaneously. For example, if LiteSpeed handles image lazy loading, WoodMart’s built-in image lazy loading should be disabled.

Additionally, WoodMart has its own CSS/JS performance controls under Theme Settings > Performance > CSS/JS. WoodMart is designed to load only the styles and scripts required.

The Styles always load option can be used when a particular WoodMart CSS file needs to be loaded globally, while Styles never load can be used to prevent a specific file from loading globally. However, we do not recommend adding or removing files from these options unless there is a specific requirement, as this can affect other pages or components.

Similarly, the Advanced scripts controls should only be modified when you know which script is required or causing an issue.

Best Regards

[Author]

Posts