So I fairly recently moved all my WordPress websites to Guru (which I am happy with BTW) who use LiteSpeed server. As a result I also switched over to the Litespeed cache plugin.
This was working fine for about 1 month, then I started getting some weird and unwanted behavior, probably after installing updates.
On every single page on my site (this one) I was getting a background image inserted that was nothing to do with my site at all as well as some other random layout and menu issues.
I inspected the source and saw that the image in question was actually coming from one of my sub-sites Even more strange was the fact that this image was not even a site-wide background image on that site either, it was only used on a single page.
I determined it was Litespeed delivering the image by checking the network activity in the chrome inspector, and then disabling all the features in the lscache debug tab, which caused the CSS issues went away. So I then started disabling all the features individually and nailed it down the “critical CSS” option.
So I then contacted Litespeed support for help, who surprisingly were quick to respond and help, especially considering this is a free plugin.
It turns out that the critical CSS generator by default only generates one set of CCSS for all the websites, due to which sometimes a different CSS can get mixed up.
This can be solved by using the following https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:cache:lscwp:configuration:optimize#separate_ccss_cache_post_types
And set Litespeed Cache plugin to generate different CCSS for each page and post. I am told I shouldn’t get this issue again, so fingers crossed.
