Autoptimize + Critical CSS Cumulative Layout Shift CLS

hey Todd; does the CLS vanish when “inline & defer” (so critical css) is off?

frank

Hi Frank,

Thank you for your prompt response.

As a matter of fact, the CLS does vanish when I uncheck “Inline & Defer CSS.”

In that case, what’s the recommendation?

— Todd

I’ll have to confer with the critical CSS specialist (the one running criticalcss.com) about this Todd, more soon.

Okay, thank you, Frank.

Hey Todd;
The critical CSS specialist would like to have a look, but AO + CCSS seem off now, any chance you could re-enable?

frank

Hi Frank,

I turned “Inline and Defer CSS” back on.

Thank you.

— Todd

thanks, I’ll pass the message along Todd and will keep you posted here!

Hey Todd; Jonas (of critical CSS) had a look, but CLS is 0 at the moment, did you remove that content-box by any chance?

Apparently, I removed it to test a theory and forgot to put it back. It’s back on the page now and the CLS returned. Thank you.

OK, I’ll tell Jonas he can have another look ??

Hey Todd; feedback from Jonas:

I just looked at this again now. The CLS that is there currently is because the hero/product image is missing dimensions, so it doesn’t occupy (enough) space until it loads, causing the content to shift. This can be fixed by either adding width+height attributes in the HTML, or the equivalent in CSS.

Can you fix this image problem, making sure the correct width and height are set, and let’s see if the CLS is still a problem afterwards?

Thanks. I fixed the dimensions on the hero image at the top so that it’s set at 1080 px.

However, I don’t think that’s the issue and it’s kind of a ghost in the machine.

The original CLS issue runs sitewide anywhere there is a table of contents within the article. I’ve tried setting that component at 1080 px and auto and it was still occurring and only disappeared when I deactivated Autoptimize.

Now, it’s not occurring on that page and the 0.07 CLS issue is being caused by the quote marks icon further down the page. Let’s ignore that for the moment.

Google Search Console flagged about half the pages on my site for CLS issues, so I went down them and a lot of them are now coming up zero which is great.

https://niceice.com/costco-diamonds-vs-blue-nile-which-sparkle-more-why/ was showing a CLS of 0.34 but that went to 0 when I cleared the RapidLoad cache for that page and ran it again.

In that case, it might just be a matter of stuff needing to be re-optimized for the pages that are being flagged.

Still seeing high desktop CLS on both URL’s I’m afraid ..

On https://niceice.com/chipped-diamonds-accidental-damage-bruise-scratch/ the image (or rather the higher div that is a great-grandparent of the image) now indeed initially is too wide (I guess your 1080px):

On https://niceice.com/costco-diamonds-vs-blue-nile-which-sparkle-more-why/ on the contrary the initial placeholder for the image tcb-flex-col c-33 is too small:

The fact your lazyloading those images might also be a contributing factor, you might want to look into not lazyloading above-the-fold images?

Something is definitely up because I wasn’t getting any CLS on that page and resolved it on several others.

In fact, there was a nice little green blip showing an upward trend on the Core Vitals report within Google Search Console for two days and then it went red again.

On this particular page, the CLS today was reported as being due to a content box containing a quote. I removed that and stuck the text within a normal paragraph and the CLS moved to the table of contents. I removed that and it dropped down pretty close to zero.

And was that content-box above or below the fold Todd?