Wordpress LScache Plugin: Certain elements missing from critical css that is generated
Last Updated on: Wed, 15 Apr 2026 00:00:02 Hi there support team, Is there anything I can do about the fact that specific css names are not included in the critical css? My comment section which is regular and part of the theme (not added by any plugin) doesnt have all of its css clases in the critical css. When I check inline most of the critical css is there properly in place but the google lighthouse showed me one H4 element that has large Cumulative Layout Shift and that element is the H4 header comments bascially just a header before comments. It is styled by a style that is not included in the inline css that the plugin injects at the top of the html code of the page. A few other css styles are also not included and they play a role in the rest of the comment section. My guess is that the page is first loaded by html and then restyled after the css is loaded but by then it shifts and increases the cls.. Can anything be done about this? Looking forward to your response. Also I cant provide any links? I wouldnt want to have google index any backlinks from support forums.. Maybe you can help me just by giving ideas what is happening. The comment section is a separate .php file in my theme and its rules are there. But its styles are in the styles.css main file of the theme which your plugin uses without any problems for other styles. Hi, currently CCSS is auto-generated a temporary solution as if you know what/where is the issue , you can manually edit the generated rules to adapt your issue , or even manually put the CCSS rules Best regards, Hi qtwrk, Let me see if I understood correctly If I go to the settings and manually put the ccss rules do I need to add there the missing rules or to input the rules already present and add the missing ones as well. Basically, do I copy what the plugin added to the top of my html + what is missing and combine it and put it in the manual ccss rules? Also wouldnt this remove the ability to have critical css on per page basis? Thank you for your help so far Hi, you can go to /wp-content/litespeed/ccss/ directory , you should see files with URI name , like home.css, page.css ?etc you can edit the rules there , these rule is inserted into HTML. Are you using per page CCSS ? are you sure its necessary for your site ? generally , most sites are sharing same CCSS on same type page Best regards, Hi qtwrk Thanks so much for clarifying that. Yes I do use per page ccss because I use a separate plugin to turn off unnecessary css on a page basis. That way a page that doesnt utilise a certain plugin doesnt have to load that plugin css at all Thanks so much for this. I will try it out! yeah , well , it will be bit of harder for manual edit , but it should be the same idea. Tell me this though. If I for any reason purge the css from litespeed cloud cache for ccss or it happens on its own every seven days do I need to manually add everything again? Also would you consider adding an option to your plugin to manually inject a piece of css code to the ccss file/s ? Hi, by design , CCSS will NOT be purged until you explicitly click purge critical CSS , purge all wont purge CCSS and if necessary , I would suggest you to backup final CCSS just in case, and you can also , change file/directory permission to prevent it be removed/edited. Best regards, Thanks for clarification! Just one more question. In the CCSS directory I see filenames with random names like page8484d8s4d84dv1sd48.css how can I know which is for which page? Hi, yeah ? it will be bit of troubling process, I will advice our devs to make it easier to figure out for now , you can use debug log 1. enable debug log 2. access the page 3. in log, you will see something like this 10/06/20 21:37:03.242 [123.123.123.123:12346 1 nAV] [CSS] Generating: --- array ( url => https://domain/page-url.html, ccss_type => post-ea573d4c5929e3b1dd479a4a633d7f9c, user_agent => Mozilla/5.0 (Macintosh Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36, is_mobile => 0, in which , ccss_type => post-ea573d4c5929e3b1dd479a4a633d7f9c, indicates the file will be /wp-content/litespeed/ccss/post-ea573d4c5929e3b1dd479a4a633d7f9c.css Best regards, or, edit this file https://github.com/litespeedtech/lscache_wp/blob/master/src/css.cls.php#L43 the line 43 , change it to $html_head = . $rules . . $html_head then you will see in HTML code , something like this a,article,aside,body,code,div,form..... Hi qtwrk I managed it! Thanks so much! No that the CLS is handled I get the 98/100 in google pagespeed mobile and 100 for pc. Using your plugin I handled the ccss problem, managed to create a single css file for each page and used Googles cloud jQuery + a few other tweaks. Also in conjunction with a few other plugins of which each did a little bit of optimising I managed to get my website to fantastic speeds with average hosting. Thanks so much and for your help. Your plugin played the major role in optimising the site to load in under 2s. It used to load in 7-9s
LiteCache Rush: Speed comes from using less, not from doing it faster
Reference