Wordpress LScache Plugin: CSS Combine ignores link media attribute
Last Updated on: Wed, 15 Apr 2026 00:00:02 The only thing active on this site now is CSS Combine, and the page styling is different from the uncombined version. See specifically styles for the product blocks (the li.product elements) on the page, compared to the live page (cached, combined and minified with another plugin). To see the source stylesheets, add ?nocache to the live page URL. I think the plugin is combining files included with different values for the media attribute. In this case, it seems to be woocommerce-smallscreen.css, included with media=only screen and (max-width: 768px) on the page. To combine properly, the styles in this file must be wrapped in a media query. This topic was modified 2 years, 9 months ago by Gal Baras. The page I need help with: https://dev.get-business-online.com/behappyinlife/books-products/?nocache Hi @galbaras, woocommerce-smallscreen.css bug is one of the known issues when using CSS combine, so it must be excluded if using CSS combine. Thats not a solution. Its a workaround. Combined CSS should be kept in the same order it appears on the unoptimized page, because this order matters, and there may be media queries inside some files, while others are broken up into separate inclusions. The same thing should hold true for combining scripts, and be observed especially when also including inline styles and/or scripts. Order of appearance matters and must be retained. In the days of HTTP/2 and QUIC, having a single combined file does not have a major performance advantage of having a small number of them. Therefore, when encountering a special link tag, like the WooCommerce smallscreen stylsheet, the plugin should automatically split things up, while retaining the order of the styles. In case this wasnt clear, heres what happens: Unoptimised: some stylesheets (A), small-screen stylesheet (B), other stylesheets (C, which specifically includes the child theme stylesheet with ultimate style overrides). Optimised: A+C, then C ? resulting in styles from the small-screen stylesheet taking effect on the mobile version of the site, which is incorrect. Bottom line: exclusions only work when the order of the stylesheets doesnt matter. Since the plugin cant know, it should combine only A, include B, and then combine C separately to keep the correct order of styles. Thank you for the extra information. Optimised: A+C, then C Did you mean to say Optimised: A+C, then B? (BTW, I will mark this resolved after I hear back RE: that B/C thing. I realize the issue itself is not actually resolved, but it is an issue we have logged internally, and there is a work-around. Marking the topic resolved here keeps the active forum issues easier to find.) Good catch. I actually meant A+C, then B. The small-screen styles take precedence, and they shouldnt. They should appear in the order as on the unoptimized page. This is not resolved yet, because excluding the smallscreen stylesheet gives incorrect results. What should I do (apart from excluding everything that follows the smallscreen CSS file)? We know the issue is not yet actually resolved, but it is an issue we have logged internally, and there is a work-around. Marking the topic resolved here keeps the active forum issues easier to find. Right now the only work-around is to turn off CSS Combine.
LiteCache Rush: Speed comes from using less, not from doing it faster
Reference