Significant CLS from "site grid-container container hfeed grid-parent"

Hi there,

see here, this report provides a nice filmstrip so you can see whats going on:

https://www.webpagetest.org/video/compare.php?tests=220613_AiDcEN_7B3-r:3-c:0&highlightCLS=1

You will notice on initial load the text is occupying more space then it does at the 1.0s cell.
Most noticeable on the Navigation which wraps to two lines.
Which causes a shift of all the elements below it, and the largest of those is the <div class="site grid-container container hfeed grid-parent" id="page"> which gets hit by the biggest layout shift ( its suffering the symptoms of layout shift ).

So, this happens when Fonts or the CSS styles are loaded after initial render.
Fonts loaded with the display=swap property and CSS optimizations are both primary causes of this.

However, before delving into that, go to Customizer > Layout > Primary Navigation, and reduce the Menu Item Width.
The logic here is to reduce the space the menu occupies as currently it is almost the same width as the laptop size screen that google simulates its tests on.
Try setting it to 30px instead of 50px. And retest - let me know.

I followed your suggestion and reduced the menu width to 30 and it's made a tremendous improvement — I'm seeing only minimal CLS now. Thank you!!!

Do you think I should change display=swap to a different method? I went with swap because I wanted to minimize blocking, but if it's causing problems, I could put it to whatever you'd suggest.

Apologies about the length of time it took me to reply. Thank you again for the excellent suggestion!

No need for apologies :)

for the display attribute i generally leave it as auto.
Google will moan about it, but if it reduces CLS i would suffer the moaning lol

I'll make that change. Thanks again!

Let us know how you get on :)

When running a page through google PSI, f.i. https://www.onlinemarketingmonkey.be/blog/het-verschil-tussen-sea-en-seo , I’m also getting a significant CLS of 0.372 (for Desktop) from div class="site grid-container container hfeed". The same for div class="inside-navigation grid-container" of 0.033 and even for a H2 of 0.015.
I’ve read through a number of other topics here addressing similar issues, but I’m not sure how to fix mine? Thanks for your help.

Hi there,

can you disable your image lazy loader and retest your page.
As when i test your page on a throttled network i can see the lazy loader is using a square image for the placeholder which means the browser reserves too much space for the image, and when the image loads that space shrinks which results in the Layout shift of those elements.

Many thanks for your feedback David! Problem seems to be solved with this :-)
Hopefully the deactivation of the lazy loading doesn't cause any other SEO problems.

Glad to hear that.
As a general note - NOT all lazy loaders are built the same, most of them load the right size placeholder :)

I'm having the same issue, but when I go through the steps laid out above, it seems to get worse. Would you mind taking a look at my CLS on desktop? https://www.leveeroadstudio.com/best-free-script-fonts-on-canva/

Hi Amy,

Can you try modify the logo image's dimention to 340px * 68px in media library?

Hi Ying! I've updated the logo media file. I don't see any improvement though.

Hi there,

in your lazy loader plugin, they generally provide an option to exlcude lazy loading of images by adding a CSS Class to the field provided. Can you add: is-logo-image so it doesn't lazy load your logo. We can then eliminate that as a potential issue.

Done!