Inline and Defer CSS – not working on desktop?

I guess the problem is that you’re using the same critical CSS as for your homepage @laurenng, which does not match the “above-the-fold” styles needed for “make-chocolate-almond-butter-almond-nutella/” (your homepage does not have render-blocking CSS according to GPSI). Using specific critical CSS for that page will likely fix the problem.

hope this clarifies,
frank

I actually am using a combination of the home page, this specific post, and a page (I think I used “about”). I took the three files and used Kaleidoscope to compare and merge them. If I’m missing just one style, will this still warning still trigger? Should I conditionally enqueue the critical CSS files in the theme for home vs post vs page?

If I’m missing just one style, will this still warning still trigger?

I do think so yeah (although I don’t know what’s in the black box that is GPSI)

Should I conditionally enqueue the critical CSS files in the theme for home vs post vs page?

that would indeed be a better approach.

Thanks for your help, Frank. I used another plugin to conditionally add the critical CSS and found that I was able to resolve that, as you said.

A note on this particular situation:
When I activate BJ Lazy Load, I get the “Eliminate render-blocking JavaScript and CSS in above-the-fold content” and “Prioritize visible content” warnings again, only on Desktop (although it does mask the “Optimize images” warning). Not the root of the problem, but a fun little side effect I though I’d share. ??

Yeah, javascript that affects visual elements can have that effect on GPSI results. I guess you’d need a lazy-load plugin that leaves all images that are above-the-fold be, only lazy-loading images below the fold … GPSI is a rabbit hole really, don’t get lost while chasing the white rabbit ??