to add to my post, disabling Autoptimize fixes the issue.
try unticking “also aggregate inline CSS”. you’ll probably also have to remove the critical CSS (it seems to have relevant rules as well with the wrong color) and purge the page cache when done.
hope this helps,
frank
Many thanks, Frank! It is indeed the critical CSS, problem solved after I deleted the cascading CSS from Critical CSS part.
Hi Frank, I have another question, when running Google Page Speed Insight, there is a large CSS file showing in “Remove Unused CSS” section, anything I can do about it?
https://snipboard.io/FMk9Sf.jpg
Not from within Autoptimize; the unused CSS is being reported as being AO’s, but AO merely aggregates all the CSS provided by your theme & plugins, so if you (really) want to tackle “remove unused CSS” then you should look into your theme & plugins (you might be able to get some improvement using e.g. “plugin organizer” to only allow plugins to work on specific pages). Moreover the unused CSS will likely be different for different pages (or parts of your site), so that would lead to different autoptimized CSS-files being loaded on different pages which might not be ideal either.
hope this clarifies,
frank
Thanks, Frank. It helps me to understand the issue.
