[Support request] CLS from “site grid-container container hfeed grid-parent”

[Edward]

I’ve seen quite a few posts about this, but I can’t seem to get my CLS issue to resolve. It’s the last bit of issues holding my CWV back, as I’ve gotten most of the other issues to resolve speeding up the site, but now i get this massive CLS.. which sometimes doesn’t happen but comes right back.

URL is https://theweatherstationexperts.com

Hopefully you guys can help me find what’s causing this, I’ve tried some of the tips here from similar topics. Just can’t seem to keep the CLS down, even though numbers otherwise have improved.

[Fernando]

Hi Edward,

For one, your images such as these images: https://share.getcloudapp.com/8LugX9kR don’t have a defined height and width.

Both are set to auto.

Try setting the width to 100% or a specific value.

[Edward]

Seems to be from something else. Here’s another page without that comparison table where the CLS was happening on the front page:

https://theweatherstationexperts.com/is-tornado-alley-shifting-east/

I had thought it was that too, but its something before that apparently

[David]

Hi there,

see here:

https://www.webpagetest.org/vitals.php?test=230214_BiDc6Z_9ZE&run=1&cached=0#cls

Hover over the image, and you will see on initial load your site has a lot of padding, that is then removed.

General culprit for this is Optimization ( eg. Critical CSS ) and caching plugin / functions.
Disabling those options will help you identify which is causing it.

[Edward]

Yeah! Is that FOUT too? I am seeing two different fonts there

[David]

Most probably, that too can be related to your optimized CSS or by setting a fonts display property to swap

[Edward]

Tried deactivating Asset Cleanup Pro and any Ezoic Leap CSS features, cleared cache and leap optimization cache, but it seems like the CLS has reduced SOME.. but now has moved to another element. UGH. Getting closer, I guess?

[David]

CSS happens when the browser has to update its layout to accommodate a change that occurred after it had finished a render of the page. This can be:

1. missing attributes in the HTML, such as an Images width and height so the browser doesn’t know its size and cannot allocate correct space for it. This is not the case with your site.

2. font swapping, if the display property is set to swap, and the site uses a font a that needs to be loaded then this results in FOUT or similar font re-render issues that can lead to reflow. This also does not look to be the case on your site.

3. a CSS stylesheet is loaded after the initial render leading to a style redraw… this looks to be the case here.

Aside from the Ezoic Leap and Asset Cleanup, which are both known to cause issues if not set up correctly, are there any other optimizers in play ? As i see a lot of CSS that has been inlined with this ID data-wpacu-inline-css-file – do you know what that is ?

[Edward]

That’s still ACU, so it seems like it’s being cached somewhere. Grrr. Looking at those Leap settings. I did have something set for script execution. I removed that since it was doing the same thing (had a script delay set, oops). Cleared all caches, including “Clear Leap Optimization Data.”

Mobile test and desktop test come through with no or little CLS!

Reactivating ACP. Looks like it’s gone. Can you confirm?

Looks to be a case of conflicting settings between ACU and Leap, maybe?

[Edward]

I also added this code as I had SOME CLS left (like .14 I think) on desktop. Found it here:

https://wordpress.org/support/topic/cls-issue-due-to-main-section/

.both-sidebars .site-content {
    justify-content: center;
}

.left-sidebar .site-content,
.both-left .site-content {
    justify-content: flex-end;
}

This seems to have calmed everything down CLS-wise. Just wanted to add this on here as I know these pages have been extremely helpful in search for addressing issues 🙂 thanks guys, this is why I went with GP!

[David]

Looks great – glad to hear you got it resolved.

[Author]

Posts