[Support request] div site grid-container container – causing major CLS shift

[Ivaylo]

Hi,
I’m testing CLS issues and it shows the following:

<div class="site grid-container container">

How to fix that?

[David]

Hi there,

when Google PageSpeed or other metrics testers report the CLS elements they are simply showing what elements on the page had to Shift the furthest.

So in the majority of cases, the element it lists is not the cause. And generally you need to look what comes before it.
In this case its the Header.

See here:

https://www.webpagetest.org/vitals.php?test=230303_BiDcPH_9DN&run=1#cls

The header size is changing, as the image and its associated height CSS isn’t initially loaded. Causing the header size to change and push the site container down.

You can try adding this CSS, to make sure the mobile header has a min height to avoid that:

#mobile-header .inside-navigation {
    min-height: 90px;
}

[Ivaylo]

Thanks! That seems to do the trick.
I’m still getting some slight CLS shift on mobile and it’s caused by the Menu icon and Search icon.

Any idea why they shift even though the min-height is already set and they are within the header and obviously smaller than 90px?

[David]

The issue looks related to the Ezoic Critical CSS, it does not include the themes main styles so which Ezoic is deferring. You need to check with Ezoic to fic that.

In the mean time, you can try adding this CSS:

.main-navigation .inside-navigation {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

[Ivaylo]

Thanks!

[David]

You’re welcome

[Author]

Posts