Critical CSS Generation - not grabbing all elements?

[hooplah64]

I recently had a site redesign done and it seems LiteSpeed Cache isn't capturing all the critical CSS that's needed to render the first pageview. Ideally, I'd like to avoid putting a lot of custom rules under Tuning > Critical CSS Rules, just so the problem doesn't crop up further down the road with plugin updates, etc. I'd like to figure out why this is happening and correct it in a way so that it's a long-term, flexible fix.

Example URL: https://homemadehooplah.com/4-ingredient-peanut-butter-cookies/

Verifying this page in Google PageSpeed Insights can get varying results, but this is the common load breakdown I see most often:



As you can see in the above graphic, the social share buttons take a bit to get their formatting as well as a few other elements. I'm not sure why these elements have not been grapped by the critical CSS - and if they are, I'm not sure why they are taking longer than "normal" to render. It's causing the page to be dinged with Cumulative Layout Shift.

My design team doesn't usually work with LiteSpeed Cache, and I would really like to keep using it, so they tasked me with pinging the developer/community to figure out what we could do here. My knowledge about optimization is very lacking, so I apologize if I didn't structure this question very well. Below are a few quotes from my design team about what they're seeing:

On individual posts, these are affecting the scores as well, but there is one other major issue which is with LiteSpeed's Critical CSS feature.

This is an important feature - what it does is take all of the styles used on the page, and pull out the 'critical 'ones that render the visible part of the top of the page, and puts them inline at the top of the source code. That way, this part can be loaded immediately; it then gets replaced with teh styles for the full page once they're fully loaded.

However, it doesn't appear to be generating the rules properly.

Ideally it would be good to find out why the automatic generation wasn't working properly - if there's a fix on that side, that would be much more flexible going forward. It's currently combining the main theme CSS with CSS generated by plugins etc, so manual overrides could need redoing regularly each time a change is made.

If that's not an option then it may be possible to hand-craft some rules by eye just for PageSpeed's purposes.

Has anyone experienced something similar to this? Is there an easy solution, aside from custom rules in Tuning?

 

[Pong]

https://www.litespeedtech.com/support/forum/threads/please-use-the-official-wordpress-forum.16028/

 

[winkybil]

This makes it nice and easy to optimize a site that isn't going to change. But what if I expect the CSS in my initial viewport to get updated once in a while and don't want the inline CSS to get out of sync? Is there a way to build this with Grunt or Gulp every time I Speed Test deploy?