Currently, it looks like, all the CSS is in one large main.css file.
quic.cloud service is breaking the site.
When I use the UCSS cache:
The topbar menu breaks.The Dark mode, text resizer and mobile menu stop working. (it's not the JS, only happens when UCSS activated).
I'm having difficulty finding the right CSS selectors to add to the 'UCSS Selector Allowlist'
Tried a critical CSS generator and I also tried to manually find all the related classes from the main.css file. The files too big for ai help :D
Just wondering if you have had this with anyone else using the theme and litespeed? That's also tried to use the UCSS settings? Maybe you have a list of classes/selectors to whitelist?
While it is possible to use the UCSS (Ultra-fast CSS) selector allowlist to optimize CSS, we would advise caution when using this feature. Some CSS might be hidden or dynamically loaded in combination with JavaScript or other dynamic styles, which can cause unforeseen issues when they are excluded from the UCSS cache.
For this reason, we do not recommend manually adding selectors to the UCSS allowlist without thorough testing, as this might result in unexpected behavior on the site, such as broken functionality or layout issues.
Are there any plans to reduce the bloat on the main.css in the future? or is there a way to load the styles for only the features of the theme I'm using?
I'm getting a lot of unused CSS warnings in the Chrome Dev tools > Coverage , usually around 80%+ on a 400KB+ css file.
I've attached the minified and non-minified coverage table so you can see what unused theme CSS.
(I got the UCSS to work by whitelisting classes, but in doing so, the main.css file is still very large (from what I think, could be wrong) this is from all the inherit class dependencies from the body.)
We’ve made efforts to streamline the CSS as much as possible to ensure optimal performance. All the CSS included in the theme is necessary for the proper functioning of the theme’s features. As the theme offers various customizable options, some of the unused CSS may appear in your specific setup, but it’s important to note that this is by design to support different configurations and features.
If you are seeing a high amount of unused CSS, it’s likely due to the additional features you’re not currently using.
We appreciate your understanding, and if you have any further questions or need additional assistance, feel free to reach out.
Hi,
I'm trying to remove the unused CSS from each page with Litespeed Cache UCSS so that the whole main.css files isn't loaded on my posts.
https://blog.litespeedtech.com/2021/12/13/fix-incomplete-ucss/
Currently, it looks like, all the CSS is in one large main.css file.
quic.cloud service is breaking the site.
When I use the UCSS cache:
The topbar menu breaks.The Dark mode, text resizer and mobile menu stop working. (it's not the JS, only happens when UCSS activated).
I'm having difficulty finding the right CSS selectors to add to the 'UCSS Selector Allowlist'
Tried a critical CSS generator and I also tried to manually find all the related classes from the main.css file. The files too big for ai help :D
Just wondering if you have had this with anyone else using the theme and litespeed? That's also tried to use the UCSS settings? Maybe you have a list of classes/selectors to whitelist?
A long shot :D
Thanks.
List the CSS selector so that its style should always be contained in UCSS. How to choose an UCSS allowlist selector?
NoteWildcard * supported.
The selector must exist in the CSS. Parent classes in the HTML will not work.
Predefined list will also be combined w/ the above settings: https://github.com/litespeedtech/lscache_wp/blob/dev/data/ucss_whitelist.txt
While it is possible to use the UCSS (Ultra-fast CSS) selector allowlist to optimize CSS, we would advise caution when using this feature. Some CSS might be hidden or dynamically loaded in combination with JavaScript or other dynamic styles, which can cause unforeseen issues when they are excluded from the UCSS cache.
For this reason, we do not recommend manually adding selectors to the UCSS allowlist without thorough testing, as this might result in unexpected behavior on the site, such as broken functionality or layout issues.
Let us know if you need further assistance!
Best regards,
Thanks for your reply.
Are there any plans to reduce the bloat on the main.css in the future? or is there a way to load the styles for only the features of the theme I'm using?
I'm getting a lot of unused CSS warnings in the Chrome Dev tools > Coverage , usually around 80%+ on a 400KB+ css file.
I've attached the minified and non-minified coverage table so you can see what unused theme CSS.
(I got the UCSS to work by whitelisting classes, but in doing so, the main.css file is still very large (from what I think, could be wrong) this is from all the inherit class dependencies from the body.)
Thanks : )
Attached files: unused CSS minified.png
Unused CSS.png
We’ve made efforts to streamline the CSS as much as possible to ensure optimal performance. All the CSS included in the theme is necessary for the proper functioning of the theme’s features. As the theme offers various customizable options, some of the unused CSS may appear in your specific setup, but it’s important to note that this is by design to support different configurations and features.
If you are seeing a high amount of unused CSS, it’s likely due to the additional features you’re not currently using.
We appreciate your understanding, and if you have any further questions or need additional assistance, feel free to reach out.
Best regards,