Autoptimize + Critical CSS Cumulative Layout Shift CLS

Resolved toddlgray
(@toddlgray)

3 years ago

First, thank you for this plug-in because it has enabled me to significantly speed up the site in combination with RapidLoad and WP Rocket.

I’m getting some cumulative layout shift between 0.20 – 0.9 and have been able to isolate it to the Autoptimize and Critical CSS components by disabling RapidLoad and WP Rocket.

I stopped using WP Rocket for CSS/JS optimization because it was also causing CLS. It’s primarily running now to close the gap along with Asset Clean-up for things that aren’t covered.

When Autoptimize is disabled, the CLS drops to 0 – 0.1 but it’s currently 0.4 on this page. It’s tripping on a content box (Thrive Theme Builder) and if I delete that box, it just moves on to something else.

Consequently, I’m not opposed to paying for priority support to further optimize the site and/or resolve this issue if it’s more than a simple tweak. However, I wasn’t certain which OM option fit the bill since the site is already running high 90s with exception of the CLS issue.

Thank you for your time and support.

— Todd

The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 21 total)

1 2 →

Plugin Author Optimizing Matters
(@optimizingmatters)

3 years ago

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

frank

Thread Starter toddlgray
(@toddlgray)

3 years ago

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

Plugin Author Optimizing Matters
(@optimizingmatters)

3 years ago

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

Thread Starter toddlgray
(@toddlgray)

3 years ago

Okay, thank you, Frank.

Plugin Author Optimizing Matters
(@optimizingmatters)

3 years ago

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

Thread Starter toddlgray
(@toddlgray)

3 years ago

Hi Frank,

I turned “Inline and Defer CSS” back on.

Thank you.

— Todd

Plugin Author Optimizing Matters
(@optimizingmatters)

3 years ago

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

Plugin Author Optimizing Matters
(@optimizingmatters)

3 years ago

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?

Thread Starter toddlgray
(@toddlgray)

3 years ago

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.

Plugin Author Optimizing Matters
(@optimizingmatters)

3 years ago

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

Plugin Author Optimizing Matters
(@optimizingmatters)

3 years ago

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?

Thread Starter toddlgray
(@toddlgray)

3 years ago

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.

Plugin Author Optimizing Matters
(@optimizingmatters)

3 years ago

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?

Thread Starter toddlgray
(@toddlgray)

3 years ago

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.

Plugin Author Optimizing Matters
(@optimizingmatters)

3 years ago

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